<!doctype html>
<html data-bs-theme="light" lang="en">

{% import 'macros.j2' as macros %}



<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="description" content="freetar is an open source alternative frontend to ultimate-guitar.com. Search for your chords/tabs hosted on Ultimate Guitar. View them in a simple design. You can save them for later in your favorites without having an account." />
  <meta name="keywords" content="freetar guitar chords tabs ultimate-guitar" />
  {{ macros.nodinex_on_favs() }}

  <meta property="og:title" content=freetar - guitar chords from Ultimate Guitar>
  <meta property="og:site_name" content=freetar>
  <meta property="og:url" content=https://freetar.de>
  <meta property="og:description" content=freetar is an alternative frontend for ultimate-guitar.com>
  <meta property="og:type" content=website>
  <meta property="og:image" content=https://freetar.de/static/guitar.png>


  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <title>{{ title or "Freetar - guitar chords from Ultimate Guitar" }}</title>
  <link rel="icon" type="image/png" href="/static/guitar.png" />
  <script>
    let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (JSON.parse(localStorage.getItem("dark_mode")) || isDarkMode)
      document.documentElement.setAttribute('data-bs-theme', 'dark')
  </script>
</head>

<body>

  <nav class="mb-2 navbar navbar-expand-lg bg-body-tertiary d-print-none">
    <div class="container d-flex" style="flex-wrap: nowrap;">
      <a class="navbar-brand" href="/">Freetar</a>
      <form class="d-flex w-50" method="GET" action="/search">
          {% if search_term %}
            <input required class="form-control me-2" name="search_term" type="search" value="{{ search_term }}" aria-label="Search">
          {% else %}
            <input required class="form-control me-2" name="search_term" type="search" placeholder="Search for chords" aria-label="Search">
          {% endif %}
        <button class="btn btn-outline-success d-none d-md-block" type="submit">🔎</button>
      </form>
      <ul class="navbar-nav ms-2" style="flex-direction: row;">
        <li class="nav-item">
          <a class="nav-link" href="/favs">
            <span class="d-none d-md-inline">Favorites</span>
            <span class="d-inline d-md-none">Favs</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">
            <span class="d-none d-md-inline">About</span>
          </a>
        </li>
        <li class="nav-item ms-4">
          <a class="nav-link">
            <span role="button" title="enable/disable dark mode" id="dark_mode">
              🌓︎
            </span></a>
        </li>
      </ul>
    </div>
  </nav>


  <div class="container">
      <div class="row">
          {% block content %}
          {% endblock %}
      </div>
  </div>

  <script src="/static/custom.js"></script>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

    -->
</body>

</html>
