{% from 'forms/_form.html' import form_row %}

{% macro render_questionnaire_preview(survey, preview_form, field_types) %}
    {% for section in survey.sections %}
        <div class="i-box js-sortable-survey-section" data-section-id="{{ section.id }}">
            <div class="ui-i-box-sortable-handle hide-if-locked"></div>
            <div class="i-box-header">
                <div class="i-box-title">
                    {% if section.display_as_section %}
                        {{ section.title }}
                    {% else %}
                        <span class="standalone-section-title">
                            {%- trans %}Standalone section{% endtrans -%}
                        </span>
                        <i class="info-helper"
                           title="{% trans %}This section will not be displayed as a section but its contents will show up standalone.{% endtrans %}"></i>
                    {% endif %}
                </div>
                <div class="i-box-buttons toolbar right hide-if-locked">
                    <div class="group">
                        <button data-href="{{ url_for('.edit_section', section) }}"
                                title="{% trans %}Edit section{% endtrans %}"
                                class="i-button js-survey-item-dialog icon-edit"
                                data-title="{% trans %}Edit section{% endtrans %}"></button>
                        <button class="i-button js-delete-item icon-remove"
                                title="{% trans %}Delete section{% endtrans %}"
                                data-qtip-style="danger"
                                data-href="{{ url_for('.delete_section', section) }}"
                                data-method="DELETE"
                                data-confirm="{% trans %}Are you sure you want to delete this section and all questions inside it?{% endtrans %}"
                                data-title="{% trans %}Delete section{% endtrans %}"></button>
                    </div>
                    <div class="group">
                        <a href="#" data-href="{{ url_for('.add_text', section) }}"
                           class="i-button js-survey-item-dialog"
                           data-title="{% trans %}Add text item{% endtrans %}">
                            {% trans %}Add text item{% endtrans %}
                        </a>
                        <button class="i-button arrow js-add-question-dropdown" data-toggle="dropdown">
                            {% trans %}Add question{% endtrans %}
                        </button>
                        <ul class="i-dropdown">
                            {% for field_type in field_types.values()|sort(attribute='friendly_name') %}
                                <li>
                                    <a href="#" data-href="{{ url_for('.add_question', section, type=field_type.name) }}"
                                       data-title="{% trans %}Add question{% endtrans %}"
                                       class="js-survey-item-dialog">
                                        {{ field_type.friendly_name }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% if section.description %}
                    <div class="i-box-description">
                        {{ section.description }}
                    </div>
                {% endif %}
            </div>
            {% if not section.children %}
                <div class="empty">
                    {% trans -%}
                        No items have been added yet so this section will not be displayed.
                    {%- endtrans %}
                </div>
            {% else %}
                <div class="i-box-content">
                    <ul class="group-list no-content-before js-sortable-survey-items">
                        {% for item in section.children %}
                            <li class="ui-sortable survey-item" data-item-id="{{ item.id }}">
                                {% if item.type.name == 'question' %}
                                    {{ _render_question(item, preview_form) }}
                                {% elif item.type.name == 'text' %}
                                    {{ _render_text(item) }}
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        </div>
    {% endfor %}
{% endmacro %}


{% macro _render_item() %}
    <div class="js-sort-handle hide-if-locked">
        <div class="handle"></div>
    </div>
    <div class="ui-sortable-content item-row flexrow f-a-center">
        {{ caller() }}
    </div>
{% endmacro %}


{% macro _render_question(question, preview_form) %}
    {% call _render_item() %}
        <div class="i-form">
            {{ form_row(preview_form['question_{}'.format(question.id)], disabled=true, orientation='vertical') }}
        </div>
        <div class="item-action-buttons toolbar hide-if-locked">
            <div class="group">
                <a href="#" data-href="{{ url_for('.add_question', question.parent, type=question.field_type, clone=question.id) }}"
                   data-title="{% trans %}Clone question{% endtrans %}"
                   title="{% trans %}Clone question{% endtrans %}"
                   data-question-id="{{ question.id }}"
                   class="i-button icon-copy js-survey-item-dialog"></a>
                <a href="#" data-href="{{ url_for('.edit_question', question) }}"
                   data-title="{% trans %}Edit question{% endtrans %}"
                   title="{% trans %}Edit question{% endtrans %}"
                   data-question-id="{{ question.id }}"
                   class="i-button js-survey-item-dialog icon-edit"></a>
                <a data-href="{{ url_for('.delete_question', question) }}"
                   data-method="DELETE"
                   data-title="{% trans %}Delete question{% endtrans %}"
                   title="{% trans %}Delete question{% endtrans %}"
                   data-qtip-style="danger"
                   data-confirm="{% trans %}Are you sure you want to delete this question?{% endtrans %}"
                   class="i-button icon-remove js-delete-item"></a>
            </div>
        </div>
    {% endcall %}
{% endmacro %}


{% macro _render_text(text) %}
    {% call _render_item() %}
        <div class="i-form">
            <div class="form-group">
                <div class="form-field static-text-widget">
                    {{- text.description|replace('\n', '<br>'|safe) -}}
                </div>
            </div>
        </div>
        <div class="item-action-buttons toolbar">
            <div class="group">
                <a href="#" data-href="{{ url_for('.edit_text', text) }}"
                   data-title="{% trans %}Edit text item{% endtrans %}"
                   title="{% trans %}Edit text item{% endtrans %}"
                   data-text-id="{{ text.id }}"
                   class="i-button js-survey-item-dialog icon-edit"></a>
                <a data-href="{{ url_for('.delete_text', text) }}"
                   data-method="DELETE"
                   data-title="{% trans %}Delete text{% endtrans %}"
                   title="{% trans %}Delete text{% endtrans %}"
                   data-qtip-style="danger"
                   data-confirm="{% trans %}Are you sure you want to delete this text item?{% endtrans %}"
                   class="i-button icon-remove js-delete-item"></a>
            </div>
        </div>
    {% endcall %}
{% endmacro %}
