{% extends "base.html" %}
{% block title %}Slot fuer SuS anlegen — Admin{% endblock %}
{% block content %}

<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>Slot fuer einen SuS anlegen</h1>
    <a href="{{ url_for('admin.slot_uebersicht') }}" class="btn btn-secondary">&larr; Slot-Uebersicht</a>
</div>

{% if not profile %}
<div class="card" style="background:var(--error-bg); border-left: 4px solid var(--danger);">
    <strong>Keine aktiven SuS-Profile.</strong>
    <a href="{{ url_for('admin.profile_liste') }}">Erst ein Profil anlegen.</a>
</div>
{% elif not drucker_liste %}
<div class="card" style="background:var(--error-bg); border-left: 4px solid var(--danger);">
    <strong>Keine Drucker eingerichtet.</strong>
</div>
{% else %}

<div class="card">
    <form method="post" style="display: grid; gap: 1rem;">

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div>
                <label style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem;">
                    SuS-Profil *
                </label>
                <select name="profil_id" required
                        style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;">
                    <option value="">— waehlen —</option>
                    {% for p in profile %}
                    <option value="{{ p.id }}" {% if vor_profil == p.id %}selected{% endif %}>
                        {{ tier_emoji(p.tier) }} {{ p.vorname }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem;">
                    Drucker *
                </label>
                <select name="drucker_id" required
                        style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;">
                    <option value="">— waehlen —</option>
                    {% for d in drucker_liste %}
                    <option value="{{ d.id }}" {% if vor_drucker == d.id %}selected{% endif %}>
                        {{ d.name }} ({{ d.modell }}){% if not d.freigegeben %} 🔒 gesperrt{% endif %}
                    </option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div>
                <label style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem;">
                    Start *
                </label>
                <input type="datetime-local" name="start_zeit" required step="900"
                       value="{{ default_start.strftime('%Y-%m-%dT%H:%M') }}"
                       style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;">
            </div>
            <div>
                <label style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem;">
                    Ende *
                </label>
                <input type="datetime-local" name="ende_zeit" required step="900"
                       value="{{ default_ende.strftime('%Y-%m-%dT%H:%M') }}"
                       style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;">
            </div>
        </div>

        <div>
            <label style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem;">
                Notiz (optional)
            </label>
            <input type="text" name="notiz" maxlength="200"
                   placeholder="z.B. 'Druck ueber Nacht', 'Lina ist heute krank, ich starte fuer sie'"
                   style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem;">
        </div>

        <div style="background: var(--info-bg); padding: 0.6rem 0.8rem; border-radius: 4px; font-size: 0.85rem; color: var(--text);">
            <strong>Hinweis:</strong> Du kannst auch fuer SuS reservieren, die noch nicht freigeschaltet
            sind, und auch fuer gesperrte Drucker (du bekommst dann eine Warnung).
        </div>

        <div style="display: flex; justify-content: space-between;">
            <a href="{{ url_for('admin.slot_uebersicht') }}" class="btn btn-secondary">Abbrechen</a>
            <button class="btn btn-primary">Slot anlegen</button>
        </div>
    </form>
</div>

{% endif %}

{% endblock %}