<!DOCTYPE html>
<html lang="{{ locale }}">

  <head>
    <title>{{ _("YunoHost app store") }} | {% block title %}{% endblock %} </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="{{ url_for('static', filename='tailwindcss.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome.min.css') }}">
    <style type="text/tailwindcss">
    @layer utilities {
      .btn {
          @apply text-sm font-medium rounded-md px-4 py-2 transition;
      }
      .btn-sm {
          @apply text-xs font-medium rounded-md px-2 py-2 transition;
      }
      .btn-success {
          @apply text-white bg-green-500 hover:bg-green-700;
      }
      .btn-primary {
          @apply text-white bg-blue-500 hover:bg-blue-700;
      }
      .btn-link {
          @apply bg-gray-100 hover:bg-gray-200;
      }
      .btn-primary-outline {
          @apply border text-blue-600 border-blue-500 hover:text-blue-400;
      }
      .from-markdown {
          @apply my-4;
      }
      .from-markdown p {
          @apply mb-2;
      }
      .from-markdown h3 {
          @apply text-xl mb-1 font-semibold;
      }
      .from-markdown ul {
          padding: revert;
          list-style: disc;
      }
      .from-markdown a {
          @apply text-blue-600;
      }
    }
    </style>
  </head>

  <body>
        <header class="pb-2 shadow-sm">
          <div
            class="flex h-12 items-center gap-8 pt-2 px-4 sm:px-6 lg:px-8"
          >
            <a class="block text-teal-600" href="/">
              <span class="sr-only">{{ _("Home") }}</span>
              <img alt="YunoHost Logo" src="{{ url_for('static', filename='ynh_logo_roundcorner.png') }}" style="height: 3em;">
            </a>

            <div class="flex flex-1 items-center justify-end md:justify-between">
              <nav class="hidden md:block">
                <ul class="flex items-center gap-6 text-sm">
                  <li>
                    <a class="text-gray-800 font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_catalog') }}">
                        {{ _("Catalog") }} 
                    </a>
                  </li>

                  <li>
                    <a class="text-gray-800 font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_wishlist') }}">
                        {{ _("Wishlist") }} 
                    </a>
                  </li>
                </ul>
              </nav>

              <div class="flex items-center gap-4">
                <div class="hidden md:flex sm:gap-4">
                  <a
                    class="btn btn-primary-outline inline-block"
                    href="https://yunohost.org/docs/"
                  >
                    <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
                    {{ _("YunoHost documentation") }} 
                  </a>
                  {% if not user %}
                  <a
                    class="btn btn-primary inline-block"
                    href="{{ url_for('login_using_discourse') }}"
                    role="button"
                  >
                     {{ _("Login using YunoHost's forum") }} 
                  </a>
                  {% else %}
                  <div class="relative">
                      <button
                        id="toggleUserMenu"
                        type="button"
                        class="group flex shrink-0 items-center rounded-md transition"
                      >
                          <img
                            alt="Avatar"
                            src="{{ user['avatar_url'] }}"
                            class="h-10 w-10 rounded-full object-cover"
                          >
                          <p class="ms-2 text-left text-xs inline-block">
                            <strong class="block font-medium">{{ user['username'] }}</strong>
                          </p>
                          <i class="fa fa-caret-down fa-fw" aria-hidden="true"></i>
                      </button>
                      <div
                        id="userMenu"
                        class="hidden absolute end-0 z-10 mt-2 w-56 rounded-md border border-gray-100 bg-white shadow-lg"
                        role="menu"
                      >
                        <div class="p-2">
                          <a
                            href="/logout"
                            class="block rounded-md px-4 py-2 text-sm text-gray-800 hover:bg-gray-50 hover:text-gray-700"
                            role="menuitem"
                          >
                            {{ _("Logout") }} 
                          </a>
                        </div>
                     </div>
                  </div>
                  {% endif %}
                </div>

                <div class="relative">
                    <button
                      id="toggleMenu"
                      class="block rounded bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden"
                    >
                      <span class="sr-only">{{ _("Toggle menu") }}</span>
                      <i class="fa fa-bars h-5 w-5" aria-hidden="true"></i>
                    </button>
                    <div
                      id="menu"
                      class="hidden absolute end-0 z-10 mt-2 p-2 w-64 rounded-md border border-gray-100 text-gray-800 bg-white shadow-lg"
                      role="menu"
                    >
                      <div class="px-2 py-0.5">
                        <a
                          href="/"
                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
                          role="menuitem"
                        >
                          {{ _("Home") }}
                        </a>
                      </div>
                      <div class="px-2 py-0.5">
                        <a
                          href="{{ url_for('browse_catalog') }}"
                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
                          role="menuitem"
                        >
                          {{ _("Catalog") }} 
                        </a>
                      </div>
                      <div class="px-2 py-0.5">
                        <a
                          href="{{ url_for('browse_wishlist') }}"
                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
                          role="menuitem"
                        >
                          {{ _("Wishlist") }} 
                        </a>
                      </div>
                      <div class="px-2 py-1">
                        <a
                          href="https://yunohost.org/docs/"
                          class="block btn btn-primary-outline text-xs text-gray-500"
                          role="menuitem"
                        >
                            <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
                            {{ _("YunoHost documentation") }} 
                        </a>
                      </div>
                      {% if not user %}
                      <div class="px-2 py-1">
                        <a
                          href="{{ url_for('login_using_discourse') }}"
                          class="block btn btn-primary rounded-md text-xs text-gray-500"
                          role="button"
                        >
                          {{ _("Login using YunoHost's forum") }} 
                        </a>
                      </div>
                      {% else %}
                      <hr class="mt-3" />
                      <div class="px-2 py-0.5">
                        <span
                          class="block rounded-md px-4 py-2 text-sm text-gray-500"
                          role="menuitem"
                        >
                          <img
                            alt="Avatar"
                            src="{{ user['avatar_url'] }}"
                            class="h-10 w-10 rounded-full object-cover inline-block"
                          >
                          <p class="ms-2 inline-block text-left">
                            <strong class="font-medium">{{ user['username'] }}</strong>
                          </p>
                        </span>
                      </div>
                      <div class="px-2 py-0.5">
                        <a
                          href="/logout"
                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
                          role="menuitem"
                        >
                          {{ _("Logout") }} 
                        </a>
                      </div>
                      {% endif %}
                   </div>
                </div>
              </div>
            </div>
          </div>
        </header>

        <main>
        {% block main %}
        {% endblock %}
        </main>

        <footer class="h-5 mt-5"></footer>
  </body>

  <script type="text/javascript">
      {% if user %}
      document.getElementById('toggleUserMenu').addEventListener('click', () => {
        document.getElementById('userMenu').classList.toggle("hidden");
      });
      {% endif %}
      document.getElementById('toggleMenu').addEventListener('click', () => {
        document.getElementById('menu').classList.toggle("hidden");
      });
  </script>

</html>
