{% trans_default_domain 'home' %}

<div {{ attributes.defaults(stimulus_controller('integration')) }}>
  <div id="modal_integration" tabindex="-1" aria-hidden="true"
       class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-2xl max-h-full">
      <!-- Modal content -->
      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <!-- Modal header -->
        <div class="flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600">
          <span class="material-symbols-outlined mr-2 dark:text-white">settings</span>
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
            {{ 'Integration.title'|trans }}
          </h3>
          <button type="button" data-modal-hide="modal_integration"
                  class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
            </svg>
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        <!-- Modal body -->
        <div class="p-6 space-y-6 overflow-auto max-h-[60vh]">

          <div class="flex justify-evenly w-full">
            <img class="w-[200px] mb-6" src="{{ asset('assets/img/umay_banniere_couleur.png') }}" alt="logo_umay">
          </div>

          <div class="flex w-full">
            <ul id="integrations_tab" data-tabs-toggle="#integrations_tab_content" role="tablist"
                class="flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
              <li class="me-2">
                <button
                  class="inline-flex items-center px-4 py-3 text-white hover:text-gray-200 bg-blue-700 rounded-lg w-full dark:bg-blue-600 dark:text-white"
                  data-tabs-target="#info_integration" type="button" role="tab"
                  aria-controls="info_integration" aria-selected="false">
                  <span class="material-symbols-outlined mr-2 svg">info</span>
                  {{ 'Integration.title'|trans }}
                </button>
              </li>
              <li class="me-2">
                <button
                  class="inline-flex items-center px-4 py-3 text-white hover:text-gray-200 bg-blue-700 rounded-lg w-full dark:bg-blue-600 dark:text-white"
                  data-tabs-target="#add_integration" type="button" role="tab"
                  aria-controls="add_integration" aria-selected="false">
                  <span class="material-symbols-outlined mr-2 svg">add_circle</span>
                  {{ 'Integration.add_integration'|trans }}
                </button>
              </li>

              {% if integrations is not empty %}
                {% for integration in integrations %}
                  <li class="me-2">
                    <button
                      class="inline-flex items-center px-4 py-3 text-white hover:text-gray-200 bg-blue-700 rounded-lg w-full dark:bg-blue-600 dark:text-white"
                      data-tabs-target="#integration_{{ integration.id }}" type="button" role="tab"
                      aria-controls="integration_{{ integration.id }}" aria-selected="false">
                      <svg class="svg w-4 h-4 me-2 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                           fill="currentColor" viewBox="0 0 20 20">
                        <path
                          d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"></path>
                      </svg>
                      {{ integration.name }}
                    </button>
                  </li>
                {% endfor %}
              {% else %}
                <div class="flex justify-center items-center w-full">
                  <div class="text-center max-w-md">
                    <span class="material-symbols-outlined text-gray-500 dark:text-gray-400">info</span>
                    <h3
                      class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Integration.no_integration'|trans }}</h3>
                    <p
                      class="text-sm text-gray-500 dark:text-gray-400">{{ 'Integration.no_integration_info'|trans }}</p>
                  </div>
                </div>
              {% endif %}
            </ul>


            <div id="integrations_tab_content" class="w-full">
              <div id="info_integration" role="tabpanel" aria-labelledby="info_integration-tab"
                   class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Integration.title'|trans }}</h3>
                <div class="w-full flex flex-col">
                  <div class="w-full">
                    <p
                      class="text-sm text-gray-500 dark:text-gray-400 mb-2">{{ 'Integration.info_integration'|trans }}</p>
                    <ul class="list-disc ml-4 text-sm text-gray-500 dark:text-gray-400">
                      <li>{{ 'Integration.info_integration_li1'|trans }}</li>
                      <li>{{ 'Integration.info_integration_li2'|trans }}</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div id="add_integration" role="tabpanel" aria-labelledby="add_integration-tab"
                   class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Integration.add_integration'|trans }}</h3>
                <p class="mb-2 text-center">{{ 'Integration.add_integration_info'|trans }}</p>
                <div class="w-full flex flex-col">
                  <turbo-frame id="view_integration" src="{{ path('integration_add') }}">
                  </turbo-frame>
                </div>
              </div>

              {% for integration in integrations %}
              <div id="integration_{{ integration.id }}" role="tabpanel"
                   aria-labelledby="integration_{{ integration.id }}-tab"
                   class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ integration.name }}</h3>
                <div class="w-full flex flex-col">
                  <turbo-frame id="view_integration" src="{{ path('integration_show', {'id': integration.id}) }}">
                  </turbo-frame>
                </div>
              </div>
            </div>
            {% endfor %}

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