{% extends "base.html" %}
{% load guardian_tags %}
{% load static %}
{% load django_bootstrap5 %}

{% block extra_head %}
<link type="text/css" rel="stylesheet" href="{% static "css/vendor/splide-sea-green-v4.1.3.min.css" %}">
<link type="text/css" rel="stylesheet" href="{% static "css/splide-custom-album.css" %}">
<script src="{% static "js/vendor/splide-v4.1.3.min.js" %}"></script>
<script src="{% static "js/splide-custom-album.js" %}"></script>
{% endblock extra_head %}
{% block title %}Album details{% endblock title %}

{% block main_content %}

  <div class="row">

    <!-- left block start -->
    <div class="col-sm-12 col-md-2">
      <div class="card">
        <h5 class="card-header">Filter Info</h5>
        <div class="card-body">
          <p class="lead">Showing {{ filter.qs.count }} of {{ album.active_files_list|length }} files in album <i>{{ album.title }}</i>.</p>
        </div>
      </div>
      <br>
      <div class="card">
        <h5 class="card-header">Filter Files</h5>
        <div class="card-body">
          <form method="get">
            <div class="row">
              <div class="btn-group" role="group">
                <a class="btn btn-warning" href="?"><i class="fas fa-times"></i> Clear Filters</a>
                <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i> Submit Query</button>
              </div>
            </div>
            {% bootstrap_form filter.form %}
            <div class="row">
              <div class="btn-group" role="group">
                <a class="btn btn-warning" href="?"><i class="fas fa-times"></i> Clear Filters</a>
                <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i> Submit Query</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- left block end -->

    <!-- main block start -->
    <div class="col-sm-12 col-md-8">
        <div class="card">
          <div class="card-header">
            <div class="row">
            <div class="col-6">
              <h5 class="card-title">{{ album.title }}</h5>
            </div>
            <div class="col-6 d-flex justify-content-end">
              <a class="btn btn-primary" href="{% url 'albums:album_slideshow' album_uuid=album.pk %}{% querystring %}">
                <i class="fa-solid fa-images"></i> Slideshow
              </a>
              &nbsp;
              <a class="btn btn-primary" href="{% url 'albums:album_table' album_uuid=album.pk %}{% querystring %}">
                <i class="fa-solid fa-table-list"></i> Table
              </a>
            </div>
            </div>
          </div>
          <div class="card-body">
            <!-- album detail block -->
            {% block album_detail %}
            {% endblock %}
          </div>
        </div>
    </div>
    <!-- main block end -->

    <!-- right sidebar start -->
    <div class="col-sm-12 col-md-2">
      <!-- album information -->
      <div class="row">
        <div class="col mb-3">
          <div class="card">
            <div class="card-header">
              <div class="row">
                <div class="col-6">
                  <h5 class="card-title">Album Information</h5>
                </div>
                <div class="col-6 d-flex justify-content-end">
                  {% get_obj_perms request.user for album as "album_perms" %}
                  {% if "change_album" in album_perms %}
                  <a class="btn btn-primary" href="{% url 'albums:album_update' album_uuid=album.pk %}">
                    <i class="fa-solid fa-pen-to-square"></i>
                    <small>Edit</small>
                  </a>
                  <a class="btn btn-success" href="{% url 'albums:album_add_files' album_uuid=album.pk %}">
                    <i class="fa-solid fa-plus"></i>
                    <small>Files</small>
                  </a>
                  <a class="btn btn-danger" href="{% url 'albums:album_remove_files' album_uuid=album.pk %}">
                    <i class="fa-solid fa-minus"></i>
                    <small>Files</small>
                  </a>
                  {% endif %}

                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="row justfiy-content-between">
                <div class="col-12">
                  <dl class="row mb-1">
                    <dt class="col-sm-3 text-truncate">UUID</dt>
                    <dd class="col-sm-9">{{ album.uuid }}</dd>

                    <dt class="col-sm-3 text-truncate">Title</dt>
                    <dd class="col-sm-9">{{ album.title }}</dd>

                    <dt class="col-sm-3">Files</dt>
                    <dd class="col-sm-9">
                      <span class="badge bg-secondary">{{ album.active_files_list|length }}</span>
                    </dd>

                    <dt class="col-sm-3">Owner</dt>
                    <dd class="col-sm-9"><a href="{% url 'users:user_profile' user_handle=album.owner.handle %}">{{ album.owner }}</a></dd>

                    <dt class="col-sm-3">Hits</dt>
                    <dd class="col-sm-9">{{ album.hits.count }}</dd>

                    <dt class="col-sm-3">Created</dt>
                    <dd class="col-sm-9">{{ album.created|date:"d/m/y-H:i:s" }}</dd>

                    <dt class="col-sm-3">Updated</dt>
                    <dd class="col-sm-9">{{ album.updated|date:"d/m/y-H:i:s" }}</dd>

                    <dt class="col-sm-3">Description</dt>
                    <dd class="col-sm-9"><p>{{ album.description|default:"n/a" }}</p></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- album statistics -->
      <div class="row">
        <div class="col mb-3">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Album Statistics</h5>
            </div>
            <div class="card-body">
              <div class="row justfiy-content-between">
                <div class="col-12">
                  <dl class="mb-1">
                    <dt>Licenses:</dt>
                    <dd>
                      <span class="badge bg-success">License_name ({{ album.active_files|length }}/100%)</span>
                      <span class="badge bg-secondary">License_name ({{ album.active_files|length }}/100%)</span>
                      <span class="badge bg-primary">License_name ({{ album.active_files|length }}/100%)</span>
                    </dd>

                    <dt>Attributions:</dt>
                    <dd>
                      <span class="badge bg-primary">{{ album.owner }} ({{ album.active_files|length }}/100%)</span>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

{% endblock main_content %}