{% extends '@Modules/inpostizi/views/templates/admin/layout/basic-layout.html.twig' %}

{% form_theme form '@Modules/inpostizi/views/templates/admin/config/form_theme.html.twig' %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-xs-12 col-12">

      <div class="card">
        {{ form_start(form) }}
        <h3 class="card-header">
          <i class="material-icons">palette</i> {{ layoutTitle }}
        </h3>

        {{ form_errors(form) }}

        {% set activeName = null %}
        {% set widgetForms = {} %}

        {% for name, child in form %}
          {% if child.vars.binding_place is defined %}
            {% set widgetForms = widgetForms|merge({(name): child}) %}
            {% if not child.vars.valid and activeName is same as (null) %}
              {% set activeName = name %}
            {% endif %}
          {% endif %}
        {% endfor %}

        {% if activeName is same as(null) %}
          {% set activeName = widgetForms|keys|first %}
        {% endif %}

        <ul class="nav nav-pills border-top-0 bg-light" id="gui_tabs" role="tablist">
          {% for name, widgetForm in widgetForms %}
            <li class="nav-item" role="presentation">
              <a
                class="nav-link
                {% if activeName is same as(name) %}active{% endif %}
                {% if widgetForm.vars.valid is same as(false) %}text-danger{% endif %}
                "
                id="{{ widgetForm.vars.id }}-tab"
                data-toggle="tab"
                data-target="#{{ widgetForm.vars.id }}"
                href="#{{ widgetForm.vars.id }}"
                role="tab"
              >
                {{ widgetForm.vars.label }}

                {% if not widgetForm.vars.valid %}
                  <span
                      class="material-icons"
                      data-toggle="popover"
                      data-trigger="hover"
                      data-placement="top"
                      data-content="{{ 'This widget is not configured correctly, correct the values in the form.'|legacy_trans }}"
                  >error</span>
                {% endif %}
              </a>
            </li>
          {% endfor %}
        </ul>

        <div class="tab-content p-0" id="gui_tabs_content">
          {% for name, widgetForm in widgetForms %}
            <div
              class="
                tab-pane fade
                {% if activeName is same as(name) %}show active in{% endif %}
              "
              id="{{ widgetForm.vars.id }}"
              role="tabpanel"
            >
              {{ form_row(widgetForm) }}
            </div>
          {% endfor %}
        </div>

        {{ form_rest(form) }}

        <div class="card-footer clearfix">
          <a href="{{ path('admin_module_manage') }}" class="btn btn-outline-secondary">{{ 'Back'|trans }}</a>

          <button class="btn btn-primary float-right">{{ 'Save'|trans({}, 'Admin.Actions') }}</button>
        </div>
        {{ form_end(form) }}
      </div>

    </div>
  </div>
{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('css/admin/gui.css', 'InPostIzi') }}" />
{% endblock %}

{% block javascripts %}
  {{ parent() }}

  {% if merchant_client_id %}
    <script type="application/javascript">
      window.inpostizi_merchant_client_id = '{{ merchant_client_id|e('js') }}';
    </script>
  {% endif %}

  <script type="text/javascript" src="{{ widget_js_uri }}"></script>
  <script type="text/javascript" src="{{ asset('js/admin/gui.js', 'InPostIzi') }}"></script>
{% endblock %}