{#
/**
 * @file
 * Theme override for the basic structure of a single Drupal page.
 *
 * Variables:
 * - logged_in: A flag indicating if user is logged in.
 * - root_path: The root path of the current page (e.g., node, admin, user).
 * - node_type: The content type for the current node, if the page is a node.
 * - head_title: List of text elements that make up the head_title variable.
 *   May contain one or more of the following:
 *   - title: The title of the page.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site.
 * - page_top: Initial rendered markup. This should be printed before 'page'.
 * - page: The rendered page markup.
 * - page_bottom: Closing rendered markup. This variable should be printed after
 *   'page'.
 * - db_offline: A flag indicating if the database is offline.
 * - placeholder_token: The token for generating head, css, js and js-bottom
 *   placeholders.
 *
 * @see template_preprocess_html()
 */
#}
{%
  set body_classes = [
    'no-js',
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
  ]
%}
<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
    
    {% block favicons %}
      {# 
        Adding favicons as a block, so theme's can easily remove this section
        (by simply placing an empty block in their subtheme). You might want
        to do this if you want to use the favicon uploader from the theme
        settings page, for example.

        You may also like to use this section in your subtheme so you can set
        different paths for your favicons and/or add even more favicons to
        your theme.
      #}
      <link rel="apple-touch-icon" sizes="180x180" href="/{{ base_path ~ directory }}/assets/images/favicons/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="/{{ base_path ~ directory }}/assets/images/favicons/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="/{{ base_path ~ directory }}/assets/images/favicons/favicon-16x16.png">
      <link rel="manifest" href="/{{ base_path ~ directory }}/assets/images/favicons/site.webmanifest">
      <link rel="shortcut icon" href="/{{ base_path ~ directory }}/assets/images/favicons/favicon.ico">
      <meta name="msapplication-config" content="favicons/browserconfig.xml">
    {% endblock %}
    
    {% block extra_head_items %}
      {# 
        We are creating a Twig block here so we can override it in our sub-themes.
        The items in this have hard-coded colours that you will probably want to change.
        You can also use this block for things like loading external fonts, such as 
        those from Google Fonts like so:
          <link rel="preconnect" href="https://fonts.googleapis.com">
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
          <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> 
      #}
      <link rel="mask-icon" href="/{{ base_path ~ directory }}/assets/images/favicons/safari-pinned-tab.svg" color="#ffffff">
      <meta name="msapplication-TileColor" content="#ffffff">
      <meta name="theme-color" content="#ffffff">
    {% endblock %}
  </head>
  <body{{ attributes.addClass(body_classes) }}>
    {#
      Placing the script to remove the .no-js class here, so it kicks in
      as soon as possible, to lessen any FOUC.
    #}
    <script>
      document.querySelector('body').classList.remove('no-js');
    </script>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable skip-link">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>
