<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- PWA & Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="{{ config.description }}">
    <link rel="manifest" href="/manifest.json">
    <!-- Android PWA -->
    <meta name="theme-color" content="white">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="{{ config.title }}">
    <!-- iOS PWA -->
    <meta name="apple-mobile-web-app-title" content="{{ config.title }}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <!-- Orientation  -->
    <meta name="screen-orientation" content="portrait">
    <!-- RSS feed -->
    <link rel="alternate" type="application/atom+xml" title="{{ config.title }} (Atom)" href="/feed.atom" />
    <link rel="alternate" type="application/rss+xml" title="{{ config.title }} (RSS)" href="/feed.rss" />
    <!-- Fonts & Styles -->
    <link rel="stylesheet" href="/fonts/lora.css">
    <link rel="stylesheet" href="/fonts/poppins.css">
    <link rel="stylesheet" href="/fonts/fira-sans.css">
    <link rel="stylesheet" href="/css/common.css">
    {% if config.webmention_url %}
    <!-- Webmention handler -->
    <link rel="webmention" href="{{ config.webmention_url }}">
    {% endif %}
    {% if config.external_links %}
    <!-- Rel="me" links for identity verification -->
    {% for external_link in config.external_links %}
    <link rel="me" href="{{ external_link }}">
    {% endfor %}
    {% endif %}
    <!-- PWA builder -->
    <script type="module" src="/pwabuilder-sw-register.js"></script>

    <!--Preview card metadata -->
    <meta property="og:title" content="{{ title }}">
    <meta property="og:description" content="{{ description or config.description }}">
    <meta property="og:image" content="{{ image or config.logo or '/icon-192.png' }}">
    <meta property="og:url" content="{{ url or config.link }}">
    <meta property="og:type" content="{{ type }}">
    <meta property="og:site_name" content="{{ config.title or 'Blog' }}">

    {% if styles %}
        {% for style in styles %}
            <link rel="stylesheet" type="text/css" href="{{ style }}">
        {% endfor %}
    {% endif %}
    <title>{{ title }}</title>
</head>
<body>
    {% set is_home_page = '/'.join((url or config.link or '').rstrip('/').split('/')[3:]).split('?')[0].split('#')[0] == '' %}
    {% if not skip_header %}
    <header>
        <div class="left">
            {% if config.logo %}
            <a href="{{ config.home_link or config.link }}" title="Home">
                <img src="{{ config.logo }}" class="icon" alt="">
            </a>
            {% endif %}

            <a href="{{ config.link }}" title="{{ config.title }}">
                <span class="title">{{ config.title }}</span>
            </a>
        </div>

        <div class="right">
            {% if is_home_page %}
              <div class="view-mode-bar">
                <select class="view-mode-select" onchange="window.location.search='?view='+this.value">
                  <option value="cards" {{ 'selected' if view_mode == 'cards' }}><span>&#10697;&nbsp; </span><span>Cards</span></option>
                  <option value="list" {{ 'selected' if view_mode == 'list' }}><span>☰&nbsp; </span><span>List</span></option>
                  <option value="full" {{ 'selected' if view_mode == 'full' }}><span>&#128366;&nbsp; </span><span>Full</span></option>
                </select>
              </div>
            {% endif %}

            <a href="/feed.atom" target="_blank" title="Feed">
                <div class="icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="24" height="24" rx="4" fill="#FF6600"/>
                    <circle cx="6.5" cy="17.5" r="1.5" fill="white"/>
                    <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56z" fill="white"/>
                    <path d="M4 10.1v2.83c3.73 0 6.77 3.04 6.77 6.77h2.83c0-5.29-4.31-9.6-9.6-9.6z" fill="white"/>
                  </svg>
                </div>
            </a>
        </div>
    </header>
    {% endif %}
