<!DOCTYPE html>
<html>
  <head>
    <title>Plottservice</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <%= render "layouts/flash" %>
    <header class="container mx-auto px-4 py-6 flex items-center justify-between border-b-2 border-gray-300">
      <a href="/" class="font-bold text-black text-4xl">Plottservice Fachbereich AB</a>
      <nav>
        <ul class="flex items-color justify-center font-semibold">
          <li class="relative">
            <button class="px-4 py-2 hover:text-hsrm-red cursor-default">
              Products
            </button>
          </li>
          <li class="relative">
            <button class="px-4 py-2 hover:text-hsrm-red cursor-default">
              Products
            </button>
          </li>
        </ul>
      </nav>
      <nav>
        <ul>
          <li>
            <a href="#" class="px-3 py-2 font-semibold bg-hsrm-red hover:bg-hsrm-red-light drop-shadow-lg transition-colors duration-100 bg-opacity-100 flex items-center group text-white">
              <span class="mr-2">Anmelden</span>
              <svg class="stroke-current" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" style="stroke: rgb(255, 255, 255);">
                <g fill-rule="evenodd">
                  <path class="opacity-0 group-hover:opacity-100 transition ease-in-out duration-200" d="M0 5h7"></path>
                  <path class="HoverArrow__tipPath" d="M1 1l4 4-4 4"></path>
                </g>
              </svg>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <main class="container mx-auto mt-4 px-4">
      <%= yield %>
    </main>
    <footer class="container mx-auto px-4 mt-4">
      <p></p>
    </footer>
  </body>
</html>
