<!doctype html>
<html lang="{{ localizer.locale }}"
      prefix="foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rel: http://purl.org/vocab/relationship/">
<head>
    {% include 'head.html.j2' %}
    <link rel="manifest" href="{{ '/betty.webmanifest' | static_url }}">
    <link rel="stylesheet" href="{{ '/cotton_candy.css' | static_url }}">
    <script src="{{ '/cotton_candy.js' | static_url }}" defer></script>
</head>
<body>
<script>
    document.body.classList.add('with-js');
</script>
<div id="page">
    <nav id="nav-primary">
        <a id="site-title" href="{{ '/index.html' | url }}" title="{{ app.project.configuration.title }}">{{ app.project.configuration.title }}</a>
        <div id="search"
             data-betty-search-configuration="{{ '/search-configuration.json' | static_url }}"
             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 = app.project.ancestry['Person'] | select('public') | map(attribute='name') | first | default(none) %}
                {% if search_keywords_example_person_name %}
                    {% set search_keywords_example -%}
                        {% filter forceescape %}
                            {% trans example = search_keywords_example_person_name.label | localize -%}
                                E.g. "{{ example }}"
                            {%- endtrans %}
                        {% endfilter %}
                    {%- endset %}
                {% endif %}
                <input id="search-query" type="search"{% if search_keywords_example is defined %} placeholder="{{ search_keywords_example }}"{% endif %}>
                <label for="search-query" title="Search">Search</label>
            </form>
            <section id="search-expanded">
                <h2 class="visually-hidden">Search</h2>
                <p id="search-instructions">
                    {% trans shortcut = pgettext('enter-search-shortcut', 's') -%}
                        Use <kbd>↑</kbd> and <kbd>↓</kbd> to navigate results, or <kbd>esc</kbd> to exit the search. Search again with <kbd>{{ shortcut }}</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">
                    {% for entity_type_configuration in app.project.configuration.entity_types.values() | selectattr('generate_html_list') %}
                        <li>
                            <a href="{{ ('/' + entity_type_configuration.entity_type | entity_type_name | camel_case_to_kebab_case + '/index.html') | url }}">
                                {% if 'Event' == entity_type_configuration.entity_type | entity_type_name %}
                                    {% trans %}Timeline{% endtrans %}
                                {% else %}
                                    {{ entity_type_configuration.entity_type.entity_type_label_plural() | localize }}
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% if page_resource is defined and app.project.configuration.locales.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_configuration in app.project.configuration.locales.values() %}
                        {% set available_locale_data = available_locale_configuration.alias | locale_get_data %}
                        {% do ns.available_locales.append((available_locale_configuration.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 }}</div>
                            {% endif %}
                        </li>
                    {% endfor %}
                    </ul>
                </section>
            {% endif %}
        {% endif %}
        {% include 'references.html.j2' %}
    </div>
    <footer>
        {% include 'footer.html.j2' %}
    </footer>
</div>
{% include 'linked-data.html.j2' %}
</body>
</html>
