{% extends "base.html" %}
{% block body %}
{% include "navigation.html" %}
<div class="main-container">
    <div class="full-width">
    {% if parent_titles_ | length > 1 %}
        <div class="breadcrumbs">
        {% for title in parent_titles_ %}
            {% if title == parent_titles_ | last %}
                <div class="breadcrumbs-current"> {{ title | e }} </div>
            {% else %}
                <a class="breadcrumbs-link" href="{{ parent_links_[loop.index0]|e }}">{{ title|e }}</a>
                <i class="breadcrumbs-divider"></i>
            {% endif %}
        {% endfor %}
        </div>
    {% endif %}
    {% if not place_after %}
        <div class="user-text text-before">
            {% include user_content_ %}
        </div>
    {% endif %}

    {% if albums_|length > 0 %}
        <ul class="child-album-list">
            {% for title, url, thumbnail in albums_ %}
                <li class="child-album-item">
                    <div class="child-album-container">
                        <a class="child-album-link" href="{{ url }}">
                            {% if thumbnail %}
                            <img class="child-album-thumbnail" alt="album {{ title }}" src="{{ thumbnail }}"/>
                            {% else %}
                            <img class="child-album-thumbnail" alt="album {{ title }}"src="{{root_}}/_assets_/images/folder.svg"/>
                            {% endif %}
                        </a>
                    </div>
                    <div class="child-album-title">
                        <p>{{ title }}</p>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
    {% if thumbnails_|length > 0 %}
        <ul class="thumbnail-list">
            {% for title, url, thumbnail in thumbnails_ %}
            <li class="thumbnail-item">
                <div class="thumbnail-container">
                    <a class="thumbnail-link" href="{{ url }}">
                        <img class="thumbnail-image" src="{{ thumbnail }}"/>
                    </a>
                    <p class="thumbnail-title">{{ title }}</p>
                </div>
            </li>
            {% endfor %}
        </ul>

    {% endif %}
    {% if place_after %}
        <div class="user-text text-after">
            {% include user_content_ %}
        </div>
    {% endif %}
    </div>
</div>

{% include "footer.html" %}

<script type="text/javascript">
    const vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    const max_columns = {{ max_heights_ | length }};
    const padding = {{ thumbnail_padding_ }};
    const heights = {{ max_heights_ | safe }};
    const counts = {{ image_counts_ | safe }};

    document.addEventListener('DOMContentLoaded', function() {
        let root = document.documentElement;
        const list_width = 80;
        root.style.setProperty('--list-width', `${list_width}vw`);
        root.style.setProperty('--thumbnail-padding', `${padding}vw`);
        for (let c=1; c<=max_columns; c++ ) {
            const k = c-1;
            const width = (list_width - (c+1) * padding) / c;
            let height = width * heights[k] + padding * (1 + counts[k]);
            height = Math.ceil(1.015 * height) + 2 * padding;
            root.style.setProperty(`--list-height${c}`, `${height}vw`);
            root.style.setProperty(`--thumbnail-width${c}`, `${width}vw`);
        }
    });
</script>

{% endblock body %}
