<!DOCTYPE html>
<html
  lang="en"
  class="uk-theme-blue uk-radii-md uk-shadows-md uk-font-sm">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% if redirect %}
    <meta http-equiv="refresh" content="0; url={{ redirect }}" />
    {% endif %}
    <title>{% block title %}{{ title }}{% endblock %} - ayb</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet" crossorigin="anonymous">
    <style>
      :root {
          font-family: "Geist";
          font-optical-sizing: auto;
          font-style: normal;
          --color-overlay: rgba(255, 255, 255, 0.7);
      }

      .bg-overlay {
          background: var(--color-overlay);
      }
    </style>

    <link
      rel="stylesheet"
      href="https://unpkg.com/franken-ui@2.0.0/dist/css/core.min.css"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/franken-ui@2.0.0/dist/css/utilities.min.css"
      crossorigin="anonymous"
    />
    <script
      src="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/js/core.iife.js"
      type="module"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/franken-ui@2.0.0-internal.42/dist/js/icon.iife.js"
      type="module"
      crossorigin="anonymous"
    ></script>
    <!-- TODO(marcua): Can we only include it where necessary, like on the database page? -->
    <script
      src="https://unpkg.com/htmx.org@2.0.4"
      integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/htmx-ext-response-targets@2.0.3/dist/response-targets.min.js"
      crossorigin="anonymous"
    ></script>
</head>
<body class="bg-background text-foreground" hx-ext="response-targets">
    {% block content %}{% endblock %}
</body>
</html>
