{% 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', share=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', share=token) }}">{{ current.label }}</a></span>
            {% for crumb in listing.breadcrumb %}
              <span><a href="{{ url_for('fileshare.browse', share=token, path=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', share=token,
                       path=(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="paths" value="{{ entry.relative }}"><span class="sr-only">auswählen</span></label></td>
                  {% endif %}
                  {# Symbol und Name in einer Zeile: der Zeilenumbruch dazwischen
                     liess den Ordner aussehen wie zwei halbe Zeilen. #}
                  <td class="file-cell">
                    {{ icon('folder', size=15) }}
                    <a href="{{ url_for('fileshare.browse', share=token, path=entry.relative) }}">{{ entry.name }}</a>
                  </td>
                  {# An der Stelle der Dateigrösse: wie viel liegt darin. #}
                  <td class="numeric faint fs-sm">
                    {%- if entry.entries is not defined or entry.entries < 0 -%}
                      &ndash;
                    {%- elif entry.entries >= 500 -%}
                      500+ Einträge
                    {%- elif entry.entries == 1 -%}
                      1 Eintrag
                    {%- else -%}
                      {{ entry.entries }} Einträge
                    {%- endif -%}
                  </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="paths" 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, path=entry.relative) }}"
                              data-fill-Pruefung="{{ url_for('fileshare.signature_state', token=token, path=entry.relative) }}"
                              data-fill-Kind="{{ entry.preview_kind }}"
                              data-fill-Pfad="{{ entry.relative }}"
                              data-fill-Name="{{ entry.name }}"
                              {% if current_user.has('fileshare.export') %}data-fill-Download="{{ url_for('fileshare.download', token=token, path=entry.relative) }}"{% endif %}>
                        {{ icon('file-text', size=15) }} {{ entry.name }}
                      </button>
                    {% else %}
                      {% if current_user.has('fileshare.export') %}
                        <a class="link-icon"
                           href="{{ url_for('fileshare.download', token=token, path=entry.relative) }}">
                          {{ icon('file-text', size=15) }} {{ entry.name }}
                        </a>
                      {% else %}
                        {# Ohne Exportrecht bleibt der Name Text: es gibt hier
                           nichts zu holen, und ein toter Link waere Spott. #}
                        <span class="link-icon faint">
                          {{ icon('file-text', size=15) }} {{ entry.name }}
                        </span>
                      {% endif %}
                    {% 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, path=entry.relative) }}"
                              data-fill-Pruefung="{{ url_for('fileshare.signature_state', token=token, path=entry.relative) }}"
                              data-fill-Kind="{{ entry.preview_kind }}"
                              data-fill-Pfad="{{ entry.relative }}"
                              data-fill-Name="{{ entry.name }}"
                              {% if current_user.has('fileshare.export') %}data-fill-Download="{{ url_for('fileshare.download', token=token, path=entry.relative) }}"{% endif %}
                              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.stem }}"
                              data-fill-Endung="{{ entry.suffix or '' }}"
                              aria-label="Umbenennen">{{ icon('pencil', size=15) }}</button>
                    {% endif %}
                    {% if current_user.has('fileshare.export') %}
                      <a class="btn btn--sm btn--ghost"
                         href="{{ url_for('fileshare.download', token=token, path=entry.relative) }}"
                         aria-label="Herunterladen">{{ icon('download', size=15) }}</a>
                    {% endif %}
                  </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="path" 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="path" 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>
    {# Drei Anzeigen, eine je Art. Ein Rahmen für alles zeigte ein Foto vom
       iPad in Originalgrösse (also einen Ausschnitt) und ein PDF auf iPadOS
       nur als Standbild -- Formularfelder liessen sich nicht anfassen. #}
    <div class="modal__body modal__body--flush" data-viewer
         {# Ohne das Recht zum Ausfuellen zeigt die Vorschau das Dokument so,
            wie es ist -- mit seinen eigenen Marken, ohne Eingabefelder. #}
         data-viewer-formulare="{{ '1' if current_user.has('fileshare_pdf.view') else '' }}"
         data-viewer-pdfjs="{{ asset_url('vendor/pdfjs/pdf.min.js') }}"
         data-viewer-pdflib="{{ asset_url('vendor/pdflib/pdf-lib.min.js') }}"
         data-viewer-konto="{{ current_user.username }}"
         data-viewer-zeuge="{{ '1' if signature_witness else '0' }}"
         data-viewer-zeit="{{ serverzeit }}"
         data-viewer-ordnerliste="{{ verzeichnisse | tojson }}">
      <div class="viewer">
        <div class="viewer__stage" data-viewer-bildbuehne hidden>
          <img class="viewer__img" alt="" data-viewer-bild>
        </div>
        <div class="viewer__pdf" data-viewer-pdf hidden>
          {# Zwei Ebenen: aussen ein normaler Kasten, der sich die Hoehe mit
             Leiste und Speicherzeile teilt, innen der absolute Scrollbereich,
             den pdf.js verlangt. #}
          <div class="viewer__pdfscroll" data-viewer-pdfscroll>
            <div class="pdfViewer" data-viewer-pdfseiten></div>
          </div>
        </div>
        <iframe class="file-preview" title="Vorschau" data-viewer-rahmen
                src="about:blank" referrerpolicy="same-origin" hidden></iframe>
        {# Gefragt wird erst, wenn gespeichert werden soll -- vorher waere es
           eine Zeile Formular über jeder Bildvorschau. Und nur, wer Formulare
           ablegen darf, sieht sie überhaupt. #}
        {% if current_user.has('fileshare_pdf.create') %}
        {# Unterschreiben: Name tippen, mit dem Finger zeichnen, ins Dokument
           setzen. Der Name daneben ist eine Angabe des Unterschreibenden – wie
           auf Papier; wer abgelegt hat, steht im Änderungsprotokoll. #}
        <div class="viewer__sign" data-viewer-unterschriftpanel hidden>
          <div class="viewer__signfelder">
            <label class="viewer__feld">
              <span class="field__label">Vorname</span>
              <input class="input" data-viewer-vorname autocomplete="off">
            </label>
            <label class="viewer__feld">
              <span class="field__label">Nachname</span>
              <input class="input" data-viewer-nachname autocomplete="off">
            </label>
          </div>
          <canvas class="viewer__signpad" data-viewer-signpad width="700" height="200"
                  aria-label="Unterschriftsfeld"></canvas>
          <div class="viewer__signaktionen">
            <span class="fs-xs faint" data-viewer-signhinweis></span>
            <button class="btn btn--sm btn--ghost" type="button" data-viewer-signleeren>Leeren</button>
            <button class="btn btn--sm btn--ghost" type="button" data-viewer-signabbrechen>Abbrechen</button>
            <button class="btn btn--sm btn--primary" type="button" data-viewer-signsetzen>
              Unterschrift setzen
            </button>
          </div>
          <p class="fs-xs faint">
            Nach „Unterschrift setzen“ auf die Stelle im Dokument tippen. Mit Unterschrift
            wird immer abgeschlossen gespeichert – die Felder sind danach gesperrt.
          </p>
        </div>
        <div class="viewer__save" data-viewer-speichernzeile hidden>
          {# Zwei eingebundene Freigaben, ein Formular: die Vorlage liegt in der
             einen, die ausgefüllte Fassung gehört in die andere. #}
          <label class="viewer__feld">
            <span class="field__label">Freigabe</span>
            <select class="select" data-viewer-ziel
                    data-url-vorlage="{{ url_for('fileshare.folders', token='__token__') }}">
              {% for eintrag in mounts %}
                <option value="{{ eintrag.token }}" {% if eintrag.token == token %}selected{% endif %}>
                  {{ eintrag.label }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="viewer__feld">
            <span class="field__label">Ordner</span>
            {# Auswahl statt Eingabe mit Vorschlagsliste: auf einem iPad laesst
               sich ein <datalist> kaum bedienen -- das Freigabefeld daneben
               zeigt, wie es sein soll. #}
            <select class="select" data-viewer-ordner>
              <option value="">Wurzelverzeichnis der Freigabe</option>
              {% for eintrag in verzeichnisse %}
                <option value="{{ eintrag }}">{{ eintrag }}</option>
              {% endfor %}
            </select>
          </label>
          <label class="viewer__feld">
            <span class="field__label">Dateiname (ohne Endung)</span>
            <input class="input" data-viewer-name autocomplete="off">
          </label>
          <label class="viewer__feld">
            <span class="field__label">Speichern als</span>
            {# Zwei Wege, beide gewollt: weiter ausfüllbar (das Bild wird das
               Aussehen des Knopfes und lässt sich später austauschen) oder
               abgeschlossen (alle Felder werden Teil der Seite). #}
            {# Nur, was das Recht hergibt: "weiter ausfüllbar" hängt an
               PDF-Formulare/Bearbeiten, "abgeschlossen" an Anlegen. Wer nur
               anlegen darf, sieht eine Zeile statt einer Auswahl. #}
            <select class="select" data-viewer-modus>
              {% if current_user.has('fileshare_pdf.edit') %}
                <option value="formular">Formular – weiter ausfüllbar</option>
              {% endif %}
              <option value="fertig">Abgeschlossen – Felder gesperrt</option>
            </select>
          </label>
          {# Haken über den Knöpfen und beides rechts: gelesen wird die Zeile von
             links nach rechts (wohin, wie es heißt, wie gespeichert), und die
             Entscheidung steht am Ende. #}
          <div class="viewer__saveaktionen">
            <label class="check" data-viewer-ersetzenfeld>
              <input type="checkbox" data-viewer-ersetzen>
              <span>Vorhandene ersetzen</span>
            </label>
            <div class="viewer__saveknoepfe">
              <button class="btn btn--sm btn--ghost" type="button" data-viewer-abbrechen>
                Abbrechen
              </button>
              <button class="btn btn--sm btn--primary" type="button" data-viewer-jetzt>
                Speichern
              </button>
            </div>
          </div>
        </div>
        {% endif %}
        {# Das Ergebnis der Pruefung steht über der Leiste – wer eine
           unterschriebene Fassung öffnet, soll es sehen, bevor er liest. #}
        <p class="viewer__pruefung" data-viewer-pruefung hidden></p>
        <div class="viewer__bar" data-viewer-leiste hidden>
          <button class="btn btn--sm btn--ghost" type="button" data-viewer-zoom="aus"
                  aria-label="Verkleinern">{{ icon('minus', size=15) }}</button>
          <button class="btn btn--sm btn--ghost" type="button" data-viewer-zoom="fit">Anpassen</button>
          <button class="btn btn--sm btn--ghost" type="button" data-viewer-zoom="ein"
                  aria-label="Vergrössern">{{ icon('plus', size=15) }}</button>
          <span class="viewer__hint fs-xs faint" data-viewer-hinweis></span>
        </div>
      </div>
    </div>
    <div class="modal__footer">
      {% if current_user.has('fileshare.export') %}
        <a class="btn btn--sm" data-fill-target="Download" data-fill-as="href" href="#" download>
          {{ icon('download', size=15) }} Herunterladen
        </a>
      {% endif %}
      {% if current_user.has('fileshare_pdf.create') %}
        <button class="btn btn--sm" type="button" data-viewer-unterschreiben hidden>
          {{ icon('pencil', size=15) }} Unterschreiben
        </button>
        <button class="btn btn--sm" type="button" data-viewer-speichern hidden
                data-url="{{ url_for('fileshare.save_form', token=token) }}">
          {{ icon('save', size=15) }} Ausgefüllt speichern
        </button>
      {% endif %}
      <button class="btn btn--primary" type="button" data-dialog-close>Schließen</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="path" data-fill-target="Pfad" value="">
      <div class="modal__body">
        {{ field('name', 'Neuer Name (ohne Endung)', required=True,
                 attrs='data-fill-target="Name"') }}
        <p class="fs-xs faint">
          Die Endung <code data-fill-target="Endung"></code> bleibt, wie sie ist --
          eine Datei ohne passende Endung öffnet auf der Freigabe nichts mehr.
          Umbenannt wird dort direkt; einen Papierkorb gibt es nicht.
        </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 %}