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

{% set step_id = step.id or h.tour_random_step_id() %}
{% set is_persisted = step.id %}

{# Every step's controls are submitted under names namespaced by this id #}
{% set ns = "step[" ~ step_id ~ "]" %}
{% set image_field = ns ~ "[image_id]" %}

{% if errors %}
    {% set collapse_step = false %}
{% endif %}

<div class="accordion tour-accordion" id="step-{{ step_id }}">
    <div class="accordion-item">
        <h3 class="accordion-header rounded-2" id="step-header-{{ step_id }}">
            <div class="accordion-header--text">
                <span class="dragger">
                    {% snippet 'snippets/svg/drag.svg' %}
                </span>
               <span class="step-number">{{ step_index or 0 }}</span> {{ _("Step") }}
            </div>

            <button
                class="remove-step btn btn-danger btn-sm"
                data-step-id="{{ step_id }}"
                {% if is_persisted %}
                hx-trigger="click"
                hx-post="{{ h.url_for('tour.delete_step', tour_step_id=step_id) }}"
                {% endif %}
                >
                {{ _("Delete step") }}
            </button>

            <button
                class="accordion-button bg-transparent {% if collapse_step %}collapsed{% endif %}"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapse-{{ step_id }}"
                aria-expanded="true"
                aria-controls="collapse-{{ step_id }}">
            </button>
        </h3>
        <div id="collapse-{{ step_id }}" class="accordion-collapse collapse {% if not collapse_step %}show{% endif %}" aria-labelledby="step-header-{{ step_id }}"
            data-bs-parent="#step-{{ step_id }}">
            <div class="accordion-body">
                <fieldset class="tour-step" id="step_{{ step_id }}" data-step-id="{{ step_id }}">
                    {{ form.hidden("step_ids", value=step_id) }}
                    {{ form.hidden(ns ~ "[id]", value=step.id) }}
                    {{ form.hidden(ns ~ "[index]", value=step.index) }}

                    {{ translated_input(ns ~ "[title]", label=_("Tour title"), value=step.title, error=errors.title, required=true) }}

                    {% call form.input(ns ~ "[element]", label=_("Target element"), value=step.element, error=errors.element, attrs={'required': 1, 'class': 'form-control'}) %}
                        {{ form.info(_('A CSS selector for the page element this step points at and highlights, e.g. ".dataset-list" or "#map". Right-click the element in your browser and "Inspect" to find one — if nothing on the page matches it, the step still shows, just centered and pointing at nothing.')) }}
                    {% endcall %}

                    {{ translated_markdown(ns ~ "[intro]", label=_("Intro"), value=step.intro, error=errors.intro) }}

                    {{ form.select(ns ~ "[position]", label=_('Position'), options=h.tour_get_position_options(), selected=step.position, error=errors.position) }}

                    {% set image_error = errors.image or errors.image_url or errors.image_id %}
                    {% if image_error %}
                        <div class="form-group error">
                            <span class="error-block">{{ image_error if image_error is string else image_error | join(', ') }}</span>
                        </div>
                    {% endif %}

                    {% snippet "scheming/form_snippets/files_upload_widget.html",
                        field={
                            'field_name': image_field,
                            'label': _('Image'),
                            'accept': 'image/*',
                            'form_attrs': {
                                'data-module-disable-media': 0,
                                'data-module-max-files': 1,
                                'data-module-upload-action': 'tour_upload_image',
                                'data-module-upload-link-action': 'tour_upload_link',
                            }
                        },
                        data={image_field: step.image_id}
                    %}

                </fieldset>
            </div>
        </div>
    </div>
</div>

{% set add_next_container = True if add_next_container is undefined else add_next_container %}

{% if add_next_container %}
    <div class="next-tour"></div>
{% endif %}