{% extends 'signage/_layout.html.twig' %}

{% block signage_title %}Gerät anlegen{% endblock %}

{% block signage_javascripts %}
    <script src="{{ asset('js/admin/signage-device.js') }}?v={{ sg_v }}" defer></script>
{% endblock %}

{% block signage_content %}
<a href="{{ path('signage_device_index') }}" class="sg-back"><i class="fas fa-arrow-left"></i>Alle Geräte</a>
<div class="sg-header">
    <div>
        <h1 class="sg-title">Gerät anlegen</h1>
        <div class="sg-subtitle">Danach: Standard-Playlist wählen, Einrichtungscode erzeugen, auf dem Player eintragen.</div>
    </div>
</div>

{% for error in errors %}
    <div class="alert alert-danger sg-flash py-2"><i class="fas fa-exclamation-circle me-1"></i>{{ error }}</div>
{% endfor %}

<form method="post" class="sg-card sg-maxw-760">
    <input type="hidden" name="_token" value="{{ csrf_token('signage_device_new') }}">
    <div class="sg-card-body">
        <div class="sg-form-section">
            <div class="row g-3">
                <div class="col-md-7">
                    <label class="form-label" for="device-name">Name</label>
                    <input type="text" id="device-name" name="name" class="form-control" maxlength="160" required value="{{ values.name }}" placeholder="z. B. Foyer Hallenbad" data-slug-target="#device-key" autofocus>
                </div>
                <div class="col-md-5">
                    <label class="form-label" for="device-key">Gerätekennung</label>
                    <input type="text" id="device-key" name="device_key" class="form-control sg-mono" maxlength="100" required pattern="[A-Za-z0-9_.:\-]{1,100}" value="{{ values.device_key }}" placeholder="signage01">
                </div>
                <div class="col-12 form-text mt-1">Die Kennung meldet das Gerät bei der Einrichtung als <code>device_id</code>; sie lässt sich später nicht ändern.</div>
            </div>
        </div>

        <div class="sg-form-section">
            <div class="sg-form-section-title">Bildschirme</div>
            <div class="sg-choices">
                <div>
                    <input type="radio" class="btn-check" name="mode" id="mode-mirror" value="mirror" {{ values.mode == 'mirror' ? 'checked' }}>
                    <label class="sg-choice" for="mode-mirror"><i class="fas fa-clone"></i><span><strong>Gespiegelt</strong><small>Beide Bildschirme zeigen dasselbe (mirror).</small></span></label>
                </div>
                <div>
                    <input type="radio" class="btn-check" name="mode" id="mode-split" value="split" {{ values.mode == 'split' ? 'checked' }}>
                    <label class="sg-choice" for="mode-split"><i class="fas fa-columns"></i><span><strong>Getrennt</strong><small>Zwei Bildschirme mit eigenem Programm (split).</small></span></label>
                </div>
            </div>
        </div>

        <div class="sg-form-section">
            <label class="form-label" for="device-tz">Zeitzone</label>
            <select name="timezone" id="device-tz" class="form-select sg-maxw-320">
                {% for tz in timezones %}
                    <option value="{{ tz }}" {{ tz == values.timezone ? 'selected' }}>{{ tz }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="sg-card-footer d-flex gap-2">
        <button class="btn btn-primary"><i class="fas fa-check me-1"></i>Anlegen</button>
        <a href="{{ path('signage_device_index') }}" class="btn btn-outline-secondary">Abbrechen</a>
    </div>
</form>
{% endblock %}