<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>

  <!-- Essential Open Graph (Facebook, WhatsApp, etc.) -->
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description }}">
  <meta property="og:image" content="{{ page_card or url_for(request, 'static', path='img/folkugat_card.jpg') }}">

  <!-- Twitter Card (optional but recommended) -->
  <meta name="twitter:title" content="{{ page_title }}">
  <meta name="twitter:description" content="{{ page_description }}">
  <meta name="twitter:image" content="{{ page_card or url_for(request, 'static', path='img/folkugat_card.jpg') }}">

  <title>{{ page_title }}</title>
  <meta name="description" content="{{ page_description }}"/>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer" />

  <!-- Taiwind CSS -->
  <link rel="stylesheet" href="{{ url_for(request, 'static', path='css/main.css') }}" type="text/css" />

  <!-- HTMX -->
  <script src="{{ url_for(request, 'static', path='js/htmx.min.js') }}"></script>

  <!-- CodeMirror -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>

  <script src="{{ url_for(request, 'static', path='js/lilypond.js') }}"></script>
  <link rel="stylesheet" href="{{ url_for(request, 'static', path='css/lilypond.css') }}" type="text/css" />


  <!-- Favicon! -->
  <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for(request, 'static', path='favicon/apple-touch-icon.png') }}">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for(request, 'static', path='favicon/favicon-32x32.png') }}">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for(request, 'static', path='favicon/favicon-16x16.png') }}">
  <link rel="manifest" href="/site.webmanifest">

</head>
<body class="bg-brown text-yellow-50">
  <div id="header">
    {% include "fragments/header.html" %}
  </div>
  <div class="{% if animate %} animate-fade-in-three opacity-0 {% endif %}">
    {% include "fragments/content.html" %}
    {% include "fragments/footer.html" %}
  </div>
</body>
</html>
