{% from "node_modules/govuk-frontend/dist/govuk/components/skip-link/macro.njk" import govukSkipLink -%}
{% from "./components/header/macro.njk" import LBCamdenHeader -%}
{% from "./components/footer/macro.njk" import LBCamdenFooter -%}
{% from "./components/card/macro.njk" import LBCamdenCard -%}
{% from "./components/search/macro.njk" import LBCamdenSearch -%}

{# 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{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}LBCamden Front End Components{% endblock %}</title>
  <meta name="description" content="This is an example meta description">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  {# @todo - experiment with themes and colours #}
  <meta name="theme-color" content="{{ themeColor | default('#101812') }}">
  {# 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/favicons/favicon.ico"
          type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180"
          href="{{ assetPath | default('/assets') }}/images/favicons/apple-icon-180x180.png">
    <link rel="apple-touch-icon" sizes="152x152"
          href="{{ assetPath | default('/assets') }}/images/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/favicons/apple-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/ms-icon-310x310.png">
</head>
<body
  class="govuk-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{ attribute }}="{{ value }}"{% endfor %}
>
<script{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>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 %}
  {{ LBCamdenHeader() }}
{% endblock %}

{% block main %}
  <main class="govuk-main-wrapper {{ containerClasses }}" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
    {% block beforeContent %}

    {% endblock %}
    <div class="{{ mainClasses }}" id="main-content">
      {% block content %}{% endblock %}
    </div>
    {% block postContent %}{% endblock %}
  </main>
  {% block afterContent %}

  {% endblock %}
{% endblock %}

{% block footer %}
  {{ LBCamdenFooter({

  }) }}
{% endblock %}

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