{% extends "layout.html" %}
{% set active = 'tasks' %}
{% block page_title %}{{ task.title }} – AzA Intern{% endblock %}
{% block content %}
<div class="page-header">
  <h2>{{ task.title }}</h2>
  <div>
    <a href="/tasks/{{ task.id }}/edit" class="btn btn-secondary">Bearbeiten</a>
    <a href="/tasks" class="btn btn-secondary">Zurück</a>
  </div>
</div>

<div class="card">
  <p><strong>Status:</strong> {{ task.status }} &nbsp;|&nbsp;
     <strong>Priorität:</strong> {{ task.priority }} &nbsp;|&nbsp;
     <strong>Kategorie:</strong> {{ task.category or '–' }}</p>
  <p><strong>Zugewiesen:</strong> {{ task.assigned_username or '–' }} &nbsp;|&nbsp;
     <strong>Fällig:</strong> {{ task.due_date or '–' }}</p>
  <p><strong>Erstellt von:</strong> {{ task.creator_username }} &nbsp;|&nbsp;
     <strong>Aktualisiert:</strong> {{ task.updated_at }}</p>
  {% if tags %}
  <p><strong>Tags:</strong> {% for tag in tags %}<span class="tag">{{ tag }}</span>{% endfor %}</p>
  {% endif %}
  {% if task.description %}
  <hr style="margin:1rem 0;border:none;border-top:1px solid #cbd5e1">
  <p>{{ task.description }}</p>
  {% endif %}
</div>

<div class="card">
  <h3>Dateien zur Aufgabe</h3>
  {% set zone_id = 'task-' ~ task.id ~ '-upload' %}
  {% set task_id = task.id %}
  {% set show_meta = false %}
  {% include "partials/upload_zone.html" with context %}

  {% if task_files %}
  <table style="margin-top:1rem">
    <thead>
      <tr>
        <th>Dateiname</th>
        <th>Grösse</th>
        <th>Hochgeladen</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="task-files-list-{{ task.id }}">
      {% for f in task_files %}
      <tr data-file-id="{{ f.id }}">
        <td>{{ f.original_filename }}</td>
        <td>{{ (f.size_bytes / 1024)|round(1) }} KB</td>
        <td>{{ f.created_at }} ({{ f.uploader }})</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 style="margin-top:1rem" id="task-files-table-{{ task.id }}">
    <thead>
      <tr>
        <th>Dateiname</th>
        <th>Grösse</th>
        <th>Hochgeladen</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="task-files-list-{{ task.id }}"></tbody>
  </table>
  {% endif %}
  <p class="empty-state" id="task-files-empty-{{ task.id }}" {% if task_files %}hidden{% endif %}>Noch keine Dateien zu dieser Aufgabe.</p>
</div>

<div class="card">
  <div class="page-header" style="margin-bottom:0.75rem">
    <h3>Dokumente zur Aufgabe</h3>
    <a href="/documents/new?task_id={{ task.id }}" class="btn btn-sm btn-primary">Neues Dokument zu dieser Aufgabe</a>
  </div>
  {% if task_documents %}
  <table>
    <thead>
      <tr><th>Titel</th><th>Kategorie</th><th>Geändert</th><th></th></tr>
    </thead>
    <tbody>
      {% for d in task_documents %}
      <tr>
        <td>{{ d.title }}</td>
        <td>{{ d.category or '–' }}</td>
        <td>{{ d.updated_at }} ({{ d.creator_username }})</td>
        <td><a href="/documents/{{ d.id }}" class="btn btn-sm btn-primary">Öffnen</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty-state">Noch keine Dokumente zu dieser Aufgabe.</p>
  {% endif %}
</div>

<div class="card">
  <h3>Kommentare</h3>
  {% if comments %}
  <ul class="comment-list">
    {% for c in comments %}
    <li>
      <div class="comment-meta">{{ c.username }} – {{ c.created_at }}</div>
      {{ c.comment }}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="empty-state">Noch keine Kommentare.</p>
  {% endif %}
  <form method="post" action="/tasks/{{ task.id }}/comment" style="margin-top:1rem">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="form-group">
      <label for="comment">Neuer Kommentar</label>
      <textarea id="comment" name="comment" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Kommentar hinzufügen</button>
  </form>
</div>
{% endblock %}

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