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

{% block panel_title %}Biblioteka mediów{% endblock %}
{% block heading %}Biblioteka mediów{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Obrazy i pliki wysyłane do serwisu - {{ total_count }} plików, {{ total_size_mb }} MB.</p>{% endblock %}
{% block actions %}<a class="btn-ghost" href="{% url 'panel:settings:obrazy' %}">Ustawienia obrazu</a>{% endblock %}

{% block content %}

<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">Wyślij pliki</h2>
      <p class="help">
        Można wskazać kilka plików naraz. Obrazy są zmniejszane, dostają miniaturę
        i wersje responsywne według zakładki Ustawienia obrazu. Plik o zawartości,
        która już jest w bibliotece, zostaje rozpoznany jako kopia
        ({{ site.get_media_duplicate_check_display|lower }}).
      </p>
    </div>
    <form method="post" enctype="multipart/form-data" novalidate class="space-y-4">
      {% csrf_token %}
      {% include 'panel/partials/form.html' with form=upload_form %}
      <button class="btn-primary" type="submit">Wyślij</button>
    </form>
  </div>
</section>

<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">Katalogi</h2>
      <p class="help">Katalog porządkuje pliki w bibliotece. Usunięcie katalogu nie kasuje plików.</p>
    </div>

    {% if folders %}
      <ul class="flex flex-wrap gap-2">
        {% for folder in folders %}
          <li class="flex items-center gap-2 border border-slate-200 px-3 py-1.5 text-sm dark:border-slate-800">
            <a class="font-medium hover:text-brand-600" href="?folder={{ folder.pk }}">{{ folder.name }}</a>
            <span class="text-xs text-slate-400">{{ folder.files_count }}</span>
            <a class="text-xs text-slate-400 hover:text-brand-600" href="{% url 'panel:medialib:folder_edit' folder.pk %}">edytuj</a>
            <form method="post" action="{% url 'panel:medialib:folder_delete' folder.pk %}"
                  data-confirm="Usunąć katalog {{ folder.name }}?">
              {% csrf_token %}
              <button class="text-xs text-red-500 hover:text-red-700" type="submit">usuń</button>
            </form>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="help">Nie ma jeszcze żadnego katalogu.</p>
    {% endif %}

    <form method="post" action="{% url 'panel:medialib:folder_create' %}" novalidate
          class="grid gap-4 border-t border-slate-200 pt-4 sm:grid-cols-3 dark:border-slate-800">
      {% csrf_token %}
      {% for field in folder_form %}{% include 'panel/partials/field.html' %}{% endfor %}
      <div class="sm:col-span-3"><button class="btn-ghost" type="submit">Dodaj katalog</button></div>
    </form>
  </div>
</section>

<form method="get" class="flex flex-wrap gap-2">
  <input class="input max-w-xs" type="search" name="q" value="{{ filters.q }}" placeholder="Szukaj w nazwie i opisie">
  <select class="input max-w-[10rem]" name="kind">
    <option value="">Wszystkie rodzaje</option>
    {% for value, label in kinds %}
      <option value="{{ value }}" {% if filters.kind == value %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <select class="input max-w-[12rem]" name="folder">
    <option value="">Wszystkie katalogi</option>
    <option value="brak" {% if filters.folder == 'brak' %}selected{% endif %}>Bez katalogu</option>
    {% for folder in folders %}
      <option value="{{ folder.pk }}" {% if filters.folder == folder.pk|stringformat:"s" %}selected{% endif %}>{{ folder.name }}</option>
    {% endfor %}
  </select>
  <select class="input max-w-[12rem]" name="tag">
    <option value="">Wszystkie etykiety</option>
    {% for tag in tags %}
      <option value="{{ tag.pk }}" {% if filters.tag == tag.pk|stringformat:"s" %}selected{% endif %}>{{ tag.name }} ({{ tag.files_count }})</option>
    {% endfor %}
  </select>
  <label class="flex items-center gap-2 border border-slate-200 px-3 text-sm dark:border-slate-800">
    <input type="checkbox" name="kopie" value="1" {% if filters.kopie == '1' %}checked{% endif %}
           class="h-4 w-4 border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-950">
    <span>Tylko kopie{% if duplicate_count %} ({{ duplicate_count }}){% endif %}</span>
  </label>
  <button class="btn-ghost" type="submit">Filtruj</button>
  {% if filters.q or filters.kind or filters.folder or filters.tag or filters.kopie %}<a class="btn-ghost" href="{% url 'panel:medialib:index' %}">Wyczyść</a>{% endif %}
</form>

<form method="post" action="{% url 'panel:medialib:bulk' %}" class="space-y-4">
  {% csrf_token %}

  <section class="card overflow-hidden">
    <div class="grid grid-cols-2 gap-4 p-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
      {% for item in page_obj %}
        <article class="flex flex-col border border-slate-200 dark:border-slate-800">
          <label class="flex items-center gap-2 border-b border-slate-200 px-2 py-1.5 text-xs dark:border-slate-800">
            <input type="checkbox" name="selected" value="{{ item.pk }}"
                   class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-950">
            <span class="truncate">{{ item.get_kind_display }}</span>
          </label>

          <a href="{{ item.url }}" target="_blank" rel="noopener"
             class="flex h-32 items-center justify-center overflow-hidden bg-slate-50 dark:bg-slate-900/60">
            {% if item.preview_url %}
              <img src="{{ item.preview_url }}" alt="{{ item.alt|default:item.name }}" class="h-full w-full object-cover">
            {% else %}
              <span class="text-xs font-semibold uppercase text-slate-400">.{{ item.extension|default:"plik" }}</span>
            {% endif %}
          </a>

          <div class="flex flex-1 flex-col gap-1 p-2 text-xs">
            <span class="truncate font-medium" title="{{ item.name }}">{{ item.name }}</span>
            <span class="text-slate-400">{{ item.size_label }}{% if item.dimensions %} &middot; {{ item.dimensions }}{% endif %}</span>
            <span class="text-slate-400">{{ item.folder.name|default:"bez katalogu" }}</span>
            {% if item.checksum in duplicated %}
              <a href="?kopie=1" class="w-fit bg-amber-100 px-1.5 py-0.5 font-medium text-amber-800 dark:bg-amber-900/50 dark:text-amber-200">kopia</a>
            {% endif %}
            {% if item.tags.all %}
              <span class="flex flex-wrap gap-1">
                {% for tag in item.tags.all %}
                  <a href="?tag={{ tag.pk }}" class="border border-slate-200 px-1.5 py-0.5 text-slate-500 hover:border-brand-500 hover:text-brand-600 dark:border-slate-800">{{ tag.name }}</a>
                {% endfor %}
              </span>
            {% endif %}
            <div class="mt-auto flex flex-wrap gap-2 pt-2">
              <a class="text-brand-600 hover:underline" href="{% url 'panel:medialib:file_edit' item.pk %}">Edytuj</a>
              {% if item.is_image and item.width and item.extension != 'svg' %}
                <a class="text-brand-600 hover:underline" href="{% url 'panel:medialib:file_crop' item.pk %}">Kadruj</a>
              {% endif %}
              <button type="submit" formaction="{% url 'panel:medialib:file_delete' item.pk %}"
                      class="text-red-500 hover:underline"
                      data-confirm="Usunąć plik {{ item.name }}?">Usuń</button>
            </div>
          </div>
        </article>
      {% empty %}
        <div class="col-span-full py-12 text-center">
          <p class="font-medium text-slate-600 dark:text-slate-300">Biblioteka jest pusta.</p>
          <p class="mx-auto mt-1 max-w-lg text-sm text-slate-500 dark:text-slate-400">
            Pliki wyślesz formularzem u góry strony - można zaznaczyć kilka naraz. Obrazy
            zostaną od razu zmniejszone i przeliczone według zakładki Ustawienia obrazu.
          </p>
        </div>
      {% endfor %}
    </div>

    {% if page_obj.paginator.num_pages > 1 %}
      <nav class="flex items-center justify-between gap-4 border-t border-slate-200 px-4 py-3 text-sm dark:border-slate-800">
        <span class="text-slate-500 dark:text-slate-400">Strona {{ page_obj.number }} z {{ page_obj.paginator.num_pages }}</span>
        <div class="flex gap-2">
          {% if page_obj.has_previous %}<a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.previous_page_number }}">Poprzednia</a>{% endif %}
          {% if page_obj.has_next %}<a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.next_page_number }}">Następna</a>{% endif %}
        </div>
      </nav>
    {% endif %}
  </section>

  {% if page_obj %}
    <section class="card">
      <div class="card-body flex flex-wrap items-end gap-2">
        <div>
          <label class="label" for="bulk-folder">Katalog docelowy</label>
          <select class="input mt-1 max-w-[14rem]" id="bulk-folder" name="folder">
            <option value="">Bez katalogu</option>
            {% for folder in folders %}<option value="{{ folder.pk }}">{{ folder.name }}</option>{% endfor %}
          </select>
        </div>
        <button class="btn-ghost" type="submit" name="action" value="move">Przenieś zaznaczone</button>
        <div>
          <label class="label" for="bulk-tags">Etykiety</label>
          <input class="input mt-1 max-w-[14rem]" id="bulk-tags" name="tags" type="text" placeholder="zima, zespół">
        </div>
        <button class="btn-ghost" type="submit" name="action" value="tag">Dodaj etykiety</button>
        <button class="btn-ghost" type="submit" name="action" value="untag">Zdejmij etykiety</button>
        <button class="btn-ghost" type="submit" name="action" value="rebuild">Przelicz obrazy</button>
        <button class="btn-ghost" type="submit" name="action" value="renditions">Przelicz wersje</button>
        <button class="btn-danger" type="submit" name="action" value="delete"
                data-confirm="Usunąć zaznaczone pliki?">Usuń zaznaczone</button>
      </div>
    </section>
  {% endif %}
</form>
{% endblock %}