{# Macros #}
{% macro og(name, content) %}
    <meta property="og:{{ name }}" content="{{ content }}"/>
{% endmacro %}
{% macro tw(name, content) %}
    <meta name="twitter:{{ name }}" content="{{ content }}"/>
{% endmacro %}
{% macro fav(filename) %}{{ (settings['brand']['favicon_folder'] + filename)|static }}{% endmacro %}

{# Variable Declarations #}
{% if page.meta['title']|lower == 'home' %}
    {% set title=settings['brand']['app_name'] %}
{% else %}
    {% set title=page.meta['title'] + " - " + settings['brand']['app_name'] %}
{% endif %}
{% set desc=page.meta['description']|default(settings['brand']['meta']['description']) %}
{% set img=settings['brand']['meta']['image']|static|full_url(False) %}
{% set canonical=page.meta['title']|route|full_url(False) %}
{% set theme_color=settings['brand']['meta']['theme_color'] %}

{# Meta Info #}
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ title }}</title>
<meta name="keywords" content="{{ ', '.join(settings['brand']['meta']['keywords']) }}"/>
<meta name="description" content="{{ desc }}"/>
<link rel="canonical" href="{{ canonical }}">

{# OpenGraph Info #}
{{ og("type", "website") }}
{{ og("title", title) }}
{{ og("description", desc) }}
{{ og("url", canonical) }}
{{ og("image", img) }}
{{ og("image:alt", settings['brand']['meta']['image_alt']) }}

{# Twitter Info #}
{{ tw("title", title) }}
{{ tw("description", desc) }}
{{ tw("card", "summary_large_image") }}
{{ tw("image", img) }}

{# Favicons #}
<link rel="apple-touch-icon" sizes="57x57" href="{{ fav('apple-icon-57x57.png') }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ fav('apple-icon-60x60.png') }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ fav('apple-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ fav('apple-icon-76x76.png') }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ fav("apple-icon-114x114.png") }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ fav("apple-icon-120x120.png") }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ fav("apple-icon-144x144.png") }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ fav("apple-icon-152x152.png") }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ fav("apple-icon-180x180.png") }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ fav("android-icon-192x192.png") }}">
<link rel="icon" type="image/png" sizes="32x3   2" href="{{ fav("favicon-32x32.png") }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ fav("favicon-96x96.png") }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ fav("favicon-16x16.png") }}">
<link rel="manifest" href="{{ "manifest.webmanifest"|static }}">
<meta name="msapplication-config" content="{{ "browserconfig.xml"|static }}"/>
<meta name="msapplication-TileColor" content="{{ theme_color }}">
<meta name="msapplication-TileImage" content="{{ fav("ms-icon-144x144.png") }}">
<meta name="theme-color" content="{{ theme_color }}">

{# Google Search Console Verification #}
{% if settings['brand']['meta']['search_console_code'] %}
    <meta name="google-site-verification" content="{{ settings['brand']['meta']['search_console_code'] }}">
{% endif %}
