{% use '_layouts/site_nav.html.twig' %}
{% from '_macros/alert.html.twig' import alert_classes, alert_icon %}
{% from '_macros/icon.html.twig' import icon %}
{% from '_macros/lang.html.twig' import lang_attributes %}
{% from '_macros/theme.html.twig' import theme_css %}
<!DOCTYPE html>
<html class="{{ html_classes('no-js', {
        'full-width': app.user.fullWidthDisplayEnabled ?? false,
        'js-poppers-enabled': app.user.poppersEnabled ?? true,
      }) }}"
      {{ lang_attributes(app.request.locale) }}
      prefix="og: http://ogp.me/ns#"
      data-night-mode="{{ app.user.nightMode.value ?? 'auto' }}"
      data-translation-messages-url="{{ path('translation_messages', { locale: app.request.locale }) }}">
  <head>
    <meta charset="UTF-8" />
    <title>
      {%- block full_title -%}
        {%- set title -%}
          {%- block title '' -%}
        {%- endset -%}
        {%- if title is not empty -%}
          {{- title }}
          &mdash;
        {% endif -%}
        {{- site_name() -}}
      {%- endblock full_title -%}
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="generator" content="Postmill {{ app_version() }}">
    <meta name="htmx-config" content="{{ { allowEval: false, includeIndicatorStyles: false } | json_encode }}">

    <link rel="search" type="application/opensearchdescription+xml" href="{{ path('opensearch_description') }}" title="{{ site_name() }}">

    {% block javascripts %}
      <script src="{{ preload(asset('main.js', 'webpack'), { as: 'script' }) }}"
              integrity="{{ webpack_asset_integrity('main.js') }}"></script>
    {% endblock javascripts %}

    {% block favicon %}
      {%- with { logo: site_logo() } -%}
        {%- if logo -%}
          <link rel="icon" type="image/png" href="{{ logo|imagine_filter('favicon') }}">
        {%- else -%}
          <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
        {%- endif -%}
      {%- endwith -%}
    {% endblock favicon %}

    {% block apple_touch_icon %}
      {%- with { logo: site_logo() } -%}
        {%- if logo -%}
          <link rel="apple-touch-icon-precomposed" href="{{ logo|imagine_filter('touch_icon_192') }}">
        {%- else -%}
          <link rel="apple-touch-icon-precomposed" href="{{ asset('apple-touch-icon-precomposed.png') }}">
        {%- endif -%}
      {%- endwith -%}
    {% endblock apple_touch_icon %}

    {% block stylesheets %}
      {{ include('_includes/stylesheets.html.twig', with_context=false) }}

      {% block theme_css %}
        {{ theme_css() }}
      {% endblock theme_css %}
    {% endblock stylesheets %}

    {% block feed %}
      <link rel="alternate" type="application/atom+xml" href="{{ path('all_atom') }}" title="{{ 'front.all_forums'|trans }}">
      <link rel="alternate" type="application/atom+xml" href="{{ path('featured_atom') }}" title="{{ 'front.featured_forums'|trans }}">
      <link rel="alternate" type="application/atom+xml" href="{{ path('comment_list_atom') }}" title="{{ 'title.recent_comments'|trans }}">
    {% endblock feed %}

    {% block robots_tag %}
      {% with { directives: no_robots_directives() } %}
        {% if directives is not empty %}
          <meta name="robots" content="{{ directives|join(', ') }}">
        {% endif %}
      {% endwith %}
    {% endblock robots_tag %}

    {% block head '' %}
  </head>

  <body class="{% block body_classes %}{{ app.user ? 'user-logged-in' : 'user-anonymous' }}{% endblock body_classes %}">
    {% block site_alerts %}
      <div class="site-alerts">
        {%- if app.request.previousSession -%}
          {%- for type, notices in app.flashes -%}
            {%- for notice in notices -%}
              <div class="{{ alert_classes(type) }} site-alerts__alert"
                   role="alert"
                   data-controller="alert"
                   data-alert-interactive-class="site-alerts__dismissable-alert">
                {{ alert_icon(type) }}
                <div class="alert__text">
                  <p>{{ notice|trans }}</p>
                </div>
                <button class="site-alerts__dismiss unbuttonize" data-action="alert#close" data-alert-target="close">
                  <span class="hide-visually">{{ 'action.dismiss'|trans }}</span>
                </button>
              </div>
            {%- endfor -%}
          {%- endfor -%}
        {%- endif -%}
      </div>
    {% endblock site_alerts %}

    <nav class="site-accessibility-nav">
      <a href="#main" class="site-accessibility-nav__link">{{ 'nav.jump_to_main_content'|trans }}</a>
      <a href="#sidebar" class="site-accessibility-nav__link">{{ 'nav.jump_to_sidebar'|trans }}</a>
    </nav>

    {{ block('site_nav') }}

    {% block site_main %}
      <div class="site-content content-container">
        <main class="site-content__body body flow" id="main">{% block body %}{% endblock %}</main>
        <aside class="site-content__sidebar sidebar flow" id="sidebar">{% block sidebar %}{% endblock %}</aside>
      </div>
    {% endblock site_main %}

    {% block site_footer %}
      {% set version = app_version() and app_branch() ? 'site_footer.version'|trans({
        '%branch%': app_branch(),
        '%version%': app_version(),
      }) %}
      <footer class="site-footer page-shadow text-sm content-container">
        <div class="flex flex--guttered flex--align-center">
          <div>
            {{- 'site_footer.app'|trans({
              '%app%': '<a href="%s" rel="external">%s</a>'|format(
                app_website()|e,
                app_name()|e,
              ),
              '%version%': version,
            })|raw }}
            &bull;
            <a href="{{ path('site_attribution') }}" rel="nofollow">{{ 'nav.attribution'|trans }}</a>
          </div>

          <div>
            <a href="{{ path('site_switch_locale', { returnTo: app.request.uri }) }}"
               class="flex flex--slim-gutters flex--align-center"
               rel="nofollow">
              <span class="hide-visually">{{ 'label.language'|trans }}: </span>
              {{ icon('globe', '', 'fg-muted') }}
              <span>{{ app.locale|intl_locale_name }}</span>
            </a>
          </div>
        </div>
      </footer>
    {% endblock site_footer %}

    <dialog id="markdown-help-dialog" class="modal">
      <div class="flex flex--align-center modal__header">
        <h2 class="flex__grow">{{ 'markdown.help'|trans }}</h2>

        <form method="dialog">
          <button class="button button--small button--secondary">
            {{ icon('cancel') }}
            <span class="hide-visually">{{ 'action.close'|trans }}</span>
          </button>
        </form>
      </div>

      <div class="modal__content">
        {{ include('_includes/markdown_help.html.twig') }}
      </div>
    </dialog>
  </body>
</html>
