{% extends "base.html" %}
{% load django_bootstrap5 %}
{% load pictures %}
{% load humanize %}
{% block title %}File details{% endblock title %}

{% block main_content %}

  <div class="row">

    <div class="col-lg-9 col-sm-12">
      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">{{ file.filetype|capfirst }} {{ file.title }}</h5>
            </div>
            <div class="card-body">
              {% render_file file.original img_alt=file.title img_loading="lazy" img_class="img-fluid" lg=9 sm=12 %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Sidebar start -->
    <div class="col-sm-12 col-lg-3">
      <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">File Information</h5>
                </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">Title</dt>
                    <dd class="col-sm-9">{{ file.title }}</dd>

                    <dt class="col-sm-3">Download</dt>
                    <dd class="col-sm-9"><a class="btn btn-primary btn-sm" href="{{ file.original.url }}"><i class="fas fa-download"></i> download</a> ({{ file.file_size|intcomma }} bytes {{ file.mimetype }})</dd>

                    <dt class="col-sm-3 text-truncate">UUID</dt>
                    <dd class="col-sm-9">{{ file.uuid }}</dd>

                    <dt class="col-sm-3">Uploader</dt>
                    <dd class="col-sm-9"><a href="{{ file.uploader.get_absolute_url }}">{{ file.uploader }}</a></dd>

                    <dt class="col-sm-3">CC Attribution</dt>
                    <dd class="col-sm-9">{{ file.attribution }}</dd>

                    <dt class="col-sm-3">CC Source</dt>
                    <dd class="col-sm-9"><a href="{{ file.source }}">{{ file.source }}</a></dd>

                    <dt class="col-sm-3">CC License</dt>
                    <dd class="col-sm-9">{{ file.get_license_display }}</dd>

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

                    <dt class="col-sm-3 text-truncate">Original Filename</dt>
                    <dd class="col-sm-9">{{ file.original_filename }}</dd>

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

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

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

      {% if file.filetype == "image" %}
      <div class="row">
        <div class="col mb-3">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Image Versions</h5>
            </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">Original File</dt>
                    <dd class="col-sm-9"><b>{{ file.width }}*{{ file.height }}</b> (width*height), Aspect Ratio <b>{{ file.aspect_ratio }}</b></dd>
                    {% for ratio, filetypes in file.get_image_versions.items %}
                      {% for filetype, sizes in filetypes.items %}
                      <dt class="col-sm-3 text-truncate">{{ filetype }} ({{ ratio|default:"Original AR" }})</dt>
                    <dd class="col-sm-9">
                        {% for width, height, picurl in sizes %}
                          {% if picurl %}
                          <a href="{{ picurl }}">{{ width }}*{{ height }}</a>
                          {% else %}
                          {{ width }}*{{ height }}
                          {% endif %}
                        {% endfor %}
                    </dd>
                    {% endfor %}
                    {% endfor %}
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endif %}


      <!-- Albums -->
      <div class="row">
        <div class="col mb-3">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Albums</h5>
            </div>
            <div class="card-body" style="max-height:25em; overflow-y:auto;">
              {% for album in file.active_albums_list %}
                <p><a href="{% url 'albums:album_detail' album_uuid=album.uuid %}">{{ album }}</a></p>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>

      <!-- Tags -->
      <div class="row">
        <div class="col mb-3">
          <div id="tag-card" class="card">
            <div class="card-header">
                <h5 class="card-title">Tags<a class="btn btn-secondary btn-xs float-end" href="{% url 'files:file_tags' file_uuid=file.uuid %}">Tag Details</a></h5>
            </div>
            <div class="card-body" style="max-height:25em; overflow-y:auto;">
              {% if file.tags.exists %}
              <p>
                {% if request.user.is_curator %}
                {% for tag in file.tags.all %}
                  {% if request.user.uuid in tag.tagger_uuids %}
                  <form method="POST" action="{% url 'files:file_tag_delete' file_uuid=file.pk tag_slug=tag.slug %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-secondary btn-sm" value="DELETE">{{ tag }} <i class="fas fa-minus"></i></button>
                  </form>
                  {% else %}
                  <form method="POST" action="{% url 'files:file_tag_create' file_uuid=file.pk %}" class="d-inline">
                    {% csrf_token %}
                    <input type="hidden" name="tags" value='"{{ tag.name }}"'>
                    <button type="submit" class="btn btn-secondary btn-sm">{{ tag }} <i class="fas fa-plus"></i></button>
                  </form>
                  {% endif %}
                {% endfor %}
                {% endif %}
              </p>
              <p><i>Click to tag or untag an existing tag. You can also <a href="{% url 'files:file_tag_create' file_uuid=file.uuid %}">add new tags</a></i></p>
              {% else %}
              <p>No tags yet. <a class="btn btn-success" href="{% url 'files:file_tag_create' file_uuid=file.uuid %}"><i class="fas fa-plus"></i> Add new tags</a></p>
              {% endif %}
            </div>
          </div>
        </div>
      </div>


      <!-- thumbnails -->
      <div class="row">
        <div class="col mb-3">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Thumbnails</h5>
            </div>
            <div class="card-body">
              <div class="row justfiy-content-between">
                <div class="col-12">
                  <table class="table table-small">
                    <thead>
                      <tr><th>Ratio</th><th>Filetype</th><th>Sizes</th></tr>
                    </thead>
                    <tbody>
                    {% for ratio, filetypes in file.get_thumbnail_versions.items %}
                    {% for filetype, sizes in filetypes.items %}
                      <tr>
                        <td>{{ ratio|default:"Default" }}</td>
                        <td>{{ filetype }}</td>
                        <td>{% for width, height, picurl in sizes %}<a href="{{ picurl }}">{{ width }}*{{ height }}</a> {% endfor %}</td>
                      </tr>
                    {% endfor %}
                    {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {% if file.filetype == "image" and file.exif %}
      <div class="row">
        <div class="col mb-3">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Image Exif Data</h5>
            </div>
            <div class="card-body">
              <div class="row justfiy-content-between">
                <div class="col-12">
                  <pre>{{ file.exif | pprint }}</pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endif %}

    </div>
  </div>

{% endblock main_content %}
