{% extends "base.html" %}
{% block title %}AutoKanban{% endblock %}
{% block content %}
<div class="container">
    {% if login_result == 'success' %}
    <div id="toast" class="alert success" style="background:#e6ffe6; color:#2C3E50;">Admin-Login erfolgreich!</div>
    {% elif login_result == 'fail' %}
    <div id="toast" class="alert error" style="background:#ffe6e6; color:#D93025;">Admin-Login fehlgeschlagen!</div>
    {% endif %}
    {% if print_result == 'success' %}
    <div id="toast-print" class="alert success" style="background:#e6ffe6; color:#2C3E50;">Druck erfolgreich!</div>
    {% elif print_result == 'not_allowed' %}
    <div id="toast-print" class="alert error" style="background:#ffe6e6; color:#D93025;">Drucken nicht erlaubt!</div>
    {% elif print_result and print_result.startswith('error:') %}
    <div id="toast-print" class="alert error" style="background:#ffe6e6; color:#D93025;">Druckfehler: {{
        print_result[6:] }}</div>
    {% endif %}
    {% if preview_image %}
    <div style="text-align:center; margin:1em 0;">
        <strong>Vorschau Druckkarte:</strong><br>
        <img src="/{{ preview_image }}" alt="Karten-Vorschau"
            style="border:1px solid #ccc; max-width:100%; background:#fff;">
    </div>
    {% endif %}
    <div id="admin-login" style="display:none; margin-bottom:1em;">
        <form method="post" action="/admin/login" style="display:flex; gap:0.5em; align-items:center;">
            <input type="password" name="password" placeholder="Admin-Passwort" required>
            <button type="submit">Einloggen</button>
            <button type="button"
                onclick="document.getElementById('admin-login').style.display='none'">Schließen</button>
        </form>
    </div>
    <div class="alert" style="background:#fff8e1; border-left:4px solid #fbc02d; color:#333; margin-bottom:1.5em;">
        <strong>Was ist Kanban?</strong><br>
        Kanban ist eine Methode zur Visualisierung und Steuerung von Aufgaben. Jede Aufgabe wird als Karte dargestellt
        und wandert durch verschiedene Status wie "Offen", "Genehmigt" und "Gedruckt". So behalten alle den Überblick
        über den aktuellen Stand der Arbeit.
    </div>
    <form method="post" action="/submit">
        <input type="text" name="user" placeholder="Ihr Name..." required style="margin-bottom:0.5em;">
        <input type="text" name="content" placeholder="Neue Aufgabe eingeben..." required style="margin-bottom:0.5em;">
        <label for="priority">Priorität: <span id="prio-value">3</span></label>
        <input type="range" name="priority" id="priority" min="1" max="5" value="3"
            oninput="document.getElementById('prio-value').innerText = this.value">
        <div style="display:flex; justify-content:space-between; font-size:0.95em; margin-bottom:1em;">
            <span>Niedrig</span><span>Hoch</span>
        </div>
        <button type="submit">Aufgabe hinzufügen</button>
    </form>
    <h2>Aufgaben</h2>
    {% for task in tasks %}
    <div class="task-card {{ task.status }}">
        <strong>{{ task.content }}</strong><br>
        <span style="font-size:0.95em;">Von: {{ task.user }}</span><br>
        <span style="font-size:0.95em;">Priorität: {{ task.priority }}</span><br>
        <em>Status: {{ 'Offen' if task.status == 'pending' else ('Genehmigt' if task.status == 'approved' else
            'Gedruckt') }}</em>
        <div class="actions">
            {% if task.status == 'pending' and admin %}
            <form method="post" action="/approve/{{ task.id }}" style="display:inline;">
                <button type="submit">Genehmigen</button>
            </form>
            {% endif %}
            {% if task.status == 'approved' %}
            <form method="post" action="/print/{{ task.id }}" style="display:inline;">
                <button type="submit">Drucken</button>
            </form>
            {% endif %}
            {% if task.status == 'printed' and admin %}
            <form method="post" action="/print/{{ task.id }}" style="display:inline;">
                <button type="submit">Erneut drucken</button>
            </form>
            {% endif %}
        </div>
    </div>
    {% else %}
    <p>Keine Aufgaben vorhanden.</p>
    {% endfor %}
    <h2>Letzte genehmigte Aufgaben</h2>
    {% for task in approved_tasks %}
    <div class="task-card approved">
        <strong>{{ task.content }}</strong><br>
        <span style="font-size:0.95em;">Von: {{ task.user }}</span><br>
        <span style="font-size:0.95em;">Priorität: {{ task.priority }}</span><br>
    </div>
    {% else %}
    <p>Keine genehmigten Aufgaben vorhanden.</p>
    {% endfor %}
</div>
<script>
    // Ensure prio-value updates on page load
    document.addEventListener('DOMContentLoaded', function () {
        var prio = document.getElementById('priority');
        if (prio) {
            document.getElementById('prio-value').innerText = prio.value;
        }
        // Toast auto-hide
        var toast = document.getElementById('toast');
        if (toast) {
            setTimeout(function () { toast.style.display = 'none'; }, 2500);
        }
        var toastPrint = document.getElementById('toast-print');
        if (toastPrint) {
            setTimeout(function () { toastPrint.style.display = 'none'; }, 2500);
        }
    });
</script>
{% endblock %}