<!DOCTYPE html>
<html lang="{{@site.locale}}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{meta_title page=(t " (Page %)")}}</title>

    <link rel="stylesheet" href="{{asset "built/screen.css"}}">

    {{ghost_head}}
</head>

<body class="{{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Elegant serif"}} has-serif-body{{/match}}{{^is "home"}}{{#if @site.cover_image}} is-head-brand{{/if}}{{/is}}">
<div class="site">

    <header id="gh-head" class="gh-head gh-outer">
        <div class="gh-head-inner">
            <div class="gh-head-brand">
                <div class="gh-head-brand-wrapper">
                    <a class="gh-head-logo" href="{{@site.url}}">
                        {{#if @site.logo}}
                            <img src="{{@site.logo}}" alt="{{@site.title}}">
                        {{else}}
                            {{@site.title}}
                        {{/if}}
                    </a>
                </div>
                <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
                <button class="gh-burger" aria-label="{{t "Toggle menu"}}"></button>
            </div>

            <nav class="gh-head-menu">
                {{navigation}}
                {{#unless @site.members_enabled}}
                    {{#match @custom.navigation_layout "Stacked"}}
                        <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
                    {{/match}}
                {{/unless}}
            </nav>

            <div class="gh-head-actions">
                {{#unless @site.members_enabled}}
                    {{^match @custom.navigation_layout "Stacked"}}
                        <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
                    {{/match}}
                {{else}}
                    <button class="gh-search gh-icon-btn" aria-label="{{t "Search this site"}}" data-ghost-search>{{> "icons/search"}}</button>
                    <div class="gh-head-members">
                        {{#unless @member}}
                            {{#unless @site.members_invite_only}}
                                <a class="gh-head-link" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
                            {{else}}
                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
                            {{/unless}}
                        {{else}}
                            <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
                        {{/unless}}
                    </div>
                {{/unless}}
            </div>
        </div>
    </header>

    {{#is "home"}}
        {{> "cover"}}
        {{#if @custom.show_featured_posts}}
            {{> "featured-posts"}}
        {{/if}}
    {{/is}}

    <div class="site-content">
        {{{body}}}
    </div>

    <footer class="gh-foot{{#unless @site.secondary_navigation}} no-menu{{/unless}} gh-outer">
        <div class="gh-foot-inner gh-inner">
            <div class="gh-copyright">
                {{@site.title}} © {{date format="YYYY"}}
            </div>
            <div class="gh-foot-center">
                <div class="gh-social-links">
                    {{#social_accounts @site}}
                        <a href="{{href}}" target="_blank" rel="noopener" aria-label="{{name}}">
                            {{#> (concat "icons/" type)}}
                                {{!-- Fallback when no per-platform icon partial exists --}}
                                <span>{{name}}</span>
                            {{/undefined}}
                        </a>
                    {{/social_accounts}}
                </div>
                {{#if @site.secondary_navigation}}
                    <nav class="gh-foot-menu">
                        {{navigation type="secondary"}}
                    </nav>
                {{/if}}
            </div>
            <div class="gh-powered-by">
                {{{t "Powered by {ghostlink}" ghostlink="<a href=\"https://ghost.org/\" target=\"_blank\" rel=\"noopener\">Ghost</a>"}}}
            </div>
        </div>
    </footer>

</div>

{{#is "post, page"}}
    {{> "pswp"}}
{{/is}}

{{!-- Fixes 100vh issue on mobile browsers with toolbar on the bottom --}}
<script>
    if (document.body.classList.contains('with-full-cover') && (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
        document.getElementsByClassName('cover')[0].style.height = window.innerHeight + 'px';
    }
</script>

<script src="{{asset "built/main.min.js"}}"></script>

{{ghost_foot}}

</body>
</html>