<!DOCTYPE html>
<html lang="{{request.state.language}}">

<head>
  {% block head %}
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
        content="ie=edge">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet"
        href="/static/gallery.css?v={{version}}">
  <script type="module"
          src="/static/gallery.js?v={{version}}"></script>
  <link rel="icon"
        href="/favicon.ico?v={{version}}"
        type="image/x-icon">
  {% endblock %}
</head>

<body class="{{ is_widget and 'widget' or ''}}">
  <div class="app col-lg-8 mx-auto p-3 py-md-5">
    {% if not is_widget %}
    <header class="app-header pb-3 mb-5 border-bottom">
      <div>{{request.query_params.widget}}</div>
      <div class="link-list">
        <app-link href="/"
                  icon="gear">API Gallery</app-link>
        {% block header %}{% endblock %}
      </div>
      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
        <li class="nav-item dropdown">
          <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
                  id="bd-language"
                  type="button"
                  aria-expanded="false"
                  data-bs-toggle="dropdown"
                  aria-label="{{_('Select language')}} (default)">
            <span class="fi fir fi-gb me-2 language-icon-active icon-header"></span>
            <span class="d-lg-none ms-2"
                  id="bd-language-text">{{_("Select language")}}</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end"
              aria-labelledby="bd-language-text">
            <li>
              <button type="button"
                      class="dropdown-item d-flex align-items-center"
                      data-bs-language-value="en"
                      aria-pressed="false">
                <span class="fi fir fi-gb me-2 language-icon-active"></span>
                {{_("English")}}
              </button>
            </li>
            <li>
              <button type="button"
                      class="dropdown-item d-flex align-items-center"
                      data-bs-language-value="ru"
                      aria-pressed="false">
                <span class="fi fir fi-ru me-2 language-icon-active"></span>
                {{_("Russian")}}
              </button>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
                  id="bd-theme"
                  type="button"
                  aria-expanded="false"
                  data-bs-toggle="dropdown"
                  aria-label="Toggle theme (auto)">
            <span class="bi bi-circle-half me-2 opacity-50 theme-icon-active icon-header"></span>
            <span class="d-lg-none ms-2"
                  id="bd-theme-text">{{_("Toggle theme")}}</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end"
              aria-labelledby="bd-theme-text">
            <li>
              <button type="button"
                      class="dropdown-item d-flex align-items-center"
                      data-bs-theme-value="light"
                      aria-pressed="false">
                <span class="bi bi-sun-fill me-2 opacity-50 theme-icon"></span>
                {{_("Light")}}
              </button>
            </li>
            <li>
              <button type="button"
                      class="dropdown-item d-flex align-items-center"
                      data-bs-theme-value="dark"
                      aria-pressed="false">
                <span class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"></span>
                {{_("Dark")}}
              </button>
            </li>
            <li>
              <button type="button"
                      class="dropdown-item d-flex align-items-center active"
                      data-bs-theme-value="auto"
                      aria-pressed="true">
                <span class="bi bi-circle-half me-2 opacity-50 theme-icon"></span>
                {{_("Auto")}}
              </button>
            </li>
          </ul>
        </li>
      </ul>
    </header>
    {% endif %}
    <main>
      {% block content %}{% endblock %}
    </main>
    {% if not is_widget %}
    <footer class="app-footer pt-5 my-5 text-muted border-top">
      <div class="d-flex justify-content-between">
        <span>Created by shmyga &middot; &copy; 2026</span>
        <span>v{{ version }}</span>
      </div>
    </footer>
    {% endif %}
  </div>
</body>

</html>