{% import 'macros/form.html' as form %}
{% from 'tour/snippets/translated_field.html' import translated_input %}

{% set collapse_step = h.tour_collapse_steps() %}

<form action="{{ form_action }}" method="POST" enctype="multipart/form-data">
    {{ h.csrf_input() }}

    {% set error_rows = h.tour_flatten_errors(errors) %}
    {% if error_rows %}
        <div class="error-explanation alert alert-danger">
            <p>{{ _("The form contains invalid entries:") }}</p>
            <ul>
                {% for row in error_rows %}
                    <li data-field-label="{{ row.label }}">{{ row.label }}: {{ row.message }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

    {{ translated_input("title", label=_("Tour title"), value=data.title, error=errors.title, required=true) }}

    {% call form.select("endpoint", label=_("Show on"), selected=data.endpoint or "", error=errors.endpoint, options=h.tour_get_page_options(), attrs={'class': 'form-control', 'data-module': 'autocomplete'}) %}
        {{ form.info(_('Which page shows this tour. "Everywhere" adds it to every page; a parametrised route (e.g. dataset.read) covers every page of that type.', classes=['info-help-tight'])) }}
    {% endcall %}

    {% call form.checkbox("auto_start", label=_("Start automatically"), value="true", checked=data.auto_start) %}
        {{ form.info(_('Open this tour the first time a visitor lands on a matching page. They can replay it from the floating button afterwards.', classes=['info-help-tight'])) }}
    {% endcall %}

    {% if not is_create %}
        {% call form.select("state", label=_("State"), selected=data.state, error=errors.state, options=[
            {"value": "active", "text": _("Active")},
            {"value": "inactive", "text": _("Inactive")},
        ]) %}
            {{ form.info(_("Inactive tours are hidden from visitors and via API.")) }}
        {% endcall %}
    {% endif %}

    <div class="form-actions js-form-wrapper form-wrapper mb-3">
        <p class="mb-2 mb-sm-0 me-auto d-flex align-items-center"><b>{{ _("Tour steps:") }}</b></p>

        <button class="btn btn-sm btn-primary" type="submit">{{ _("Create tour") if is_create else _("Update tour") }}</button>
        <button class="btn btn-sm btn-outline-secondary" type="submit"
            formaction="{{ h.url_for('tour.preview') }}" formtarget="_blank" formnovalidate>
            <i class="fa fa-play"></i>
            {{ _("Preview") }}
        </button>
        <button class="btn btn-sm btn-outline-secondary btn-collapse-steps" {% if collapse_step %}collapsed=1{% endif %} type="button">
            {{ _("Expand all steps") if collapse_step else _("Collapse all steps") }}
        </button>
        <button class="add-step btn btn-sm btn-outline-secondary" hx-trigger="click" hx-post="{{ h.url_for('tour.add_step') }}" type="button"
            hx-vals='js:{step_index: document.querySelectorAll(".tour-steps__steps .tour-accordion").length + 1}'
            hx-swap="outerHTML" hx-target=".next-tour">
            <i class="fa fa-plus"></i>
            {{ _("Add step") }}
        </button>
    </div>

    <div class="tour-steps" data-module="tour-steps">
        <div class="tour-steps__steps">

            {% for step in data.steps %}
                {% set step_errors = errors.steps | default({}) %}
                {% snippet 'tour/snippets/tour_step.html', step=step, step_index=loop.index, errors=step_errors[loop.index - 1] | default({}), add_next_container=False, collapse_step=collapse_step %}
            {% else %}
                {% snippet 'tour/snippets/tour_step.html', step={}, errors={} %}
            {% endfor %}
            <div class="next-tour"></div>
        </div>
    </div>
</form>