{% extends "base.html" %}
{% block title %}Software — Admin{% endblock %}
{% block content %}
<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>Software-Karten</h1>
    <div>
        <a href="{{ url_for('oeffentlich.software') }}" class="btn btn-secondary">Oeffentliche Seite ansehen</a>
        {% if session.admin %}<a href="{{ url_for('admin.admin_logout') }}" class="btn btn-secondary">Admin-Logout</a>
        {% else %}<a href="{{ url_for('profil.cockpit') }}" class="btn btn-secondary">&larr; Cockpit</a>{% endif %}
    </div>
</div>

<!-- Liste -->
<div class="card">
    <h2>Alle Karten</h2>
    {% if karten %}
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Titel</th>
                <th>Slug</th>
                <th>Kategorie</th>
                <th>Sort.</th>
                <th>Plattform</th>
                <th>Hauptlink</th>
                <th>Status</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for k in karten %}
            <tr style="{% if not k.aktiv %}opacity: 0.5;{% endif %}">
                <td style="font-size: 1.4rem;">
                    {%- if k.kategorie == 'app' -%}📱
                    {%- elif k.kategorie == 'generator' -%}🧩
                    {%- else -%}🖥️
                    {%- endif -%}
                </td>
                <td><strong>{{ k.titel }}</strong>
                    <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 0.2rem;">{{ k.kurzbeschreibung }}</div>
                </td>
                <td><code style="font-size: 0.8rem;">{{ k.slug }}</code></td>
                <td>{{ k.kategorie }}</td>
                <td>{{ k.sortierung }}</td>
                <td style="font-size: 0.8rem; color: var(--text-light);">{{ k.plattform or '—' }}</td>
                <td style="font-size: 0.8rem;">
                    {% if k.url %}<a href="{{ k.url }}" target="_blank" rel="noopener noreferrer">↗</a>{% endif %}
                    {% if k.tutorial_url %} <a href="{{ k.tutorial_url }}" target="_blank" rel="noopener noreferrer" title="Tutorial">T↗</a>{% endif %}
                    {% if k.app_store_url %} <a href="{{ k.app_store_url }}" target="_blank" rel="noopener noreferrer" title="App Store"></a>{% endif %}
                    {% if k.play_store_url %} <a href="{{ k.play_store_url }}" target="_blank" rel="noopener noreferrer" title="Google Play">▶</a>{% endif %}
                </td>
                <td>
                    {% if k.aktiv %}<span class="badge badge-anfaenger">aktiv</span>
                    {% else %}<span class="badge">inaktiv</span>{% endif %}
                </td>
                <td>
                    <a href="{{ url_for('admin.software_bearbeiten', karte_id=k.id) }}"
                       class="btn btn-primary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">bearbeiten</a>
                    <form method="post" action="{{ url_for('admin.software_aktiv_toggle', karte_id=k.id) }}" style="display:inline;">
                        <button class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">
                            {% if k.aktiv %}aus{% else %}an{% endif %}
                        </button>
                    </form>
                    <form method="post" action="{{ url_for('admin.software_loeschen', karte_id=k.id) }}" style="display:inline;"
                          onsubmit="return confirm('Karte {{ k.titel }} wirklich loeschen? Das kann nicht rueckgaengig gemacht werden.')">
                        <button class="btn btn-secondary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem; color: var(--danger);">loeschen</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color: var(--text-light);">Noch keine Karten. Leg unten die erste an, oder fuehre die Initial-Migration aus
    (<code>migrations/2026-05-25_software_sektion.py</code>).</p>
    {% endif %}
</div>

<!-- Neue Karte -->
<div class="card">
    <h2>Neue Karte anlegen</h2>
    <form method="post" action="{{ url_for('admin.software_neu') }}" style="display: grid; gap: 0.8rem;">

        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem;">
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Slug (URL-Identifier, klein, mit Bindestrichen) *</label>
                <input type="text" name="slug" required pattern="[a-z0-9-]+"
                       placeholder="z.B. fusion360"
                       style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
            </div>
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Titel *</label>
                <input type="text" name="titel" required
                       placeholder="z.B. Fusion 360"
                       style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
            </div>
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Kategorie *</label>
                <select name="kategorie" required
                        style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                    {% for cat in kategorien %}
                    <option value="{{ cat }}">{{ cat }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div>
            <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Kurzbeschreibung (1-2 Saetze, erscheint auf der Karte) *</label>
            <input type="text" name="kurzbeschreibung" required maxlength="200"
                   placeholder="z.B. Profi-CAD-Software, fuer Schueler kostenlos."
                   style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Hauptlink (Startseite / Download) *</label>
                <input type="url" name="url" required
                       placeholder="https://..."
                       style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
            </div>
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Tutorial-Link (optional)</label>
                <input type="url" name="tutorial_url"
                       placeholder="https://..."
                       style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 0.8rem;">
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Plattform (Klartext)</label>
                <input type="text" name="plattform"
                       placeholder="z.B. Browser oder Windows / macOS / Linux"
                       style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
            </div>
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Sortierung (kleiner = weiter oben)</label>
                <input type="number" name="sortierung" value="100" min="0" max="9999"
                       style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
            </div>
        </div>

        <fieldset style="border: 1px dashed var(--border); padding: 0.8rem; border-radius: 4px;">
            <legend style="font-size: 0.85rem; color: var(--text-light); padding: 0 0.4rem;">Nur bei Apps</legend>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
                <div>
                    <label style="display:block; font-size: 0.85rem; color: var(--text-light);">App Store URL</label>
                    <input type="url" name="app_store_url"
                           placeholder="https://apps.apple.com/..."
                           style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                </div>
                <div>
                    <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Google Play URL</label>
                    <input type="url" name="play_store_url"
                           placeholder="https://play.google.com/..."
                           style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                </div>
            </div>
        </fieldset>

        <div>
            <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Bild-Pfad (relativ zu <code>static/img/software/</code>, optional)</label>
            <input type="text" name="bild_pfad"
                   placeholder="z.B. fusion360.png"
                   style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
            <p style="font-size: 0.8rem; color: var(--text-light); margin-top: 0.3rem;">
                Erst das Bild ueber FTP / SCP nach <code>static/img/software/</code> kopieren, dann den Dateinamen hier eintragen.
            </p>
        </div>

        <div style="display: flex; justify-content: flex-end;">
            <button class="btn btn-primary">Karte anlegen</button>
        </div>
    </form>
</div>

{% endblock %}