{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%}
{% from "./components/components/header/macro.njk" import usaHeader -%}
{% from "./components/components/footer/macro.njk" import usaFooter -%}
{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
{%- set assetUrl = assetUrl | default(assetPath) -%}
<!DOCTYPE html>
<html lang="{{ htmlLang | default('en') }}" class="{{ htmlClasses }}">
  <head>
    <meta charset="utf-8" />
    <title>{% block pageTitle %}Notify.gov{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="f0f0f0" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="1b1b1b" />
    {% if config['NR_MONITOR_ON'] %}
      {% include "partials/newrelic.html" -%}
    {% endif %}

    {# Ensure that older IE versions always render with the correct rendering engine #}
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {% block headIcons %}
      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/usa-mask-icon.svg" color="{{ themeColor | default('#F0F0F0') }}">
      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
    {% endblock %}

    {% block head %}{% endblock %}
    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
    {% block meta %}
      <meta property="og:site_name" content="Notify.gov">
      <meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
    {% endblock %}
  </head>
  <body class="usa-template__body {{ bodyClasses }}">
    <script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
    {% block bodyStart %}{% endblock %}

    {% block skipLink %}
      {{ usaSkipLink({
        "href": '#main-content',
        "text": 'Skip to main content'
      }) }}
    {% endblock %}

    {% block header %}
      {{ usaHeader({}) }}
    {% endblock %}

    {% block main %}
      <div class="grid-container">
        {% block beforeContent %}{% endblock %}
        <main class="{{ mainClasses }}" id="main-content" role="main">
          {% block content %}{% endblock %}
        </main>
      </div>
    {% endblock %}

    {% block footer %}
      {{ usaFooter({}) }}
    {% endblock %}

    {% block bodyEnd %}{% endblock %}
  </body>
</html>
