{% extends "base.html" %}

{% block title %}Meine Lizenzen{% endblock %}

{% block content %}
<section class="panel">
    <h1>Meine Lizenzen</h1>
    <p>Hier sehen Sie Ihre aktiven und abgelaufenen Lizenzinformationen.</p>
</section>

<section class="grid">
    {% if licenses %}
        {% for item in licenses %}
        <article class="card">
            <h3>{{ item.plan }} Lizenz</h3>
            <p><strong>Schule:</strong> {{ item.school_name }}</p>
            <p><strong>Lizenzschluessel:</strong> {{ item.license_key }}</p>
            <p><strong>Status:</strong> {{ item.status }}</p>
            <p><strong>Gueltig bis:</strong> {{ item.valid_until }}</p>
        </article>
        {% endfor %}
    {% else %}
        <article class="card">
            <h3>Keine Lizenzen vorhanden</h3>
            <p>Aktuell sind noch keine Lizenzen hinterlegt.</p>
        </article>
    {% endif %}
</section>

<style>
.panel { margin-bottom: 1rem; }
.grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
.card p { margin-top: 0.35rem; }
</style>
{% endblock %}