{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import field, empty_state, alert, pill, modal %}

{% block page_title %}Dateifreigaben{% endblock %}
{% block page_sub %}{{ mounts | length }} eingebundene Freigabe(n){% endblock %}

{% block topbar_extra %}
  {% if current_user.has('fileshare.edit') %}
    <a class="btn btn--sm" href="{{ url_for('fileshare.mappings') }}">
      {{ icon('settings', size=15) }} Zuordnungen
    </a>
  {% endif %}
{% endblock %}

{% block content %}
{% if not mounts %}
  {{ empty_state('Keine Freigaben eingebunden',
     'Einbindungen entstehen nach einer Anmeldung gegen den Verzeichnisdienst und richten sich
     nach Ihrer Gruppenmitgliedschaft.', 'folder') }}
{% else %}
  {% if error %}{{ alert(error, 'danger') }}{% endif %}

  <div class="tabs">
    {% for mount in mounts %}
      <a class="tab {{ 'is-active' if mount.token == token else '' }}"
         href="{{ url_for('fileshare.browse', freigabe=mount.token) }}">{{ mount.label }}</a>
    {% endfor %}
  </div>

  {% if listing %}
    {% set current = (mounts | selectattr('token', 'equalto', token) | list | first) %}
    <section class="card">
      <div class="card__header">
        <div class="flex-1">
          <nav class="breadcrumb">
            <span><a href="{{ url_for('fileshare.browse', freigabe=token) }}">{{ current.label }}</a></span>
            {% for crumb in listing.breadcrumb %}
              <span><a href="{{ url_for('fileshare.browse', freigabe=token, pfad=crumb.relative) }}">{{ crumb.name }}</a></span>
            {% endfor %}
          </nav>
          <div class="card__sub mono fs-xs">{{ current.unc }}</div>
        </div>
        <span class="fs-xs faint">
          Einbindung endet <span data-relative-time="{{ current.expires_at }}">{{ current.expires_at | dt }}</span>
        </span>
        {% if current_user.has('fileshare.create') %}
          <button class="btn btn--sm" type="button" data-dialog-open="folder-new">
            {{ icon('plus', size=14) }} Ordner
          </button>
        {% endif %}
      </div>

      <form method="post" action="{{ url_for('fileshare.delete', token=token) }}" id="entries-form">
        <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
        <input type="hidden" name="parent" value="{{ listing.relative }}">
        <div class="table-wrap">
          <table class="table table--compact">
            <thead>
              <tr>
                {% if current_user.has('fileshare.delete') %}<th style="width:40px"></th>{% endif %}
                <th>Name</th>
                <th class="numeric">Grösse</th>
                <th>Geändert</th>
                <th class="actions">Aktion</th>
              </tr>
            </thead>
            <tbody>
              {% if listing.breadcrumb %}
                <tr>
                  {% if current_user.has('fileshare.delete') %}<td></td>{% endif %}
                  <td colspan="4">
                    <a class="link-icon" href="{{ url_for('fileshare.browse', freigabe=token,
                       pfad=(listing.breadcrumb[-2].relative if listing.breadcrumb | length > 1 else '')) }}">
                      {{ icon('chevron-right', size=14) }} eine Ebene höher
                    </a>
                  </td>
                </tr>
              {% endif %}
              {% for entry in listing.directories %}
                <tr>
                  {% if current_user.has('fileshare.delete') %}
                    <td><label class="check"><input type="checkbox" name="pfade" value="{{ entry.relative }}"><span class="sr-only">auswählen</span></label></td>
                  {% endif %}
                  <td>
                    {{ icon('folder', size=15) }}
                    <a href="{{ url_for('fileshare.browse', freigabe=token, pfad=entry.relative) }}">{{ entry.name }}</a>
                  </td>
                  <td class="numeric faint">&ndash;</td>
                  <td class="fs-sm">{{ entry.modified | dt }}</td>
                  <td class="actions"></td>
                </tr>
              {% endfor %}
              {% for entry in listing.files %}
                <tr>
                  {% if current_user.has('fileshare.delete') %}
                    <td><label class="check"><input type="checkbox" name="pfade" value="{{ entry.relative }}"><span class="sr-only">auswählen</span></label></td>
                  {% endif %}
                  {# Der Name ist die grösste Fläche der Zeile -- er soll auch
                     das Naheliegende tun. Was sich anzeigen lässt, öffnet die
                     Vorschau; alles andere lädt herunter. #}
                  <td>
                    {% if entry.previewable %}
                      <button class="link-icon file-name" type="button"
                              data-dialog-open="file-preview"
                              data-fill-Src="{{ url_for('fileshare.preview', token=token, pfad=entry.relative) }}"
                              data-fill-Name="{{ entry.name }}"
                              data-fill-Download="{{ url_for('fileshare.download', token=token, pfad=entry.relative) }}">
                        {{ icon('file-text', size=15) }} {{ entry.name }}
                      </button>
                    {% else %}
                      <a class="link-icon"
                         href="{{ url_for('fileshare.download', token=token, pfad=entry.relative) }}">
                        {{ icon('file-text', size=15) }} {{ entry.name }}
                      </a>
                    {% endif %}
                  </td>
                  <td class="numeric fs-sm">{{ entry.size | bytes }}</td>
                  <td class="fs-sm">{{ entry.modified | dt }}</td>
                  <td class="actions">
                    {% if entry.previewable %}
                      <button class="btn btn--sm btn--ghost" type="button"
                              data-dialog-open="file-preview"
                              data-fill-Src="{{ url_for('fileshare.preview', token=token, pfad=entry.relative) }}"
                              data-fill-Name="{{ entry.name }}"
                              data-fill-Download="{{ url_for('fileshare.download', token=token, pfad=entry.relative) }}"
                              aria-label="Vorschau">{{ icon('eye', size=15) }}</button>
                    {% endif %}
                    {% if current_user.has('fileshare.edit') %}
                      <button class="btn btn--sm btn--ghost" type="button"
                              data-dialog-open="file-rename"
                              data-fill-Pfad="{{ entry.relative }}"
                              data-fill-Name="{{ entry.name }}"
                              aria-label="Umbenennen">{{ icon('pencil', size=15) }}</button>
                    {% endif %}
                    <a class="btn btn--sm btn--ghost"
                       href="{{ url_for('fileshare.download', token=token, pfad=entry.relative) }}"
                       aria-label="Herunterladen">{{ icon('download', size=15) }}</a>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% if not listing.directories and not listing.files %}
          {{ empty_state('Leeres Verzeichnis', '', 'folder') }}
        {% endif %}
        {% if current_user.has('fileshare.delete') %}
          <div class="card__footer">
            <button class="btn btn--sm btn--ghost danger-text" type="submit"
                    data-confirm="Die ausgewählten Einträge endgültig löschen? Auf einer Netzwerkfreigabe gibt es keinen Papierkorb."
                    data-confirm-title="Löschen" data-confirm-ok="Löschen">
              Ausgewählte löschen
            </button>
          </div>
        {% endif %}
      </form>
    </section>

    {% if current_user.has('fileshare.create') %}
      <section class="card">
        <div class="card__header">
          <div class="flex-1">
            <div class="card__title">{{ icon('upload', size=17) }} Dateien hochladen</div>
            <div class="card__sub">nach {{ listing.relative or 'Wurzelverzeichnis' }} &middot; max. {{ max_upload_mb }} MB je Datei</div>
          </div>
        </div>
        <form method="post" enctype="multipart/form-data" data-no-guard
              action="{{ url_for('fileshare.upload', token=token) }}">
          <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
          <input type="hidden" name="pfad" value="{{ listing.relative }}">
          <div class="card__body row">
            <input class="input" type="file" name="files" multiple required style="flex:1">
            <button class="btn btn--primary" type="submit" data-busy-label="Lädt ...">Hochladen</button>
          </div>
        </form>
      </section>
    {% endif %}
  {% endif %}
{% endif %}
{% endblock %}

{% block dialogs %}
{% if listing and current_user.has('fileshare.create') %}
  {% call modal('folder-new', 'Ordner anlegen', listing.relative or 'Wurzelverzeichnis', 'narrow') %}
    <form method="post" action="{{ url_for('fileshare.make_directory', token=token) }}">
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <input type="hidden" name="pfad" value="{{ listing.relative }}">
      <div class="modal__body">{{ field('name', 'Name', required=True) }}</div>
      <div class="modal__footer">
        <button class="btn" type="button" data-dialog-close>Abbrechen</button>
        <button class="btn btn--primary" type="submit">Anlegen</button>
      </div>
    </form>
  {% endcall %}
{% endif %}

{% if listing %}
  {# Vorschau im Rahmen statt in einem neuen Tab: der Zusammenhang bleibt
     erhalten, und man ist mit Escape wieder in der Dateiliste. Titel, Quelle
     und Download-Ziel werden beim Öffnen aus dem Auslöser gefüllt -- ein
     Dialog für alle Dateien statt einer je Zeile. #}
  {% call modal('file-preview', 'Vorschau', '', 'wide') %}
    <div class="modal__caption" data-fill-target="Name"></div>
    <div class="modal__body modal__body--flush">
      <iframe class="file-preview" title="Vorschau" data-fill-target="Src" data-fill-as="src"
              src="about:blank" referrerpolicy="same-origin"></iframe>
    </div>
    <div class="modal__footer">
      <a class="btn btn--sm" data-fill-target="Download" data-fill-as="href" href="#" download>
        {{ icon('download', size=15) }} Herunterladen
      </a>
      <button class="btn btn--primary" type="button" data-dialog-close>Schliessen</button>
    </div>
  {% endcall %}
{% endif %}

{% if listing and current_user.has('fileshare.edit') %}
  {% call modal('file-rename', 'Umbenennen', '', 'narrow') %}
    <form method="post" action="{{ url_for('fileshare.rename', token=token) }}">
      <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
      <input type="hidden" name="parent" value="{{ listing.relative }}">
      <input type="hidden" name="pfad" data-fill-target="Pfad" value="">
      <div class="modal__body">
        {{ field('name', 'Neuer Name', required=True, attrs='data-fill-target="Name"') }}
        <p class="fs-xs faint">
          Umbenannt wird auf der Freigabe selbst -- es gibt dort keinen Papierkorb.
        </p>
      </div>
      <div class="modal__footer">
        <button class="btn" type="button" data-dialog-close>Abbrechen</button>
        <button class="btn btn--primary" type="submit">Umbenennen</button>
      </div>
    </form>
  {% endcall %}
{% endif %}
{% endblock %}