{% extends 'admin/base_site.html' %}
{% load i18n %}


{% block content %}
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body p-5">
          <div class="d-flex">
            <h3 class="h4 me-auto">{{ subtitle|title }}</h3>
            <p>{% trans "Step" %} {{ wizard.steps.step1 }} {% trans "of" %} {{ wizard.steps.count }}</p>
          </div>
          <p>{{ description }}</p>
          <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ wizard.form.media }}
            {{ wizard.management_form }}
            {% if wizard.form.forms %}
                {{ wizard.form.management_form }}
                {% for form in wizard.form.forms %}
                    {% include 'admin/simpel_shop/checkout_wizzard_form.html' with form=form %}
                {% endfor %}
            {% else %}
              {% include 'admin/simpel_shop/checkout_wizzard_form.html' with form=form %}
            {% endif %}
            {% if wizard.steps.prev %}
              <button name="wizard_goto_step" class="btn btn-secondary" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" as first_label %}{{ first_label|title }}</button>
              <button name="wizard_goto_step" class="btn btn-secondary" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" as prev_label  %}{{ prev_label|title }}</button>
            {% endif %}
              <input type="submit" name="submit" class="btn btn-primary" value="{% trans "submit" as submit_label %}{{ submit_label|title }}" />
          </form>
          </div>
      </div>
    </div>
  </div>
  <script>
    window.addEventListener("DOMContentLoaded", (e) => {
      $('select').on('select2:select', function (e) {
          $(this).closest('select').get(0).dispatchEvent(new Event('change'));
      });
    });
  </script>
{% endblock %}
