{% extends resolvePath(parentTemplate) %}
{% import resolvePath("/lynx/utils")as utils %}

{% macro edit_fieldComponent(field, key) %}

  {% if field.uiSettings and field.uiSettings.editorClasses %}
    <div id="field-{{req.params.entityName}}-{{key}}" class="{{ field.uiSettings.editorClasses }}">
  {% elif field.uiSettings and field.uiSettings.editorFullwidth %}
    <div id="field-{{req.params.entityName}}-{{key}}" class="col-12">
  {% else %}
    <div id="field-{{req.params.entityName}}-{{key}}" class="col-12 col-md-6">
  {% endif %}
  {% include resolvePath(configuration[field.type]) %}
  </div>
{% endmacro %}

{% block additional_styles %}
  <link href="{{route('/adminUI/fontawesome/css/all.css')}}" rel="stylesheet">
  <link href="{{ route('/adminUI/assets/css/admin.css') }}" rel="stylesheet">

  {% for type in usedTypes %}
    {% include resolvePath(configuration[type] + '-css') ignore missing %}
  {% endfor %}
{% endblock %}

{% block additional_scripts %}
  {% for type in usedTypes %}
    {% include resolvePath(configuration[type] + '-js') ignore missing %}
  {% endfor %}
{% endblock %}

{% block body %}
<form method="POST" action="{{route('adminUI.save', {entityName: req.params.entityName, id: req.params.id, defaultValues: req.query.defaultValues } )}}" enctype="multipart/form-data">
<div class="row">
<div class="col-12 {{ 'col-lg-9' if hasRightColumn else '' }} mb-4">
  <div class="card">
    <div class="card-body">

      {% if backButtonTemplate %}
        {% include resolvePath(backButtonTemplate) %}
      {% else %}
      <div class="lead entity-title entity-title-{{req.params.entityName}}">
        <a class="btn btn-secondary btn-back btn-back-{{req.params.entityName}}" href="{{ route('adminUI.list', {entityName: req.params.entityName}) }}">
          <i class="fas fa-chevron-left"></i>
          {{ 'admin-ui.back' | tr }}
        </a>
      </div>
      {% endif %}

      {{ utils.alert(flash) }}

      <div class="container-fluid mt-5">

        <div class="row entity-title">
          {{ metadata.name | tr }}
        </div>
        
          <input type="hidden" name="__admin_ui_action" id="__admin_ui_action"/>

          <!-- if entity is divided in tabs -->
          {% if tabs %}
            {% set tabsId  = AUIgenerateId() %}
            {% if not tabsAsSections %}
              <ul class="nav nav-tabs">
                {% for tab in tabs %}
                  <li class="nav-item nav-item-{{tab.key}}">
                    <a class="nav-link {{ 'active' if defaultTab == tab.key else '' }}" data-toggle="tab" href="#tab_{{tabsId}}_{{loop.index}}" onclick="sendTabChangedEvent('{{tab.key}}')">{{ tab.label | tr }}</a>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
            {% if tabsAsSections %}
              {% for tab in tabs %}
                {% set counter = 0 %}
                {% for key, field in fields %}
                    {% if field.uiSettings and field.uiSettings.tab == tab.key and not field.hide  and not field.uiSettings.onRightColumn %}
                        {% set counter = counter + 1 %}
                    {% endif %}
                {% endfor %}
                {% if counter > 0 %}
                  <div class="section section-{{tab.key}}">
                    <div class="section-title">
                        {{ tab.label | tr }}
                    </div>
                    <div class="row section-body">
                      {% for key, field in fields %}
                        {% if field.uiSettings and field.uiSettings.tab == tab.key and not field.hide and not field.uiSettings.onRightColumn %}
                        {{ edit_fieldComponent(field, key) }}
                        {% endif %}
                      {% endfor %}
                    </div>
                  </div>
                {% endif %}
              {% endfor %}
            {% else %}
              <div class="tab-content">
                {% for tab in tabs %}
                  <div id="tab_{{tabsId}}_{{loop.index}}" class="tab-pane tab-pane-{{tab.key}} fade my-5 {{ 'show active' if defaultTab == tab.key else '' }}">
                    <div class="row">
                      {% for key, field in fields %}
                        {% if field.uiSettings and field.uiSettings.tab == tab.key and not field.hide and not field.uiSettings.onRightColumn %}
                        {{ edit_fieldComponent(field, key) }}
                        {% endif %}
                      {% endfor %}
                    </div>
                  </div>
                {% endfor %}
              </div>
            {% endif %}
            <script>
              function sendTabChangedEvent(value) {
                const event = new CustomEvent('AdminUI.TAB_CHANGED', { detail: value });
                window.dispatchEvent(event)
              }

            </script>
          {% else %}
            <!-- if entity is NOT divided in tabs -->
            <div class="row admin-ui-right-column">
              {% for key, field in fields %}
                {% if (not field.hide and not (field.uiSettings and field.uiSettings.onRightColumn))  %}
                  {{ edit_fieldComponent(field, key) }}
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          {% if not hasRightColumn %}
            {% if AUIcanWrite(req, req.params.entityName) %}
                <div class="col-3 mt-4">
                  <button class="btn btn-primary btn-save btn-save-{{req.params.entityName}}" type="submit">
                    <i class="fas fa-save"></i>
                    {{'admin-ui.save' | tr }}
                  </button>
                </div>
              {% endif %}
          {% endif %}

      </div>
    </div>
  </div>
    </div>
  {% if hasRightColumn %}
    <div class="col-12 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="row">
          {% for key, field in fields %}
            {% if not field.hide and field.uiSettings.onRightColumn %}
              {{ edit_fieldComponent(field, key) }}
            {% endif %}
          {% endfor %}
            {% if AUIcanWrite(req, req.params.entityName) %}
              <div class="col-12 mt-4">
                <button class="btn btn-primary btn-save btn-save-{{req.params.entityName}} w-100" type="submit">
                  <i class="fas fa-save"></i>
                  {{'admin-ui.save' | tr }}
                </button>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endif %}

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