{% from "./components/skip-link/macro.njk" import govukSkipLink -%}
{% from "./components/header/macro.njk" import govukHeader -%}
{% from "./components/footer/macro.njk" import govukFooter -%}
{# 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="govuk-template {{ htmlClasses }}">
  <head>
    <meta charset="utf-8" />
    <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
    {# 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/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
      <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
      <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-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 #}
    {# image url needs to be absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}
    <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png">
  </head>
  <body class="govuk-template__body {{ bodyClasses }}">
    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
    {% block bodyStart %}{% endblock %}

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

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

    {% block main %}
      <div class="govuk-width-container">
        {% block beforeContent %}{% endblock %}
        <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content">
          {% block content %}{% endblock %}
        </main>
      </div>
    {% endblock %}

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

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