<!doctype html>
<html lang="{{ app.request.locale }}" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
      {% block title %}
      {% trans from "meta" %}
      Administration
      {% endtrans %}
      {% endblock %}
    </title>
    {{ encore_entry_link_tags("serenity", null, "admin", { nonce: csp_nonce("style") }) }}
    {{ encore_entry_script_tags("serenity", null, "admin", { nonce: csp_nonce("script") }) }}
    <meta name="turbo-cache-control" content="no-preview">
    <meta name="turbo-prefetch" content="false">
    <meta name="x-window-id" content="{{ app.request.headers.get('x-window-id') }}">
    <meta name="x-mer" content="{{ app.request.headers.get('x-mer') }}">
    {% block meta %}

    {% endblock %}
  </head>
  <body class="flex h-full min-h-[100dvh] flex-col">
    <header>
      <!-- Navbar -->
      <nav
        class="mt-0 flex flex-row flex-nowrap items-center justify-between border-b border-gray-200 bg-white px-6 py-4 dark:border-gray-800 dark:bg-gray-800"
        id="desktop-menu">
        <!-- logo -->
        <a class="mr-4 flex w-fit items-center py-2 text-xl" href="{{ path('admin_index') }}">
          {% if config('admin', true) %}
            {% if config('admin', true).logo and config('admin', true).logo.file.name %}
              <twig:SerenityMedia:Image
                class="h-full w-full max-w-64"
                img:class="max-h-28 object-contain"
                lazy="{{ false }}"
                responsive="{{ false }}"
                alt="{{ config('admin',true).title }}"
                path="{{ config('admin',true).logo.file.name }}"
                imageWidth="{{ config('admin',true).logo.file.width }}"
                imageHeight="{{ config('admin',true).logo.file.height }}" />
            {% else %}
              <h2 class="max-h-9 overflow-hidden px-4 text-2xl font-semibold text-gray-200">
                {{ config('admin',true).title }}
              </h2>
            {% endif %}
          {% endif %}
        </a>
        {% block navbar %}
        {% endblock %}
      </nav>
      <!-- End Navbar -->
    </header>
    <main class="flex grow flex-col">
      {% block main %}

      {% endblock %}
    </main>
    <footer class="border-t border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300">
      <div class="mx-auto px-4">
        <div class="-mx-4 flex flex-row flex-wrap">
          <div class="w-full max-w-full flex-shrink px-4 text-center md:w-1/2 md:ltr:text-left md:rtl:text-right">
            <ul class="ltr:pl-0 rtl:pr-0">
              <li class="inline-block ltr:mr-3 rtl:ml-3"><a class="hover:text-indigo-500" href="#">Support</a></li>
              <li class="inline-block ltr:mr-3 rtl:ml-3"><a class="hover:text-indigo-500" href="#">Help Center</a></li>
              <li class="inline-block ltr:mr-3 rtl:ml-3"><a class="hover:text-indigo-500" href="#">Privacy</a></li>
              <li class="inline-block ltr:mr-3 rtl:ml-3">
                <a class="hover:text-indigo-500" href="#">Terms of Service</a>
              </li>
            </ul>
          </div>
          <div class="w-full max-w-full flex-shrink px-4 text-center md:w-1/2 md:ltr:text-right md:rtl:text-left">
            <p class="mt-3 mb-0 md:mt-0">
              <a href="../index.html" class="hover:text-indigo-500">Serenity</a> | All right reserved
            </p>
          </div>
        </div>
      </div>
    </footer>
    <div
      id="alert"
      {{ turbo_stream_listen('/notifier') }}
      class="fixed top-5 right-5 z-50 flex w-full max-w-xs flex-col"></div>
    {% block javascripts %}
    {% endblock %}
  </body>
</html>
