{% extends 'panel/base.html' %}

{% block panel_title %}Plik biblioteki{% endblock %}
{% block heading %}{{ object.name }}{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Opis pliku w bibliotece mediów.</p>{% endblock %}
{% block actions %}<a class="btn-ghost" href="{% url 'panel:medialib:index' %}">Wróć do biblioteki</a>{% endblock %}

{% block content %}
<div class="grid gap-4 lg:grid-cols-3">
  <form method="post" novalidate class="space-y-4 lg:col-span-2">
    {% csrf_token %}
    <section class="card">
      <div class="card-body space-y-4">
        <div class="space-y-1">
          <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Opis</h2>
          <p class="help">
            Tekst alternatywny czytają czytniki ekranu i wyszukiwarki - warto opisać,
            co widać na obrazie, a nie powtarzać nazwę pliku.
          </p>
        </div>
        {% include 'panel/partials/form.html' %}
      </div>
    </section>

    <div class="card save-bar">
      <div class="card-body flex gap-2">
        {% include "panel/partials/dirty-note.html" %}
        <button class="btn-primary" type="submit">Zapisz zmiany</button>
        <a class="btn-ghost" href="{% url 'panel:medialib:index' %}">Anuluj</a>
      </div>
    </div>
  </form>

  <section class="card">
    <div class="card-body space-y-3">
      <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Plik</h2>

      {% if object.preview_url %}
        <img src="{{ object.preview_url }}" alt="{{ object.alt|default:object.name }}"
             class="w-full border border-slate-200 object-cover dark:border-slate-800">
      {% endif %}

      <dl class="space-y-2 text-sm">
        <div class="flex justify-between gap-3"><dt class="text-slate-500">Rodzaj</dt><dd>{{ object.get_kind_display }}</dd></div>
        <div class="flex justify-between gap-3"><dt class="text-slate-500">Rozmiar</dt><dd>{{ object.size_label }}</dd></div>
        {% if object.dimensions %}
          <div class="flex justify-between gap-3"><dt class="text-slate-500">Wymiary</dt><dd>{{ object.dimensions }}</dd></div>
        {% endif %}
        <div class="flex justify-between gap-3"><dt class="text-slate-500">Wysłano</dt><dd>{{ object.created_at|date:"SHORT_DATETIME_FORMAT" }}</dd></div>
        {% if object.uploaded_by %}
          <div class="flex justify-between gap-3"><dt class="text-slate-500">Kto</dt><dd>{{ object.uploaded_by }}</dd></div>
        {% endif %}
      </dl>

      <div class="space-y-1">
        <p class="label">Adres pliku</p>
        <input class="input" type="text" readonly value="{{ object.url }}"
               data-select-on-click aria-label="Adres pliku">
        <p class="help">Kliknij, aby zaznaczyć - adres wkleja się do treści strony lub wpisu.</p>
      </div>

      {% if duplicates %}
        <div class="border border-amber-300 bg-amber-50 p-3 text-xs dark:border-amber-800 dark:bg-amber-900/30">
          <p class="font-semibold text-amber-800 dark:text-amber-200">Ten plik ma kopie w bibliotece</p>
          <p class="mt-1 text-amber-700 dark:text-amber-300">Ta sama zawartość leży już pod inną nazwą - warto zostawić jedna sztukę.</p>
          <ul class="mt-2 space-y-1">
            {% for twin in duplicates %}
              <li><a class="text-brand-600 hover:underline" href="{% url 'panel:medialib:file_edit' twin.pk %}">{{ twin.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

      {% if renditions %}
        <div class="space-y-1 border-t border-slate-200 pt-3 dark:border-slate-800">
          <p class="label">Wersje responsywne</p>
          <ul class="space-y-1 text-xs text-slate-500 dark:text-slate-400">
            {% for rendition in renditions %}
              <li class="flex justify-between gap-3">
                <a class="hover:text-brand-600" href="{{ rendition.url }}" target="_blank" rel="noopener">{{ rendition.width }} px &middot; {{ rendition.format|upper }}</a>
                <span>{{ rendition.size|filesizeformat }}</span>
              </li>
            {% endfor %}
          </ul>
          <p class="help">Przeglądarka pobiera te wersje, która pasuje do ekranu.</p>
        </div>
      {% endif %}

      <div class="flex flex-wrap gap-2 border-t border-slate-200 pt-3 dark:border-slate-800">
        <a class="btn-ghost !px-3 !py-1 text-xs" href="{{ object.url }}" target="_blank" rel="noopener">Otwórz</a>
        {% if object.is_image and object.width and object.extension != 'svg' %}
          <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:medialib:file_crop' object.pk %}">Kadruj</a>
        {% endif %}
        <form method="post" action="{% url 'panel:medialib:file_delete' object.pk %}"
              data-confirm="Usunąć plik {{ object.name }}?">
          {% csrf_token %}
          <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń plik</button>
        </form>
      </div>
    </div>
  </section>
</div>
{% endblock %}