{{ define "base" }}
<!DOCTYPE html>
<html lang="de" data-theme="dark">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/unpoly@3.9.5/unpoly.min.css">
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.23/dist/full.min.css" rel="stylesheet" type="text/css" />
    <body>

    <nav class="fixed top-0 z-50 w-full p-4">
      <div class="navbar bg-base-300 rounded-box drop-shadow-md">

        {{/* Logo with navigation */}}

        <div class="flex-1">
          <a href="/" tabindex="0" class="btn btn-ghost text-xl">crowsnest</a>
          <ul class="menu menu-horizontal hidden sm:flex">
            <li><a tabindex="0" class="active">Artikel</a></li>
            <li><a tabindex="0">Themen</a></li>
          </ul>
        </div>

        {{/* Search field for normal sized screen */}}

        <div class="hidden sm:flex flex-none pe-4">
            <form role="search" method="post" action="/up/search" up-submit up-autosubmit up-target=".content">
              <label class="input input-bordered input-sm flex items-center gap-2">
                <input name="search" type="search" class="grow" placeholder="Suche" />
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                  class="h-4 w-4 opacity-70">
                  <path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" />
                </svg>
              </label>
            </form>
        </div>

        {{/* Dropdown for small screens */}}

        <div class="dropdown dropdown-end sm:hidden">
          <div tabindex="0" role="button" class="btn btn-ghost">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                class="h-6 w-6 opacity-70">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />
            </svg>
          </div>
          <ul class="menu dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
            <li><a tabindex="0" class="active">Artikel</a></li>
            <li><a tabindex="0">Themen</a></li>
          </ul>
        </div>

      </div>
    </nav>
    
    <div class="container mx-auto px-4 mt-28">
    {{ template "content" . }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/unpoly@3.9.5/unpoly.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    </body>
</html>
{{ end }}
