{% extends "patterns/base.html" %}

{% load static wagtailuserbar wagtailcore_tags wagtailimages_tags navigation_tags util_tags %}

{% block meta_tags %}
    {% if GOOGLE_TAG_MANAGER_ID and not request.in_preview_panel %}
        <!-- Google Tag Manager -->
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','{{ GOOGLE_TAG_MANAGER_ID|escapejs }}');</script>
        <!-- End Google Tag Manager -->
    {% endif %}

    {# favicons #}
    {% block branding_favicon %}
        <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/icons/apple-touch-icon.png' %}">
        <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/icons/favicon-32x32.png' %}">
        <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/icons/favicon-16x16.png' %}">
        <link rel="manifest" href="{% static 'images/icons/site.webmanifest' %}">
        <link rel="mask-icon" href="{% static 'images/icons/safari-pinned-tab.svg' %}" color="#fd5765">
        <link rel="shortcut icon" href="{% static 'images/icons/favicon.ico' %}">
        <meta name="apple-mobile-web-app-title" content="Torchbox">
        <meta name="application-name" content="Torchbox">
        <meta name="msapplication-TileColor" content="#fd5765">
        <meta name="msapplication-config" content="{% static 'images/icons/browserconfig.xml' %}">
        <meta name="theme-color" content="#ffffff">
    {% endblock %}

    {% comment %}
        Generate favicons by http://realfavicongenerator.net and select the option to serve files up from the root of the site.
        Place all the files generated by realfavicon generator in the "public" folder in the application root, and they will be served up from the root of the site by whitenoise.
    {% endcomment %}

    {% comment %}
        Twitter summary card - see https://dev.twitter.com/cards/types/summary
        and https://dev.twitter.com/cards/getting-started
    {% endcomment %}
    {% wagtail_site as current_site %}
    {% social_media_settings as social_media_settings %}
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@{{ social_media_settings.twitter_handle }}" />
    <meta name="twitter:title" content="{{ page.title }}" />
    <meta name="twitter:description" content="{% if page|social_text:current_site %}{{ page|social_text:current_site }}{% elif page.search_description %}{{ page.search_description }}{% elif page.listing_summary %}{{ page.listing_summary }}{% else %}{{ social_media_settings.default_sharing_text }}{% endif %}">
    {% if page.social_image or page.feed_image or page.hero_image %}
        {% if page.social_image %}
            {% image page.social_image width-1000 as social_img %}
        {% elif page.feed_image %}
            {% image page.feed_image width-1000 as social_img %}
        {% elif page.hero_image %}
            {% image page.hero_image width-1000 as social_img %}
        {% endif %}
        {# This will give a full path to the image when on staging or production because S3 storage is used. If testing locally, make sure you use the default localhost:8000 url. Testing via :3000 will give peculiar results. #}
        <meta name="twitter:image" content="{{ social_img.url }}">
        {% if social_img.alt %}
            <meta name="twitter:image:alt" content="{{ social_img.alt }}">
        {% endif %}
    {% else %}
        {% comment %}
        An example of how to add a default image to use for social sharing in case one is not provided on the page.
        Note that you need to explicitly add the root url here as the static path will not include it
        <meta name="twitter:image" content="{{ current_site.root_url }}{% static 'images/social-image.png' %}">
        {% endcomment %}
    {% endif %}

    {# facebook opengraph tags #}
    {% if social_media_settings.facebook_app_id %}
        <meta property="fb:app_id" content="{{ social_media_settings.facebook_app_id }}" />
    {% endif %}

    <meta property="og:type" content="website" />
    {% if page %}
        <meta property="og:url" content="{{ site.root_url }}{% pageurl page %}" />
        <meta property="og:title" content="{{ page.title }}" />
    {% endif %}
    {% if page.social_image or page.feed_image or page.hero_image %}
        {% if page.social_image %}
            {% image page.social_image fill-1200x630 as social_img %}
        {% elif page.feed_image %}
            {% image page.feed_image fill-1200x630 as social_img %}
        {% elif page.hero_image %}
            {% image page.hero_image fill-1200x630 as social_img %}
        {% endif %}
        {# This will give a full path to the image when on staging or production because S3 storage is used. If testing locally, make sure you use the default localhost:8000 url. Testing via :3000 will give peculiar results. #}
        <meta property="og:image" content="{{ social_img.url }}" />
        <meta property="og:image:width" content="{{ social_img.width }}" />
        <meta property="og:image:height" content="{{ social_img.height }}" />
    {% else %}
        {% comment %}
        An example of how to add a default image to use for social sharing in case one is not provided on the page.
        Note that you need to explicitly add the root url here as the static path will not include it
        <meta name="twitter:image" content="{{ current_site.root_url }}{% static 'images/social-image.png' %}">
        {% endcomment %}
    {% endif %}
    <meta property="og:description" content="{% if page|social_text:current_site %}{{ page|social_text:current_site }}{% elif page.search_description %}{{ page.search_description }}{% elif page.listing_summary %}{{ page.listing_summary }}{% else %}{{ social_media_settings.default_sharing_text }}{% endif %}" />
    <meta property="og:site_name" content="{{ social_media_settings.site_name }}" />
{% endblock meta_tags %}


{% block body_top %}
    {% if GOOGLE_TAG_MANAGER_ID and not request.in_preview_panel %}
        {# To enable GTM code you need to specify GOOGLE_TAG_MANAGER_ID in Django settings #}
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GOOGLE_TAG_MANAGER_ID|urlencode }}"
            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    {% endif %}
{% endblock body_top %}

{% block header %}
    {% include "patterns/atoms/skip-link/skip-link.html" %}
    {% include "patterns/organisms/header/header.html" with show_primary_nav=True %}
    {% include "patterns/atoms/menu-button/menu-button.html" %}
    {% include "patterns/molecules/navigation/mobile-nav.html" %}
{% endblock header %}

{% block footer %}
    {% include "patterns/organisms/footer/footer.html" %}
{% endblock footer %}