{% load django_vite %}
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Metas -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  {%  include "title.html" %}
  <meta name="description" content="The free, open-source and non-profit search engine.">

  <!-- Favicons -->
  <link rel="icon" href="/static/images/favicon.svg" type="image/svg+xml">

  <!-- Fonts import -->
  <link rel="preload" href="/static/fonts/inter/inter.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="/static/fonts/inter/inter.css">
  </noscript>

  <!-- CSS Stylesheets (this is critical CSS) -->
  <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
  <link rel="stylesheet" type="text/css" href="/static/css/theme.css">
  <link rel="stylesheet" type="text/css" href="/static/css/global.css">

  <!-- Phosphor Icons (https://github.com/phosphor-icons/phosphor-home) -->
  <link rel="preload" href="/static/fonts/phosphor/icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="/static/fonts/phosphor/icons.css">
  </noscript>

  <!-- Custom Element Polyfill for Safari -->
  <script src="https://unpkg.com/@ungap/custom-elements" type="module"></script>

  <!-- OpenSearch -->
  <link rel="search" type="application/opensearchdescription+xml" href="/static/assets/opensearch.xml" title="Mwmbl Search">

  <!-- POC temporary use of jQueryUI! -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script src="https://unpkg.com/htmx.org@1.9.6"></script>

  {% vite_hmr_client %}
</head>

<body>
  <mwmbl-app></mwmbl-app>
    <header class="search-menu compact">
      <a href="/">
        <div class="branding">
          <img class="brand-icon" src="/static/images/logo.svg" width="40" height="40" alt="mwmbl logo">
          <span class="brand-title">Mwmbl</span>
        </div>
      </a>
      <form class="search-bar">
        <i class="ph-magnifying-glass-bold"></i>
        <input
          type='search'
          name='q'
          class='search-bar-input'
          placeholder='Search on Mwmbl...'
          title='Use "CTRL+K" or "/" to focus.'
          autocomplete='off'
          hx-get="/app/home/"
          hx-trigger="keyup changed delay:100ms"
          hx-target=".results"
        >
      </form>
      <div is="mwmbl-save"></div>
      {%  if user.is_authenticated %}
        <p class="login-info">Logged in as {{ user.username }}</p>
        <a class="button" href="/accounts/logout/">Log out</a>
      {% else %}
        <a class="button" href="/accounts/login/">Login</a>
        <a class="button" href="/accounts/signup/">Sign up</a>
      {% endif %}
    </header>
    <main>
      <mwmbl-results>
        <ul class='results'>
          {%  include "home.html" %}
        </ul>
      </mwmbl-results>
    </main>
    <div is="mwmbl-add-result"></div>
  <div class="footer">
    <ul class="footer-list">
      {% for link in footer_links %}
        <li class="footer-item">
          <a href="{{ link.href }}" class="footer-link" target="__blank">
            <i class="{{ link.icon }}"></i>
            <span>{{ link.name }}</span>
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% vite_asset 'index.js' %}
{% vite_legacy_polyfills %}
{% vite_legacy_asset 'index-legacy.js' %}
</body>

</html>