{% trans_default_domain 'messages' %}

{% include '@Survey/frontend/_survey_assets.html.twig' %}
{% include '@Survey/frontend/_survey_branding.html.twig' %}

{% set moduleHeadline = (headline is iterable ? headline.text|default('') : headline|default(''))|striptags|trim %}

<section class="survey-shell survey-grid">
    {% if moduleHeadline %}
        <header>
            <h2>{{ moduleHeadline }}</h2>
        </header>
    {% endif %}

    {% if loginRequired %}
        <div class="survey-alert warning">{{ 'survey.edit.login_required'|trans }}</div>
    {% elseif createMode %}
        <div class="survey-card">
            <h3>{{ 'survey.edit.create_title'|trans }}</h3>
            <p>{{ 'survey.edit.create_text'|trans }}</p>
            {{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
                <label class="survey-label">{{ 'survey.edit.label_title'|trans }}{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
                <label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(surveyForm.description) }}</label>
                <label class="survey-inline-check">{{ form_widget(surveyForm.published) }}<span>{{ 'survey.edit.publish_directly'|trans }}</span></label>
                <div class="survey-button-row">
                    <button class="survey-button primary">{{ 'survey.edit.create_submit'|trans }}</button>
                    {% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
                </div>
            {{ form_end(surveyForm) }}
        </div>
    {% else %}
        {% set locked = survey.isLocked == '1' %}
        <div class="survey-button-row">
            {% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
            {% if publicUrl %}<a class="survey-button primary" href="{{ publicUrl }}" target="_blank" rel="noreferrer">{{ 'survey.edit.public_view_open'|trans }}</a>{% endif %}
        </div>

        <div class="survey-kpis">
            <article class="survey-card"><strong>{{ 'survey.edit.public_link'|trans }}</strong><div>{% if publicUrl %}<a href="{{ publicUrl }}" target="_blank" rel="noreferrer">{{ publicUrl }}</a>{% else %}{{ 'survey.edit.no_public_page'|trans }}{% endif %}</div></article>
            <article class="survey-card"><strong>{{ 'survey.edit.status'|trans }}</strong><div class="survey-meta"><span class="survey-badge {{ survey.published ? 'success' : 'neutral' }}">{{ survey.published ? 'survey.edit.published'|trans : 'survey.edit.draft'|trans }}</span>{% if locked %}<span class="survey-badge warning">{{ 'survey.edit.locked'|trans }}</span>{% endif %}</div></article>
            <article class="survey-card"><strong>{{ 'survey.edit.editors'|trans }}</strong><div>{{ 'survey.edit.editors_count'|trans({'%count%': editors|length}) }}</div></article>
        </div>

        {% if locked %}
            <div class="survey-alert warning">{{ 'survey.edit.structure_locked'|trans }}</div>
        {% endif %}

        <div class="survey-grid-columns">
            <div class="survey-grid">
                <div class="survey-card">
                    <h3>{{ 'survey.edit.metadata'|trans }}</h3>
                    {{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
                        <label class="survey-label">{{ 'survey.edit.label_title'|trans }}{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
                        <label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(surveyForm.description) }}</label>
                        <label class="survey-inline-check">{{ form_widget(surveyForm.published) }}<span>{{ 'survey.edit.publish_survey'|trans }}</span></label>
                        <div class="survey-button-row"><button class="survey-button primary">{{ 'survey.edit.save'|trans }}</button></div>
                    {{ form_end(surveyForm) }}
                </div>

                <div class="survey-card">
                    <h3>{{ 'survey.edit.editors_title'|trans }}</h3>
                    <div class="survey-grid">
                        {% for editor in editors %}
                            <div>
                                <strong>{{ ([editor.firstname, editor.lastname]|join(' ')|trim|striptags) ?: (editor.email|striptags|trim) }}</strong><br>
                                <span>{{ editor.email|striptags|trim }}</span>
                            </div>
                        {% else %}
                            <div>{{ 'survey.edit.no_editors'|trans }}</div>
                        {% endfor %}
                    </div>
                </div>

                <div class="survey-card">
                    <h3>{{ 'survey.edit.responses_title'|trans }}</h3>
                    <div class="survey-grid">
                        {% for submission in submissions %}
                            <article>
                                <div class="survey-meta">
                                    <span class="survey-badge neutral">{{ 'survey.list.answers'|trans({'%count%': submission.answerCount}) }}</span>
                                    <span class="survey-badge {{ submission.isFinished ? 'success' : 'warning' }}">{{ submission.isFinished ? 'survey.edit.completed'|trans : 'survey.edit.open'|trans }}</span>
                                </div>
                                <div>{{ 'survey.edit.started_at'|trans }}: {{ submission.startedAt ? submission.startedAt|date('d.m.Y H:i') : 'survey.edit.unknown'|trans }}</div>
                                <div>{{ 'survey.edit.completed_at'|trans }}: {{ submission.completedAt ? submission.completedAt|date('d.m.Y H:i') : 'survey.edit.unknown'|trans }}</div>
                                <div>{{ 'survey.edit.participation_code'|trans }}: {{ submission.token }}</div>
                            </article>
                        {% else %}
                            <div>{{ 'survey.edit.no_submissions'|trans }}</div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="survey-grid">
                <div class="survey-card" data-survey-question-editor>
                    <div class="survey-meta"><h3>{{ 'survey.edit.questions_title'|trans }}</h3>{% if activeQuestionId %}<span class="survey-badge neutral">{{ 'survey.edit.edit_mode'|trans }}</span>{% endif %}</div>
                    {% if not locked %}
                        {% set questionType = questionForm.type.vars.value ?: 'yes_no_maybe' %}
                        {{ form_start(questionForm, {attr: {class: 'survey-form-grid'}}) }}
                            <label class="survey-label">{{ 'survey.edit.label_type'|trans }}{{ form_widget(questionForm.type, {attr: {'data-survey-question-type': '1'}}) }}</label>
                            <label class="survey-label">{{ 'survey.edit.label_question'|trans }}{{ form_widget(questionForm.question) }}{{ form_errors(questionForm.question) }}</label>
                            <label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(questionForm.description) }}</label>
                            <label class="survey-inline-check">{{ form_widget(questionForm.mandatory) }}<span>{{ 'survey.edit.mandatory'|trans }}</span></label>
                            <label class="survey-inline-check">{{ form_widget(questionForm.published) }}<span>{{ 'survey.edit.active'|trans }}</span></label>
                            <label class="survey-inline-check yes-no-config-field"{% if questionType != 'yes_no_maybe' %} style="display:none"{% endif %}>{{ form_widget(questionForm.allowMaybe) }}<span>{{ 'survey.edit.allow_maybe'|trans }}</span></label>
                            <div class="yes-no-config-field survey-grid-columns"{% if questionType != 'yes_no_maybe' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
                                <label class="survey-label">{{ 'survey.edit.jump_yes'|trans }}{{ form_widget(questionForm.jumpOnYes) }}</label>
                                <label class="survey-label">{{ 'survey.edit.jump_no'|trans }}{{ form_widget(questionForm.jumpOnNo) }}</label>
                            </div>
                            <label class="survey-inline-check choice-config-field"{% if questionType != 'choice' %} style="display:none"{% endif %}>{{ form_widget(questionForm.allowMultiple) }}<span>{{ 'survey.edit.allow_multiple'|trans }}</span></label>
                            <div class="choice-config-field survey-grid-columns"{% if questionType != 'choice' %} style="display:none;grid-template-columns: repeat(2, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(2, minmax(0, 1fr));"{% endif %}>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 1}) }}{{ form_widget(questionForm.answerOption1) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 2}) }}{{ form_widget(questionForm.answerOption2) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 3}) }}{{ form_widget(questionForm.answerOption3) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 4}) }}{{ form_widget(questionForm.answerOption4) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 5}) }}{{ form_widget(questionForm.answerOption5) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 6}) }}{{ form_widget(questionForm.answerOption6) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 7}) }}{{ form_widget(questionForm.answerOption7) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 8}) }}{{ form_widget(questionForm.answerOption8) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 9}) }}{{ form_widget(questionForm.answerOption9) }}</label>
                                <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 10}) }}{{ form_widget(questionForm.answerOption10) }}</label>
                            </div>
                            <div class="range-config-field survey-grid-columns"{% if questionType != 'range' %} style="display:none;grid-template-columns: repeat(3, minmax(0, 1fr));"{% else %} style="grid-template-columns: repeat(3, minmax(0, 1fr));"{% endif %}>
                                <label class="survey-label">{{ 'survey.edit.range_min'|trans }}{{ form_widget(questionForm.rangeMin) }}</label>
                                <label class="survey-label">{{ 'survey.edit.range_max'|trans }}{{ form_widget(questionForm.rangeMax) }}</label>
                                <label class="survey-label">{{ 'survey.edit.range_step'|trans }}{{ form_widget(questionForm.rangeStep) }}</label>
                            </div>
                            <div class="survey-button-row"><button class="survey-button primary">{{ activeQuestionId ? 'survey.edit.update_question'|trans : 'survey.edit.save_question'|trans }}</button></div>
                        {{ form_end(questionForm) }}
                    {% endif %}

                    <div class="survey-grid">
                        {% for question in questions %}
                            <article class="survey-card">
                                <div class="survey-meta">
                                    <span class="survey-badge neutral">{{ question.type }}</span>
                                    {% if question.mandatory %}<span class="survey-badge warning">{{ 'survey.edit.mandatory_badge'|trans }}</span>{% endif %}
                                    {% if loop.first %}<span class="survey-badge success">{{ 'survey.edit.start_badge'|trans }}</span>{% endif %}
                                </div>
                                <h4>{{ question.question|striptags|trim }}</h4>
                                <p>{{ (question.description|striptags|trim) ?: 'survey.edit.no_extra_description'|trans }}</p>
                                {% if not locked %}
                                    <div class="survey-button-row">
                                        <a class="survey-button secondary" href="?survey={{ survey.id }}&question={{ question.id }}">{{ 'survey.list.edit'|trans }}</a>
                                        <form method="post">
                                            <input type="hidden" name="_survey_action" value="delete-question">
                                            <input type="hidden" name="item_id" value="{{ question.id }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete-question-' ~ question.id) }}">
                                            <button class="survey-button danger" onclick="return confirm('{{ 'survey.edit.delete_question_confirm'|trans|e('js') }}');">{{ 'survey.edit.delete'|trans }}</button>
                                        </form>
                                    </div>
                                {% endif %}
                            </article>
                        {% else %}
                            <div>{{ 'survey.edit.no_questions'|trans }}</div>
                        {% endfor %}
                    </div>
                </div>

                <div class="survey-card">
                    <div class="survey-meta"><h3>{{ 'survey.edit.conditions_title'|trans }}</h3>{% if activeConditionId %}<span class="survey-badge neutral">{{ 'survey.edit.edit_mode'|trans }}</span>{% endif %}</div>
                    {% if not locked %}
                        {{ form_start(conditionForm, {attr: {class: 'survey-form-grid'}}) }}
                            <label class="survey-label">{{ 'survey.edit.source_question'|trans }}{{ form_widget(conditionForm.sourceQuestion) }}</label>
                            <label class="survey-label">{{ 'survey.edit.answer'|trans }}{{ form_widget(conditionForm.answerValue) }}</label>
                            <label class="survey-label">{{ 'survey.edit.next_question'|trans }}{{ form_widget(conditionForm.targetQuestion) }}</label>
                            <div class="survey-button-row"><button class="survey-button primary">{{ activeConditionId ? 'survey.edit.update_condition'|trans : 'survey.edit.save_condition'|trans }}</button></div>
                        {{ form_end(conditionForm) }}
                    {% endif %}

                    <div class="survey-grid">
                        {% for condition in conditions %}
                            <article class="survey-card">
                                <div><strong>{{ 'survey.edit.condition_prefix'|trans({'%value%': condition.answerValue|striptags|trim}) }}</strong></div>
                                <div>{{ (condition.sourceQuestionLabel|striptags|trim) ?: 'survey.edit.question_fallback'|trans({'%id%': condition.sourceQuestion}) }}</div>
                                <div>{{ 'survey.edit.continue_to'|trans({'%target%': ((condition.targetQuestionLabel|striptags|trim) ?: ('survey.edit.question_fallback'|trans({'%id%': condition.targetQuestion})))}) }}</div>
                                {% if not locked %}
                                    <div class="survey-button-row">
                                        <a class="survey-button secondary" href="?survey={{ survey.id }}&condition={{ condition.id }}">{{ 'survey.edit.edit_condition'|trans }}</a>
                                        <form method="post">
                                            <input type="hidden" name="_survey_action" value="delete-condition">
                                            <input type="hidden" name="item_id" value="{{ condition.id }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete-condition-' ~ condition.id) }}">
                                            <button class="survey-button danger" onclick="return confirm('{{ 'survey.edit.delete_condition_confirm'|trans|e('js') }}');">{{ 'survey.edit.delete'|trans }}</button>
                                        </form>
                                    </div>
                                {% endif %}
                            </article>
                        {% else %}
                            <div>{{ 'survey.edit.no_conditions'|trans }}</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</section>