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

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

{% block app_content %}{% spaceless %}
<div class="device-detail">
    <div class="device-detail__head">
        <h2 class="device-detail__title">{{ device_object }}</h2>
        {% with device_object.resume as resume %}
            <div class="device-detail__stats stats">
                <div class="stats__cell">
                    <div><i class="h5 bi bi-bar-chart-fill"></i></div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Total file size" %}</small></div>
                    <h3 class="fw-bold mb-0 fs-5">{{ resume.filesize|filesizeformat }}</h3>
                </div>
                <div class="stats__cell">
                    <div><i class="h5 bi bi-folder"></i></div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Directories" %}</small></div>
                    <h3 class="fw-bold mb-0 fs-5">{{ resume.directories }}</h3>
                </div>
                <div class="stats__cell">
                    <div><i class="h5 bi bi-film"></i></div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Medias" %}</small></div>
                    <h3 class="fw-bold mb-0 fs-5">{{ resume.mediafiles }}</h3>
                </div>
                <div class="stats__cell">
                    <div><i class="h5 bi bi-balloon"></i></div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Created" %}</small></div>
                    <h3 class="fw-bold mb-0 fs-5">
                        <abbr class="text-decoration-none" title="{{ device_object.created_date }}">
                            {{ device_object.created_date|date:"SHORT_DATE_FORMAT" }}
                        </abbr>
                    </h3>
                </div>
                <div class="stats__cell">
                    <div><i class="h5 bi bi-activity"></i></div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Last update" %}</small></div>
                    <h3 class="fw-bold mb-0 fs-5">
                        <abbr class="text-decoration-none" title="{{ resume.last_media_update }}">
                            {{ resume.last_media_update|date:"SHORT_DATE_FORMAT" }}
                        </abbr>
                    </h3>
                </div>
                <div class="stats__cell">
                    <div><i class="h5 bi bi-hdd-fill"></i></div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Disk total" %}</small></div>
                    <h3 class="fw-bold mb-0 fs-5">{{ resume.disk_total|filesizeformat }}</h3>
                </div>
                <div class="stats__cell">
                    <div><i class="h5 bi bi-hdd"></i></div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Disk free" %}</small></div>
                    <h3 class="fw-bold mb-0 fs-5">{{ resume.disk_free|filesizeformat }}</h3>
                </div>
                <div class="stats__cell">
                    <div>
                        {% show_occupancy_svg device_object resume=resume %}
                    </div>
                    <div><small class="text-muted sm-2 fw-normal">{% trans "Occupancy" %}</small></div>
                    {% comment %}<h3 class="fw-bold mb-0 fs-5">{{ resume.filesize|filesizeformat }}</h3>{% endcomment %}
                </div>
            </div>
        {% endwith %}
    </div>
    <div class="device-detail__directories directory-list">
        <div class="btn-toolbar w-100 justify-content-between pb-2 mb-2"
             role="toolbar" aria-label="Device toolbar">
            <div class="btn-group btn-group-sm" role="group"
                 aria-label="Device navigation">
                <a class="btn btn-secondary"
                   href="{% url "django_deovi:device-tree" device_slug=device_object.slug %}">
                    <i class="bi bi-folder me-1"></i>
                    Device tree
                </a>
            </div>
        </div>

        {% for directory_object in object_list %}
        <div class="directory-list__item">
            <div class="card">
                <div class="card-body">
                    <a href="{{ directory_object.get_absolute_url }}"
                        class="directory-list__title stretched-link">
                        {% if directory_object.title %}
                            {{ directory_object.title }}
                        {% else %}
                            {{ directory_object.directory_name }}
                        {% endif %}
                    </a>
                </div>

                {% with directory_object.resume as resume %}
                    {% if directory_object.cover %}
                        {% media_thumb directory_object.cover "200x296" format="JPEG" as cover_thumb %}
                        <img class="card-img-top" src="{{ cover_thumb.url }}" alt="">
                    {% else %}
                        <svg class="card-img-top" width="197" height="100%" xmlns="http://www.w3.org/2000/svg" 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 %}

                    <div class="card-footer">
                        <div class="directory-list__medias col-md-auto">
                            <i class="bi bi-film me-1"></i>
                            {{ resume.mediafiles }}
                        </div>
                        <div class="directory-list__size col">
                            {{ resume.filesize|filesizeformat }}
                            <i class="bi bi-bar-chart-fill ms-1"></i>
                        </div>
                    </div>
                {% endwith %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% include "django_deovi/pagination.html" %}
</div>
{% endspaceless %}{% endblock app_content %}
