{% extends "base.html" %}
{% block title %}{{ karte.titel }} bearbeiten — Admin{% endblock %}
{% block content %}
<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>Karte bearbeiten: {{ karte.titel }}</h1>
    <div>
        <a href="{{ url_for('admin.software_liste') }}" class="btn btn-secondary">&larr; Alle Karten</a>
    </div>
</div>

{# ---- Bild-Sektion ---- #}
<div class="card">
    <h2>Bild</h2>
    <div style="display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap;">
        <div style="flex: 0 0 200px; text-align: center;">
            {% if karte.hat_bild_blob %}
                <img src="{{ url_for('api.software_bild', karte_id=karte.id) }}?v={{ karte.id }}"
                     style="max-width: 200px; max-height: 200px; border-radius: 8px; border: 1px solid var(--border); background: #fff;">
            {% elif karte.bild_pfad %}
                <img src="{{ url_for('static', filename='img/software/' ~ karte.bild_pfad) }}"
                     style="max-width: 200px; max-height: 200px; border-radius: 8px; border: 1px solid var(--border); background: #fff;">
            {% else %}
                <div style="width:200px; height:200px; background:var(--surface-muted); border-radius: 8px; display:flex; align-items:center; justify-content:center; font-size:3rem; color: var(--text-light);">
                    {%- if karte.kategorie == 'app' -%}📱
                    {%- elif karte.kategorie == 'generator' -%}🧩
                    {%- else -%}🖥️
                    {%- endif -%}
                </div>
            {% endif %}
        </div>
        <div style="flex: 1; min-width: 250px;">
            <p style="margin-bottom: 0.8rem; color: var(--text-light);">
                Logo / Screenshot fuer die Karte. Wird auf der oeffentlichen Software-Seite angezeigt.
            </p>
            <a href="{{ url_for('admin.software_bild', karte_id=karte.id) }}" class="btn btn-primary">
                Bild einfuegen / aendern
            </a>
            {% if karte.hat_bild_blob %}
            <form method="post" action="{{ url_for('admin.software_bild_loeschen', karte_id=karte.id) }}" style="display:inline;"
                  onsubmit="return confirm('Bild wirklich loeschen?')">
                <button class="btn btn-secondary" style="color: var(--danger);">Bild loeschen</button>
            </form>
            {% endif %}
        </div>
    </div>
</div>

{# ---- Daten-Sektion ---- #}
<div class="card">
    <h2>Inhalt</h2>
    <form method="post" 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 (unveraenderbar)</label>
                <input type="text" value="{{ karte.slug }}" disabled
                       style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-soft);">
            </div>
            <div>
                <label style="display:block; font-size: 0.85rem; color: var(--text-light);">Titel *</label>
                <input type="text" name="titel" required value="{{ karte.titel }}"
                       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 }}" {% if cat == karte.kategorie %}selected{% endif %}>{{ 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" value="{{ karte.kurzbeschreibung }}"
                   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 value="{{ karte.url }}"
                       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" value="{{ karte.tutorial_url or '' }}"
                       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" value="{{ karte.plattform or '' }}"
                       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="{{ karte.sortierung }}" 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" value="{{ karte.app_store_url or '' }}"
                           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" value="{{ karte.play_store_url or '' }}"
                           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 (Fallback, relativ zu <code>static/img/software/</code>) — meist leer lassen, weil das Crop-Bild oben Vorrang hat
            </label>
            <input type="text" name="bild_pfad" value="{{ karte.bild_pfad or '' }}"
                   style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
        </div>

        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem;">
            <a href="{{ url_for('admin.software_liste') }}" class="btn btn-secondary">Abbrechen</a>
            <button class="btn btn-primary">Aenderungen speichern</button>
        </div>
    </form>
</div>

{% endblock %}