<!DOCTYPE html>
<html lang="{{ config.language | default('en') }}">
{% set is_home_page = '/'.join((url or config.link or '').rstrip('/').split('/')[3:]).split('?')[0].split('#')[0] == '' %}
{% set is_folder_page = (url or '').rstrip('/').split('/')[-1].startswith('~') if url else False %}
{% set is_index_page = is_home_page or is_folder_page or (type == 'index') %}
{% set is_guestbook_page = (url or '').rstrip('/').endswith('/guestbook') %}
<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 -->
    {% if is_guestbook_page %}
    <link rel="alternate" type="application/atom+xml" title="{{ config.title }} - Guestbook (Atom)" href="/guestbook/feed.atom" />
    <link rel="alternate" type="application/rss+xml" title="{{ config.title }} - Guestbook (RSS)" href="/guestbook/feed.rss" />
    {% else %}
    <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" />
    {% endif %}
    <!-- 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.rel_me %}
    <!-- Rel="me" links for identity verification -->
    {% for rel_me_link in config.rel_me %}
    <link rel="me" href="{{ rel_me_link }}">
    {% endfor %}
    {% endif %}
    {% if config.activitypub_profile_url %}
    <!-- ActivityPub actor profile links for Mastodon verification -->
    <link rel="me" href="{{ config.activitypub_actor_url }}">
    <link rel="me" href="{{ config.activitypub_profile_url }}">
    <link rel="me" href="{{ config.link.rstrip('/') }}">
    {% if config.activitypub_link and config.activitypub_link.rstrip('/') != config.link.rstrip('/') %}
    <link rel="me" href="{{ config.activitypub_link.rstrip('/') }}/@{{ config.activitypub_username }}">
    <link rel="me" href="{{ config.activitypub_link.rstrip('/') }}">
    {% endif %}
    {% endif %}
    
    <!-- Semantic tag/category links -->
    {% if is_home_page and config.categories %}
    <!-- Categories for home page -->
    {% for category in config.categories %}
    <link rel="tag" href="/tags/{{ category|lower|replace(' ', '-') }}" title="{{ category }}">
    {% endfor %}
    {% endif %}
    
    {% if not is_home_page and (tags or config.categories) %}
    <!-- Tags and categories for article pages -->
    {% if config.categories %}
    {% for category in config.categories %}
    <link rel="tag" href="/tags/{{ category|lower|replace(' ', '-') }}" title="{{ category }}">
    {% endfor %}
    {% endif %}
    {% if tags %}
    {% for tag in tags %}
    <link rel="tag" href="/tags/{{ tag }}" title="{{ tag }}">
    {% endfor %}
    {% endif %}
    {% endif %}
    <!-- PWA builder -->
    <script type="module" src="/pwabuilder-sw-register.js"></script>
    <!-- Articles utilities -->
    {% if not is_home_page %}
    <script type="module" src="/js/article.js"></script>
    {% endif %}

    <!--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>
    {% 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_index_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>&#128214;&nbsp; </span><span>Full</span></option>
                </select>
              </div>
            {% endif %}

            <div class="hamburger-menu">
                <input type="checkbox" id="hamburger-toggle" class="hamburger-toggle">
                <label for="hamburger-toggle" class="hamburger-icon" title="Menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
                <nav class="hamburger-nav">
                    {% if config.enable_activitypub %}
                    {% if activitypub_handle and config.activitypub_profile_url %}
                    <a class="activitypub-handle" href="{{ config.activitypub_profile_url }}"><span class="handle">{{ activitypub_handle }}</span></a>
                    {% endif %}
                    <a href="/followers">&#128101; Followers <span class="nav-count">({{ followers_count }})</span></a>
                    {% endif %}
                    <a href="/blog">&#128221; Blog</a>
                    {% if has_about_page %}
                    <a href="/about">ℹ️ About</a>
                    {% endif %}
                    {% if config.enable_guestbook %}
                    <a href="/guestbook">&#128227; Guestbook</a>
                    {% endif %}
                    {% if unlisted_count %}
                    <a href="/unlisted">&#128172; Unlisted <span class="nav-count">({{ unlisted_count }})</span></a>
                    {% endif %}
                    <a href="/tags">&#127991; Tags</a>
                    {% if config.nav_links %}
                    {% for nav_link in config.nav_links %}
                    {% set nav_url = nav_link.url if nav_link is mapping else nav_link %}
                    {% set nav_label = nav_link.display_name if nav_link is mapping and nav_link.display_name else nav_url %}
                    {% set nav_icon = nav_link.icon if nav_link is mapping and nav_link.icon else '🔗' %}
                    {% set nav_icon_is_url = nav_icon.startswith('http://') or nav_icon.startswith('https://') or nav_icon.startswith('/') %}
                    {% set nav_new_tab = nav_link.new_tab if nav_link is mapping and nav_link.new_tab is defined else false %}
                    <a href="{{ nav_url }}"{% if nav_new_tab %} target="_blank" rel="noopener"{% endif %}>{% if nav_icon_is_url %}<img class="nav-link-icon" src="{{ nav_icon }}" alt="">{% else %}{{ nav_icon }}{% endif %} {{ nav_label }}</a>
                    {% endfor %}
                    {% endif %}
                    <a href="/feed.atom" target="_blank">{% include 'icons/rss.html' %} Atom Feed</a>
                    <a href="/feed.rss" target="_blank">{% include 'icons/rss.html' %} RSS Feed</a>
                </nav>
            </div>
        </div>
    </header>
    {% endif %}

<style>
.hamburger-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5em;
}
.hamburger-toggle {
    display: none;
}
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
    padding: 4px;
}
.hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-fg-primary);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.hamburger-toggle:checked + .hamburger-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-toggle:checked + .hamburger-icon span:nth-child(2) {
    opacity: 0;
}
.hamburger-toggle:checked + .hamburger-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.hamburger-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    right: 0;
    height: calc(100vh - var(--header-height));
    width: 220px;
    background-color: #fff;
    background: var(--color-bg-primary);
    border-left: 1px solid var(--color-border);
    border-radius: 1em 0;
    box-shadow: -4px 0 12px var(--color-shadow);
    z-index: 10000;
    overflow-y: auto;
    opacity: 1;
}
@media (prefers-color-scheme: dark) {
    .hamburger-nav {
        background-color: #282828;
    }
}
.hamburger-toggle:checked ~ .hamburger-nav {
    display: block;
}
.hamburger-nav a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 1em;
    color: var(--color-fg-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-tertiary);
    text-align: left;
}
.hamburger-nav a:hover {
    background: var(--color-bg-tertiary);
}
.hamburger-nav a svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}
.hamburger-nav .nav-link-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    object-fit: contain;
}
.hamburger-nav .nav-count {
    opacity: 0.7;
    font-size: 0.9em;
}
.hamburger-nav a.activitypub-handle {
    background: var(--color-bg-secondary);
    color: var(--color-fg-tertiary);
    font-size: 0.8em;
}
.hamburger-nav a.activitypub-handle .handle {
    overflow-wrap: anywhere;
    word-break: break-word;
}
</style>
