{% extends "django_deovi/base.html" %}
{% load i18n smart_image %}

{% block head_title %}{{ directory_object }} - {{ block.super }}{% endblock head_title %}

{% block app_content %}{% spaceless %}
<div class="directory-detail">
    <div class="directory-detail__head">
        <h2 class="directory-detail__title">{{ directory_object }}</h2>

        {% if directory_object.cover %}
            <a href="{{ directory_object.cover.url }}" class="directory-detail__cover" target="_blank">
                {% media_thumb directory_object.cover "400x600" crop="center" format="JPEG" as cover_thumb %}
                <img class="card-img-top" src="{{ cover_thumb.url }}" alt="">
            </a>
        {% else %}
            <svg xmlns="http://www.w3.org/2000/svg"
                 class="card-img-top" width="400" height="300" role="img"
                 aria-label="Card image cap" preserveAspectRatio="xMidYMid slice"
                 focusable="false">
                <title>Card image cap</title>
                <rect width="100%" height="100%" fill="#868e96"></rect>
            </svg>
        {% endif %}

        {% with directory_object.resume as resume %}
            <div class="directory-detail__stats stats">
                <div class="stats__cell stats__cell--full">
                    <div class="stats__icon"><i class="bi bi-folder"></i></div>
                    <div class="stats__label">{% trans "Path" %}</div>
                    <div class="stats__value user-select-all">{{ directory_object.path }}</div>
                </div>
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-device-hdd"></i></div>
                    <div class="stats__label">{% trans "Device" %}</div>
                    <div class="stats__value user-select-all">{{ directory_object.device }}</div>
                </div>
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-activity"></i></div>
                    <div class="stats__label">{% trans "Last update" %}</div>
                    <div class="stats__value">
                        <abbr class="text-decoration-none" title="{{ resume.last_media_update }}">
                            {{ resume.last_media_update|date:"SHORT_DATE_FORMAT" }}
                        </abbr>
                    </div>
                </div>
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-balloon"></i></div>
                    <div class="stats__label">{% trans "Created" %}</div>
                    <div class="stats__value">
                        <abbr class="text-decoration-none" title="{{ device_object.created_date }}">
                            {{ device_object.created_date|date:"SHORT_DATE_FORMAT" }}
                        </abbr>
                    </div>
                </div>
                {% if resume.first_air_date %}
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-broadcast-pin"></i></div>
                    <div class="stats__label">{% trans "Release" %}</div>
                    <div class="stats__value">
                        <abbr class="text-decoration-none" title="">
                            {{ resume.first_air_date|slice:":4" }}
                        </abbr>
                    </div>
                </div>
                {% endif %}
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-bar-chart-fill"></i></div>
                    <div class="stats__label">{% trans "Total size" %}</div>
                    <div class="stats__value">{{ resume.filesize|filesizeformat }}</div>
                </div>
                {% if resume.number_of_seasons %}
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-bar-chart-steps"></i></div>
                    <div class="stats__label">{% trans "Seasons" %}</div>
                    <div class="stats__value">{{ resume.number_of_seasons }}</div>
                </div>
                {% endif %}
                {% if resume.number_of_episodes %}
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-film"></i></div>
                    <div class="stats__label">{% trans "Episodes" %}</div>
                    <div class="stats__value">{{ resume.number_of_episodes }}</div>
                </div>
                {% endif %}
                <div class="stats__cell">
                    <div class="stats__icon"><i class="bi bi-file-earmark-bar-graph"></i></div>
                    <div class="stats__label">{% trans "Stored" %}</div>
                    <div class="stats__value">{{ resume.mediafiles }}</div>
                </div>
                {% if resume.genres %}
                <div class="stats__cell stats__cell--full">
                    <div class="stats__icon"><i class="bi bi-tags-fill"></i></div>
                    <div class="stats__label">{% trans "Genres" %}</div>
                    <div class="stats__value">{{ resume.genres|join:", " }}</div>
                </div>
                {% endif %}
            </div>
        {% endwith %}
    </div>
    <div class="directory-detail__mediafiles mediafiles">
        {% for mediafile_object in object_list %}
        <div class="mediafiles__item">
            <div class="d-flex w-100 justify-content-between">
                <h3 class="h6 mb-1 user-select-all">{{ mediafile_object.filename }}</h3>
                <small>{{ mediafile_object.filesize|filesizeformat }}</small>
            </div>
            <div class="d-flex w-100">
                <p class="mb-0 me-4">
                    <abbr class="sm-2 text-decoration-none" title="Stored on">
                        <i class="bi bi-download me-1"></i> {{ mediafile_object.stored_date }}
                    </abbr>
                </p>
                <p class="mb-0">
                    <abbr class="sm-2 text-decoration-none" title="Loaded on">
                        <i class="bi bi-node-plus me-1"></i> {{ mediafile_object.loaded_date }}
                    </abbr>
                </p>
            </div>
        </div>
        {% endfor %}
        {% include "django_deovi/pagination.html" %}
    </div>
</div>
{% endspaceless %}{% endblock app_content %}
