{% trans_default_domain 'messages' %}

{% include '@Survey/frontend/_survey_assets.html.twig' %}
{% include '@Survey/frontend/_survey_question_sort_assets.html.twig' %}
<link rel="stylesheet" href="{{ asset('assets/handorgel/css/handorgel.min.css') }}">
{% 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">
    {% for message in app.flashes('success') %}
        <div class="survey-alert success">{{ message }}</div>
    {% endfor %}

    {% for message in app.flashes('error') %}
        <div class="survey-alert error">{{ message }}</div>
    {% endfor %}

    {% if moduleHeadline %}
        <header>
            <h2>{{ moduleHeadline }}</h2>
        </header>
    {% endif %}

    {% if loginRequired %}
        <div class="survey-alert warning">{{ 'survey.edit.login_required'|trans }}</div>
    {% elseif entryNotAllowed|default(false) %}
        <div class="survey-card survey-grid">
            <div class="survey-alert warning">{{ 'survey.edit.entry_not_allowed'|trans }}</div>
            <div class="survey-button-row">
                {% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
            </div>
        </div>
    {% elseif createMode %}
        <div class="survey-card">
            <h3>{{ 'survey.edit.create_title'|trans }}</h3>
            {{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
                <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                {{ form_widget(surveyForm._token) }}
                <label class="survey-label">{{ 'survey.edit.label_survey_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>
                <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, {render_rest: false}) }}
        </div>
    {% else %}
        {% set surveyMetaFormId = 'survey-meta-form' %}
        {% set newQuestionFormId = 'survey-question-form-new' %}
        {% set canQuestionReorder = canQuestionReorder|default(false) %}

        <div class="survey-button-row survey-button-row--editor-actions">
            {% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
        </div>

        {% if not survey.published %}
            <div class="survey-card survey-editor-meta-card">
                {{ form_start(surveyForm, {action: metadataFormActionUrl, attr: {class: 'survey-form-grid', id: surveyMetaFormId, 'data-survey-dirty-form': '1'}}) }}
                    <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                    {{ form_widget(surveyForm._token) }}
                    {{ form_errors(surveyForm) }}
                    <label class="survey-label">{{ 'survey.edit.label_survey_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>
                    <div class="survey-button-row survey-button-row--form-actions">
                        <button class="survey-button primary">{{ 'survey.edit.save_metadata'|trans }}</button>
                        <div class="survey-dirty-hint" data-survey-dirty-hint-for="{{ surveyMetaFormId }}" hidden>{{ 'survey.edit.dirty_metadata'|trans }}</div>
                    </div>
                {{ form_end(surveyForm, {render_rest: false}) }}
            </div>
        {% endif %}

        {% if structureLocked|default(false) and not survey.published %}
            <div class="survey-alert warning">{{ 'survey.edit.structure_locked'|trans }}</div>
        {% endif %}

        <div class="survey-grid-columns survey-editor-layout">
            <div class="survey-question-editor-shell" data-survey-question-editor>
                    {% if canQuestionReorder %}
                        <form method="post" action="{{ metadataFormActionUrl }}" class="survey-question-order-save-shell" data-survey-question-order-shell hidden>
                            <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                            <input type="hidden" name="_survey_action" value="reorder-questions">
                            <input type="hidden" name="item_id" value="{{ survey.id }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('reorder-questions-' ~ survey.id) }}">
                            <input type="hidden" name="question_order" value="" data-survey-question-order-input>
                            <button class="survey-button primary survey-question-order-save">{{ 'survey.edit.save_question_order'|trans }}</button>
                        </form>
                    {% endif %}
                    <div class="survey-accordion-list handorgel" data-survey-handorgel{% if canQuestionReorder %} data-survey-question-sortable="1"{% endif %}>
                        {% for question in questions %}
                            {% set questionAnchor = 'survey-question-' ~ question.id %}
                            {% set isOpen = activeQuestionId == question.id %}
                            {% set questionItemForm = questionForms[question.id]|default(null) %}
                            {% set questionFormId = 'survey-question-form-' ~ question.id %}
                            <article id="{{ questionAnchor }}" class="survey-accordion-item"{% if canQuestionReorder %} data-survey-question-item data-question-id="{{ question.id }}"{% endif %}>
                                <h4 class="survey-accordion-header handorgel__header">
                                    <div class="survey-accordion-header-row">
                                        <button
                                            type="button"
                                            class="survey-accordion-toggle handorgel__header__button"
                                        >
                                            <span class="survey-accordion-heading">
                                                <span class="survey-accordion-index">{{ loop.index }}.</span>
                                                <span class="survey-accordion-copy">
                                                    <strong>{{ question.question|striptags|trim ?: ('survey.edit.question_fallback'|trans({'%id%': question.id})) }}</strong>
                                                </span>
                                            </span>
                                        </button>
                                        {% if canQuestionReorder %}
                                            <button type="button" class="survey-accordion-sort-handle" data-survey-question-sort-handle aria-label="{{ 'survey.edit.reorder_question'|trans }}" title="{{ 'survey.edit.reorder_question'|trans }}">
                                                <span class="survey-sort-icon" aria-hidden="true">
                                                    <svg viewBox="0 0 18 24" role="presentation" focusable="false">
                                                        <path d="M9 3 11.6 5.8H6.4z" fill="currentColor"></path>
                                                        <path d="M9 21 6.4 18.2h5.2z" fill="currentColor"></path>
                                                        <path d="M4.5 12h9" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"></path>
                                                    </svg>
                                                </span>
                                            </button>
                                        {% endif %}
                                    </div>
                                </h4>
                                <div class="survey-accordion-panel handorgel__content">
                                    <div class="handorgel__content__inner" data-survey-question-editor>
                                        {% if structureLocked|default(false) %}
                                            <div class="survey-grid">
                                                <div class="survey-meta">
                                                    <span class="survey-badge neutral">{{ ('survey.survey.question_type_' ~ question.type)|trans }}</span>
                                                    {% if question.mandatory %}<span class="survey-badge warning">{{ 'survey.edit.mandatory_badge'|trans }}</span>{% endif %}
                                                </div>
                                                {% if question.description|striptags|trim %}<p>{{ question.description|striptags|trim }}</p>{% endif %}
                                            </div>
                                        {% elseif questionItemForm %}
                                            {% set questionType = questionItemForm.type.vars.value ?: question.type ?: 'yes_no_maybe' %}
                                            {{ form_start(questionItemForm, {attr: {class: 'survey-form-grid', id: questionFormId, 'data-survey-dirty-form': '1'}}) }}
                                                <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                                                {{ form_errors(questionItemForm) }}
                                                <label class="survey-label">{{ 'survey.edit.label_type'|trans }}{{ form_widget(questionItemForm.type, {attr: {'data-survey-question-type': '1'}}) }}</label>
                                                <label class="survey-label">{{ 'survey.edit.label_question'|trans }}{{ form_widget(questionItemForm.question) }}{{ form_errors(questionItemForm.question) }}</label>
                                                <label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(questionItemForm.description) }}</label>
                                                <div class="survey-question-toggles">
                                                    <label class="survey-inline-check">{{ form_widget(questionItemForm.mandatory) }}<span>{{ 'survey.edit.mandatory'|trans }}</span></label>
                                                    <label class="survey-inline-check">{{ form_widget(questionItemForm.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(questionItemForm.allowMaybe) }}<span>{{ 'survey.edit.allow_maybe'|trans }}</span></label>
                                                    <label class="survey-inline-check choice-config-field"{% if questionType != 'choice' %} style="display:none"{% endif %}>{{ form_widget(questionItemForm.allowMultiple) }}<span>{{ 'survey.edit.allow_multiple'|trans }}</span></label>
                                                </div>
                                                <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(questionItemForm.jumpOnYes) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.jump_no'|trans }}{{ form_widget(questionItemForm.jumpOnNo) }}</label>
                                                </div>
                                                <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(questionItemForm.answerOption1) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 2}) }}{{ form_widget(questionItemForm.answerOption2) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 3}) }}{{ form_widget(questionItemForm.answerOption3) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 4}) }}{{ form_widget(questionItemForm.answerOption4) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 5}) }}{{ form_widget(questionItemForm.answerOption5) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 6}) }}{{ form_widget(questionItemForm.answerOption6) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 7}) }}{{ form_widget(questionItemForm.answerOption7) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 8}) }}{{ form_widget(questionItemForm.answerOption8) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 9}) }}{{ form_widget(questionItemForm.answerOption9) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 10}) }}{{ form_widget(questionItemForm.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(questionItemForm.rangeMin) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.range_max'|trans }}{{ form_widget(questionItemForm.rangeMax) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.range_step'|trans }}{{ form_widget(questionItemForm.rangeStep) }}</label>
                                                </div>
                                            {{ form_end(questionItemForm) }}

                                            <div class="survey-button-row survey-button-row--form-actions survey-button-row--question-actions">
                                                <button class="survey-button primary" type="submit" form="{{ questionFormId }}">{{ 'survey.edit.save_this_question'|trans }}</button>
                                                <form method="post" class="survey-question-action-form">
                                                    <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                                                    <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 class="survey-dirty-hint" data-survey-dirty-hint-for="{{ questionFormId }}" hidden>{{ 'survey.edit.dirty_question'|trans }}</div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </article>
                        {% else %}
                            <div>{{ 'survey.edit.no_questions'|trans }}</div>
                        {% endfor %}

                        {% if not (structureLocked|default(false)) %}
                            <article id="survey-question-new" class="survey-accordion-item">
                                <h4 class="survey-accordion-header handorgel__header">
                                    <button
                                        type="button"
                                        class="survey-accordion-toggle handorgel__header__button"
                                    >
                                        <span class="survey-accordion-heading">
                                            <span class="survey-accordion-index">+</span>
                                            <span class="survey-accordion-copy">
                                                <strong>{{ 'survey.edit.new_question'|trans }}</strong>
                                            </span>
                                        </span>
                                    </button>
                                </h4>
                                <div class="survey-accordion-panel handorgel__content">
                                    <div class="handorgel__content__inner" data-survey-question-editor>
                                        {% if newQuestionForm %}
                                            {% set questionType = newQuestionForm.type.vars.value ?: 'yes_no_maybe' %}
                                            {{ form_start(newQuestionForm, {attr: {class: 'survey-form-grid', id: newQuestionFormId, 'data-survey-dirty-form': '1'}}) }}
                                                <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                                                {{ form_errors(newQuestionForm) }}
                                                <label class="survey-label">{{ 'survey.edit.label_type'|trans }}{{ form_widget(newQuestionForm.type, {attr: {'data-survey-question-type': '1'}}) }}</label>
                                                <label class="survey-label">{{ 'survey.edit.label_question'|trans }}{{ form_widget(newQuestionForm.question) }}{{ form_errors(newQuestionForm.question) }}</label>
                                                <label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(newQuestionForm.description) }}</label>
                                                <div class="survey-question-toggles">
                                                    <label class="survey-inline-check">{{ form_widget(newQuestionForm.mandatory) }}<span>{{ 'survey.edit.mandatory'|trans }}</span></label>
                                                    <label class="survey-inline-check">{{ form_widget(newQuestionForm.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(newQuestionForm.allowMaybe) }}<span>{{ 'survey.edit.allow_maybe'|trans }}</span></label>
                                                    <label class="survey-inline-check choice-config-field"{% if questionType != 'choice' %} style="display:none"{% endif %}>{{ form_widget(newQuestionForm.allowMultiple) }}<span>{{ 'survey.edit.allow_multiple'|trans }}</span></label>
                                                </div>
                                                <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(newQuestionForm.jumpOnYes) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.jump_no'|trans }}{{ form_widget(newQuestionForm.jumpOnNo) }}</label>
                                                </div>
                                                <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(newQuestionForm.answerOption1) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 2}) }}{{ form_widget(newQuestionForm.answerOption2) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 3}) }}{{ form_widget(newQuestionForm.answerOption3) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 4}) }}{{ form_widget(newQuestionForm.answerOption4) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 5}) }}{{ form_widget(newQuestionForm.answerOption5) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 6}) }}{{ form_widget(newQuestionForm.answerOption6) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 7}) }}{{ form_widget(newQuestionForm.answerOption7) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 8}) }}{{ form_widget(newQuestionForm.answerOption8) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 9}) }}{{ form_widget(newQuestionForm.answerOption9) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.answer_option'|trans({'%number%': 10}) }}{{ form_widget(newQuestionForm.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(newQuestionForm.rangeMin) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.range_max'|trans }}{{ form_widget(newQuestionForm.rangeMax) }}</label>
                                                    <label class="survey-label">{{ 'survey.edit.range_step'|trans }}{{ form_widget(newQuestionForm.rangeStep) }}</label>
                                                </div>
                                                <div class="survey-button-row survey-button-row--form-actions">
                                                    <button class="survey-button primary">{{ 'survey.edit.save_new_question'|trans }}</button>
                                                    <div class="survey-dirty-hint" data-survey-dirty-hint-for="{{ newQuestionFormId }}" hidden>{{ 'survey.edit.dirty_new_question'|trans }}</div>
                                                </div>
                                            {{ form_end(newQuestionForm) }}
                                        {% endif %}
                                    </div>
                                </div>
                            </article>
                            {% endif %}
                    </div>
            </div>

            <div class="survey-grid survey-editor-side">
                <div class="survey-card">
                    <div class="survey-meta survey-section-head"><h3>{{ 'survey.edit.conditions_title'|trans }}</h3></div>
                    <div class="survey-grid">
                        {% for condition in conditions %}
                            <article class="survey-card survey-condition-card">
                                {% set sourceLabel = (condition.sourceQuestionLabel|default('')|striptags|trim) ?: ('survey.edit.question_fallback'|trans({'%id%': condition.sourceQuestion})) %}
                                {% set targetLabel = (condition.targetQuestionLabel|default('')|striptags|trim) ?: ('survey.edit.question_fallback'|trans({'%id%': condition.targetQuestion})) %}
                                <div><strong>Frage {{ condition.sourcePosition ?: condition.sourceQuestion }}: {{ sourceLabel }}</strong></div>
                                <div>{{ 'survey.edit.condition_prefix'|trans({'%value%': condition.answerValue|default('')|striptags|trim|capitalize}) }}</div>
                                <div>weiter zu Frage {{ condition.targetPosition ?: condition.targetQuestion }}: {{ targetLabel }}</div>
                            </article>
                        {% else %}
                            <div>{{ 'survey.edit.no_conditions'|trans }}</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</section>
<script src="{{ asset('assets/handorgel/js/handorgel.min.js') }}"></script>