{% extends '@admin/index.twig' %}

{% block content %}
  <form id="configuration-list" name="configuration-list" method="post" action="#">
    <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfToken }}">
    <input type="hidden" id="pmf-language" name="pmf-language" value="{{ language }}">

    <div
      class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3 border-bottom">
      <h1 class="h2">
        <i aria-hidden="true" class="bi bi-wrench"></i>
        {{ adminHeaderConfiguration }}
      </h1>

      <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
          <button class="btn btn-outline-success" id="save-configuration" type="button">
            <i class="bi bi-save" aria-hidden="true"></i>
            {{ adminConfigurationButtonSave }}
          </button>
        </div>
      </div>
    </div>

    <div id="pmf-configuration-result"></div>

    <div class="row">
      <div class="col-lg-12">
        <div id="pmf-admin-configuration-container">

          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="nav-item">
              <a href="#main" aria-controls="main" role="tab" data-bs-toggle="tab" class="nav-link active">
                <i aria-hidden="true" class="bi bi-house-check"></i>
                {{ 'mainControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#records" aria-controls="records" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-list"></i>
                {{ 'recordsControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#search" aria-controls="search" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-search"></i>
                {{ 'searchControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#security" aria-controls="security" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-exclamation-circle"></i>
                {{ 'securityControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#spam" aria-controls="spam" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-hand-thumbs-down"></i>
                {{ 'spamControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#seo" aria-controls="seo" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-search"></i>
                {{ 'msgSeoCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#layout" aria-controls="seo" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-pencil"></i>
                {{ 'layoutControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#mail" aria-controls="mail" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-inbox"></i>
                {{ 'mailControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#api" aria-controls="ldap" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-gear"></i>
                API
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#upgrade" aria-controls="upgrade" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-arrow-clockwise"></i>
                {{ 'upgradeControlCenter' | translate }}
              </a>
            </li>
            <li role="presentation" class="nav-item">
              <a href="#ldap" aria-controls="ldap" role="tab" data-bs-toggle="tab" class="nav-link">
                <i aria-hidden="true" class="bi bi-database"></i>
                LDAP
              </a>
            </li>
          </ul>

          <div class="tab-content p-2 pt-4 pmf-configuration-panel border-bottom mb-4 shadow">
            <div role="tabpanel" class="tab-pane fade show active" id="main"></div>
            <div role="tabpanel" class="tab-pane fade" id="records"></div>
            <div role="tabpanel" class="tab-pane fade" id="search"></div>
            <div role="tabpanel" class="tab-pane fade" id="security"></div>
            <div role="tabpanel" class="tab-pane fade" id="spam"></div>
            <div role="tabpanel" class="tab-pane fade" id="seo"></div>
            <div role="tabpanel" class="tab-pane fade" id="layout"></div>
            <div role="tabpanel" class="tab-pane fade" id="mail"></div>
            <div role="tabpanel" class="tab-pane fade" id="api"></div>
            <div role="tabpanel" class="tab-pane fade" id="upgrade"></div>
            <div role="tabpanel" class="tab-pane fade" id="ldap"></div>
          </div>
        </div>
      </div>
    </div>

  </form>
{% endblock %}