<!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") }) }}
    {% block stylesheets %}

    {% endblock %}
    {{ encore_entry_script_tags("serenity", null, "admin", { nonce: csp_nonce("script") }) }}
    <meta name="turbo-cache-control" content="no-cache">
    <meta name="turbo-prefetch" content="false">
    <meta name="turbo-refresh-scroll" content="preserve">
    <meta name="turbo-refresh-method" content="morph">
    <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="font-sans text-base font-normal text-gray-600 dark:bg-gray-900 dark:text-gray-200">
    <div x-data="{ open: false }" class="wrapper dark:bg-opacity-40 overflow-x-hidden bg-gray-100 dark:bg-gray-900">
      <twig:SerenityAdmin:Menu:Sidebar />
      <div
        x-bind:aria-expanded="open"
        :class="{ 'ms-64': open, '-me-64': open, 'md:ms-0': open, 'md:mr-0': open, 'ms-0': !open, 'me-0': !open, 'md:ms-64': !open }"
        class="ms-0 me-0 flex min-h-screen flex-col transition-all duration-500 ease-in-out md:ms-64"
        aria-expanded="false">
        <twig:SerenityAdmin:Menu:Navbar />
        <main class="-mt-2 pt-20">
          <div class="mx-auto py-2 sm:px-2">
            <div class="mt-3 w-full max-w-full flex-shrink px-4">
              <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">
                  {% block h2 -%}
                  {%- endblock %}
                </h2>
                <twig:SerenityAdmin:Breadcrumb />
              </div>
              {% block main %}
              {% endblock %}
            </div>
          </div>
        </main>
      </div>
    </div>
    <div id="serenity_modal">
      {% block modal -%}
      {%- endblock %}
    </div>
    <div
      id="serenity_settings"
      data-turbo-cache="false"
      x-data="{ open: false }"
      data-controller="settings"
      data-settings-path-value="{{ app.request.pathInfo }}">
      {% block settings %}
      {% endblock %}
    </div>
    <div
      id="alert"

      data-live-ignore
      {{ turbo_stream_listen('/notifier') }}
      class="fixed top-5 right-5 z-50 flex w-full max-w-xs flex-col"
      data-turbo-cache="false">
      {% for level, messages in app.flashes() %}
        {% for message in messages %}
          <twig:SerenityCore:Notification
            message="{{ message }}"
            level="{{ level }}"
            class="animate-toast flex w-full max-w-xs items-center rounded-lg bg-gray-800 p-4 text-gray-400 shadow dark:bg-gray-950 dark:text-gray-400"
            wrapper:class="inline-flex items-center justify-center flex-shrink-0 text-{{ level }} rounded-lg icon-{{ level }}"
            message:class="ml-3 text-sm font-normal"
            close:class="hover:text-dark -mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 cursor-pointer p-1.5 text-white">
          </twig:SerenityCore:Notification>
        {% endfor %}
      {% endfor %}
    </div>
    {% block javascripts -%}
    {%- endblock %}
  </body>
</html>
