{% extends "layout.html" %}
{% set active = 'files' %}
{% block page_title %}Dateien – AzA Intern{% endblock %}
{% block content %}
<div class="page-header">
  <h2>Dateien</h2>
</div>

<div class="card">
  <h3>Datei hochladen</h3>
  {% set zone_id = 'files-upload-zone' %}
  {% include "partials/upload_zone.html" with context %}
</div>

<form method="get" class="search-bar">
  <select name="category">
    <option value="">Alle Kategorien</option>
    {% for c in categories %}
    <option value="{{ c }}" {% if filter_category == c %}selected{% endif %}>{{ c }}</option>
    {% endfor %}
  </select>
  <button type="submit" class="btn btn-secondary">Filtern</button>
</form>

{% if files %}
<table>
  <thead>
    <tr>
      <th>Dateiname</th>
      <th>Kategorie</th>
      <th>Beschreibung</th>
      <th>Grösse</th>
      <th>Hochgeladen</th>
      <th>Tags</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="files-list-body">
    {% for f in files %}
    <tr data-file-id="{{ f.id }}">
      <td>{{ f.original_filename }}</td>
      <td>{{ f.category or '–' }}</td>
      <td>{{ f.description or '–' }}</td>
      <td>{{ (f.size_bytes / 1024)|round(1) }} KB</td>
      <td>{{ f.created_at }} ({{ f.uploader }})</td>
      <td>{% for tag in f.tags %}<span class="tag">{{ tag }}</span>{% endfor %}</td>
      <td class="file-actions">
        <a href="/files/{{ f.id }}/download" class="btn btn-sm btn-primary">Download</a>
        {% if f.original_filename.lower().endswith('.odt') %}
        <a href="/files/{{ f.id }}/edit" class="btn btn-sm btn-secondary">Im Browser bearbeiten</a>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<table>
  <thead>
    <tr>
      <th>Dateiname</th>
      <th>Kategorie</th>
      <th>Beschreibung</th>
      <th>Grösse</th>
      <th>Hochgeladen</th>
      <th>Tags</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="files-list-body"></tbody>
</table>
{% endif %}
<p class="empty-state" id="files-empty-state" {% if files %}hidden{% endif %}>Noch keine Dateien hochgeladen.</p>
{% endblock %}

{% block extra_scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var w = document.getElementById("files-upload-zone");
    if (w) {
      w.dataset.listTarget = "files-list-body";
      w.dataset.emptyState = "files-empty-state";
    }
  });
</script>
<script src="/static/js/upload.js"></script>
{% endblock %}