{% set summary_media_type_paths = [
    'file-summary.html.j2',
] %}

{% set extended_media_type_paths = [
    'file-extended.html.j2',
] %}

{% if file.media_type %}
    {% do summary_media_type_paths.append('file-summary--' ~ file.media_type.type ~ '.html.j2') %}
    {% do summary_media_type_paths.append('file-summary--' ~ file.media_type.type ~ '--' ~ file.media_type.subtypes | join('---') ~ '.html.j2') %}
    {% if file.media_type.suffix %}
        {% do summary_media_type_paths.append('file-summary--' ~ file.media_type.type ~ '--' ~ file.media_type.subtypes | join('---') ~ '----' ~ file.media_type.suffix ~ '.html.j2') %}
    {% endif %}

    {% do extended_media_type_paths.append('file-extended--' ~ file.media_type.type ~ '.html.j2') %}
    {% do extended_media_type_paths.append('file-extended--' ~ file.media_type.type ~ '--' ~ file.media_type.subtypes | join('---') ~ '.html.j2') %}
    {% if file.media_type.suffix %}
        {% do extended_media_type_paths.append('file-extended--' ~ file.media_type.type ~ '--' ~ file.media_type.subtypes | join('---') ~ '----' ~ file.media_type.suffix ~ '.html.j2') %}
    {% endif %}
{% endif %}

{% set file_hashid = file.id | hashid %}
<div class="file" id="file-{{ file_hashid }}">
    <a href="#file-extended-{{ file_hashid }}" class="file-extended-open file-summary">
        <div class="file-summary">
            {% include summary_media_type_paths | reverse | list %}
        </div>
    </a>
    <div id="file-extended-{{ file_hashid }}" class="file-extended">
        <ul class="file-controls">
            <li><a href="{{ ('betty-static://' ~ file | file) | url }}" title="View original in full">⇔</a></li>
            <li><a href="{{ ('betty-static://' ~ file | file) | url }}" download="{{ file.path.name }}" title="Download this file">⇓</a></li>
            <li><a href="{{ file | url }}" title="More details">ℹ</a></li>
            <li class="file-extended-close"><a href="#file-{{ file_hashid }}" title="Close this file">×</a></li>
            {% if previous_file is defined %}
                <li class="file-nav file-extended-previous"><a href="#file-extended-{{ previous_file.id | hashid }}" title="{{ previous_file.description | localize }}">←</a></li>
            {% endif %}
            {% if next_file is defined %}
                <li class="file-nav file-extended-next"><a href="#file-extended-{{ next_file.id | hashid }}" title="{{ next_file.description | localize }}">→</a></li>
            {% endif %}
        </ul>
        <div class="file-content">
            {% include extended_media_type_paths | reverse | list %}
        </div>
    </div>
</div>