{% set title = title is not defined or title is null ? APP_NAME_FORMATTED : title ~ ' - ' ~ APP_NAME_FORMATTED %}
{% set locale = meta.locale|default('en-US') %}
{% set description = meta.description|default(APP_DESCRIPTION) %}
{% set keywords = meta.keywords|default(APP_KEYWORDS) %}
{% set image = meta.image %}

<!DOCTYPE html>
<html lang="{{ locale }}">

<head>
  {% block head %}
  <title>{{ title }}</title>

  <!-- Meta -->
  <meta charset="utf-8">
  <meta name="author" content="{{ APP_AUTHOR }}">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  <!-- Description -->
  <meta name="description" content="{{ description }}">
  <meta name="keywords" content="{{ keywords }}">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:locale" content="{{ locale|replace({'-': '_'}) }}">
  <meta property="og:url" content="">
  <meta property="og:title" content="{{ title }}">
  <meta property="og:description" content="{{ description }}">
  <meta property="og:keywords" content="{{ keywords }}">
  <meta property="og:image" content="{{image}}">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary">
  <meta property="twitter:url" content="">
  <meta property="twitter:title" content="{{ title }}">
  <meta property="twitter:description" content="{{ description }}">
  <meta property="twitter:image" content="{{image}}">

  <!-- Misc -->
  <link rel="canonical" href="">
  <link rel="image_src" href="{{image}}">

  <!-- Favicon -->
  <link rel="icon shortcut" type="image/x-icon" sizes="any" href="/favicon.ico">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="apple-touch-icon" href="/favicon.png">

  <!-- App data -->
  <link rel="stylesheet" href="/src/sass/main.scss">
  <script type="module" src="/src/js/main.js"></script>
  {% endblock %}

  <!-- App misc -->
  {% block head_additional %}{% endblock %}
</head>

<body>
  <!-- Handle theme data attributes -->
  <script src="/data-theme.js"></script>

  <!-- Page header -->
  {% block header %}
  {% include '@component/header.twig' %}
  {% endblock %}

  <!-- Page content -->
  {% block main %}
  <main class="page-content">
    {% block content %}{% endblock %}
  </main>
  {% endblock %}

  <!-- Page footer -->
  {% block footer %}
  {% include '@component/footer.twig' %}
  {% endblock %}
</body>

</html>
