{% extends "base.html" %}
{% block title %}Software{% endblock %}
{% block content %}

{# Kleine, lokale CSS-Erganzungen fuer die Software-Karten.
   Bewusst inline, damit alle Stil-Anpassungen auf einen Blick sichtbar sind.
   Wenn die Site mehr eigene Stile bekommt, ziehen wir sie nach static/. #}
<style>
    .sw-karte {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        text-decoration: none;
        color: inherit;
    }
    .sw-karte .bild-platzhalter {
        height: 110px;
        background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover));
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: var(--text-light);
    }
    .sw-karte img.logo {
        height: 110px;
        width: 100%;
        object-fit: contain;
        background: #fff;
        border-radius: 6px;
        padding: 0.5rem;
        border: 1px solid var(--border);
    }
    .sw-karte h3 { margin: 0; color: var(--primary-dark); }
    .sw-karte .plattform { font-size: 0.8rem; color: var(--text-light); margin-top: -0.2rem; }
    .sw-karte .kurz { font-size: 0.95rem; line-height: 1.45; }
    .sw-karte .btn-reihe {
        margin-top: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding-top: 0.4rem;
    }
    .sw-karte .btn-reihe .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
    .sw-store {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
        border-radius: var(--radius-md);
        background: var(--color-secondary);
        color: #fff;
        text-decoration: none;
    }
    .sw-store:hover { background: #1B2631; }
    .sektion-kopf { margin: 2rem 0 0.8rem; }
    .sektion-kopf:first-of-type { margin-top: 0.5rem; }
    .sektion-kopf h2 { color: var(--text); }
    .sektion-kopf p { color: var(--text-light); font-size: 0.9rem; }
</style>

{# ===========================================================================
   Karten-Makro: wird unten in jeder Sektion verwendet.
   Muss VOR den Aufrufen stehen — Jinja2 mit extends ist da streng.
   =========================================================================== #}
{% macro karte(k) %}
<div class="card sw-karte">
    {# Bild: Crop-Upload (BLOB) > static-Fallback > Emoji-Platzhalter #}
    {% if k.hat_bild_blob %}
        <img src="{{ url_for('api.software_bild', karte_id=k.id) }}" alt="{{ k.titel }}" class="logo">
    {% elif k.bild_pfad %}
        <img src="{{ url_for('static', filename='img/software/' ~ k.bild_pfad) }}" alt="{{ k.titel }}" class="logo">
    {% else %}
        <div class="bild-platzhalter">
            {%- if k.kategorie == 'app' -%}📱
            {%- elif k.kategorie == 'generator' -%}🧩
            {%- else -%}🖥️
            {%- endif -%}
        </div>
    {% endif %}

    <h3>{{ k.titel }}</h3>
    {% if k.plattform %}<div class="plattform">{{ k.plattform }}</div>{% endif %}
    <div class="kurz">{{ k.kurzbeschreibung }}</div>

    <div class="btn-reihe">
        {% if k.url %}
        <a href="{{ k.url }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
            {% if k.kategorie == 'generator' %}Zum Generator ↗{% else %}Zur Software ↗{% endif %}
        </a>
        {% endif %}
        {% if k.tutorial_url %}
        <a href="{{ k.tutorial_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
            Tutorial ↗
        </a>
        {% endif %}
        {% if k.app_store_url %}
        <a href="{{ k.app_store_url }}" target="_blank" rel="noopener noreferrer" class="sw-store">
             App Store
        </a>
        {% endif %}
        {% if k.play_store_url %}
        <a href="{{ k.play_store_url }}" target="_blank" rel="noopener noreferrer" class="sw-store">
            ▶ Google Play
        </a>
        {% endif %}
    </div>
</div>
{% endmacro %}

<h1>Software</h1>
<p style="color: var(--text-light);">
    Diese Programme nutzen wir in der AG. Den Umgang lernst du in den
    <a href="{{ url_for('oeffentlich.lektionen') }}">Lektionen</a> — hier ist nur die Uebersicht.
</p>

{# ---- Sektion: Software ---- #}
{% if gruppen.software %}
<div class="sektion-kopf">
    <h2>Programme</h2>
    <p>Auf Schul-PCs installiert oder im Browser nutzbar.</p>
</div>
<div class="grid">
    {% for k in gruppen.software %}
        {{ karte(k) }}
    {% endfor %}
</div>
{% endif %}

{# ---- Sektion: Apps ---- #}
{% if gruppen.app %}
<div class="sektion-kopf">
    <h2>Handy-Apps</h2>
    <p>Aufs eigene Smartphone laden — QR-Codes zum Scannen folgen.</p>
</div>
<div class="grid">
    {% for k in gruppen.app %}
        {{ karte(k) }}
    {% endfor %}
</div>
{% endif %}

{# ---- Sektion: Generatoren ---- #}
{% if gruppen.generator %}
<div class="sektion-kopf">
    <h2>Online-Generatoren</h2>
    <p>Webseiten, auf denen du fertige 3D-Modelle nach deinen Wuenschen erzeugen kannst — kein CAD noetig.</p>
</div>
<div class="grid">
    {% for k in gruppen.generator %}
        {{ karte(k) }}
    {% endfor %}
</div>
{% endif %}

{# Wenn gar nichts da ist (Migration noch nicht gelaufen?) #}
{% if not gruppen.software and not gruppen.app and not gruppen.generator %}
<div class="card">
    <p>Noch keine Software eingetragen.
    {% if session.admin %}<a href="{{ url_for('admin.software_liste') }}">Im Admin anlegen.</a>{% endif %}
    </p>
</div>
{% endif %}

{% endblock %}