{%- import 'macro/person.html.j2' as person_macros -%}
{%- do citer.track() -%}
<!doctype html>
<html lang="{{ locale }}"
      prefix="foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rel: http://purl.org/vocab/relationship/">
<head>
    <title>{% if page_title is defined %}{{ page_title | striptags }} - {% endif %}{{ site.configuration.title }}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Betty (https://github.com/bartfeenstra/betty)"/>
    {% if site.configuration.author %}
        <meta name="author" content="{{ site.configuration.author }}"/>
    {% endif %}
    <meta name="og:title" content="{%- if page_title is defined -%}{{ page_title | striptags }}{%- else -%}{{ site.configuration.title }}{%- endif -%}"/>
    <meta name="og:site_name" content="{{ site.configuration.title }}"/>
    {% if page_resource is defined and page_recource is has_files %}
        {% for file in page_resource.files %}
            {% if file.media_type.type == 'image' %}
                <meta name="og:image" content="{{ file | image(600, 600) | static_url }}"/>
                {% if file.description %}
                    <meta name="og:image:description" content="{{ file.description | escape }}"/>
                {% endif %}
            {% endif %}
        {% endfor %}
        <link rel="canonical" href="{{ page_resource | url(absolute=true) }}"/>
        {% if page_resource is defined and page_resource is resource and resource is identifiable %}
            <link rel="alternate" href="{{ page_resource | url(media_type='application/json') }}" type="application/json"/>
            <script type="application/ld+json">
              {{ page_resource | tojson }}
            </script>
        {% endif %}
    {% endif %}
    <meta name="og:image" content="/betty-512x512.png"/>
    <link rel="stylesheet" href="{{ '/css/betty.css' | static_url }}"/>
    <link rel="icon" href="{{ '/betty.ico' | static_url }}"/>
    <link rel="manifest" href="{{ '/betty.webmanifest' | static_url }}"/>
    <script src="{{ '/file.js' | static_url }}" defer></script>
    <script src="{{ '/search.js' | static_url }}" defer></script>
    <script src="{{ '/show.js' | static_url }}" defer></script>
    {% for html_provider in html_providers %}
        {% for css_path in html_provider.public_css_paths %}
            <link rel="stylesheet" href="{{ css_path }}"/>
        {% endfor %}
        {% for js_path in html_provider.public_js_paths %}
            <script src="{{ js_path }}" defer></script>
        {% endfor %}
    {% endfor %}
</head>
{% if page_resource is has_files %}
    {% set page_image = page_resource.associated_files | selectattr('media_type.type', 'eq', 'image') | first %}
{% elif site.configuration.theme.background_image_id and site.configuration.theme.background_image_id in site.ancestry.files %}
    {% set page_image = site.ancestry.files[site.configuration.theme.background_image_id] %}
{% endif %}
<body>
<script>
    document.body.classList.add('with-js');
</script>
{% if page_image is defined %}
    <div id="background-header" class="background" style="background-image: url({{ page_image | image(600, 600) | static_url }});"></div>
    <div id="background-footer" class="background" style="background-image: url({{ page_image | image(600, 600) | static_url }});"></div>
{% endif %}
<div id="page">
    <nav id="nav-primary">
        <a id="site-title" href="{{ '/index.html' | url }}" title="{{ site.configuration.title }}">{{ site.configuration.title }}</a>
        <div id="search" data-betty-search-index="{{ '/search-index.json' | url }}">
            <div class="overlay-controls">
                <span class="overlay-control overlay-close" title="{% trans %}Exit the search{% endtrans %}">{% trans %}Exit the search{% endtrans %}</span>
            </div>
            <form>
                {% set search_keywords_example_person_name = site.ancestry.people.values() | map(attribute='name') | first | default(none) %}
                {% if search_keywords_example_person_name %}
                    {% set search_keywords_example -%}
                        {% trans example = person_macros.name_label(search_keywords_example_person_name, embedded=True) | striptags -%}
                            E.g. "{{ example }}"
                        {%- endtrans %}
                    {%- endset %}
                {% endif %}
                <input id="search-query" type="search"{% if search_keywords_example is defined %} placeholder="{{ search_keywords_example | escape }}"{% endif %} />
                <label for="search-query" title="Search">Search</label>
            </form>
            <section id="search-expanded">
                <p id="search-instructions">
                    {% trans -%}
                        Use <kbd>↑</kbd> and <kbd>↓</kbd> to navigate results, or <kbd>esc</kbd> to exit the search. Search again with <kbd>s</kbd>.
                    {%- endtrans %}
                </p>
                <div id="search-results-twilight">
                    <div id="search-results-container"></div>
                </div>
            </section>
        </div>
        <div id="nav-sections" class="nav-primary-expandable">
            <h2 class="nav-primary-action">{% trans %}Menu{% endtrans %}</h2>
            <div class="nav-primary-expanded">
                <ul class="nav-secondary">
                    {% if site.ancestry.people | length > 0 %}
                        <li><a href="{{ '/person/index.html' | url }}">{% trans %}People{% endtrans %}</a></li>
                    {% endif %}
                    {% if site.ancestry.events | length > 0 %}
                        <li><a href="{{ '/event/index.html' | url }}">{% trans %}Timeline{% endtrans %}</a></li>
                    {% endif %}
                    {% if site.ancestry.places | length > 0 %}
                        <li><a href="{{ '/place/index.html' | url }}">{% trans %}Places{% endtrans %}</a></li>
                    {% endif %}
                    {% if site.ancestry.sources | length > 0 %}
                        <li><a href="{{ '/source/index.html' | url }}">{% trans %}Sources{% endtrans %}</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
        {% if page_resource is defined and site.configuration.multilingual %}
            <div id="nav-locale" class="nav-primary-expandable">
                <h2 class="nav-primary-action">{% trans %}Language{% endtrans %}</h2>
                <div class="nav-primary-expanded">
                    <ul class="nav-secondary">
                    {% set ns = namespace(available_locales=[]) %}
                    {% for available_locale in site.configuration.locales %}
                        {% set available_locale_data = site.configuration.locales[available_locale].alias | locale_get_data %}
                        {% do ns.available_locales.append((available_locale, available_locale_data.get_display_name())) %}
                    {% endfor %}
                    {% for available_locale, available_locale_name in ns.available_locales | sort(attribute='1') %}
                        <li><a href="{{ page_resource | url(locale=available_locale) }}" hreflang="{{ available_locale }}" lang="{{ available_locale }}" rel="alternate">{{ available_locale_name }}</a></li>
                    {% endfor %}
                    </ul>
                </div>
            </div>
        {% endif %}
    </nav>
    <div id="content">
        {% if page_title is defined %}
            <h1>{{ page_title }}</h1>
        {% endif %}
        {% block page_content %}{% endblock %}
        {% if page_resource is has_links %}
            {% set links = page_resource.links | rejectattr('label', 'none') | list %}
            {% set links = links | select_localizeds(include_unspecified=true) | list + links | selectattr('locale', 'none') | list %}
            {% if links | length > 0 %}
                <section id="external-links">
                    <h2>
                        {% trans %}External links{% endtrans %}
                        {% with url = page_resource | url ~ '#external-links'%}
                            {% include 'permalink.html.j2' %}
                        {% endwith %}
                    </h2>
                    <ul>
                    {% for link in links %}
                        <li>
                            <a href="{{ link.url }}"{% if link.locale is not none %} hreflang="{{ link.locale }}"{% endif %}{% if link.relationship is not none %} rel="{{ link.relationship }}"{% endif %}{% if link.media_type is not none %} type="{{ link.media_type }}"{% endif %}>{{ link.label }}</a>
                            {% if link.description is not none %}
                                <div class="meta">{{ link.description | escape }}</div>
                            {% endif %}
                        </li>
                    {% endfor %}
                    </ul>
                </section>
            {% endif %}
        {% endif %}
        {% if citer | length > 0 %}
            <section id="references">
                <h2>
                    {% trans %}References{% endtrans %}
                    {% with url = page_resource | url ~ '#references'%}
                        {% include 'permalink.html.j2' %}
                    {% endwith %}
                </h2>
                <ol>
                {% for number, citation in citer %}
                    <li id="reference-{{ number }}" class="reference">{% include 'label/citation.html.j2' %}</li>
                {% endfor %}
                </ol>
            </section>
        {% endif %}
    </div>
    <footer>
        {% include 'footer.html.j2' %}
    </footer>
</div>
</body>
</html>
