{% extends "base.html" %}

{% block title %}Terminplaner - Inventarsystem{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-11 col-xl-10">
            <section class="p-4 p-md-5 rounded-4 shadow-lg" style="background: linear-gradient(135deg, rgba(15,76,92,0.96), rgba(22,105,122,0.92)); color: #fff;">
                <div class="d-flex flex-column flex-lg-row justify-content-between gap-4 align-items-start align-items-lg-end">
                    <div>
                        <p class="text-uppercase fw-semibold mb-2" style="letter-spacing: .12em; opacity: .8;">Terminplaner</p>
                        <h1 class="display-6 fw-bold mb-3">Reservierungen und Termine übersichtlich verwalten</h1>
                        <p class="lead mb-0" style="max-width: 60ch; opacity: .95;">Erstellen Sie neue Terminreihen, teilen Sie Buchungslinks und öffnen Sie den Kalender für bestehende Reservierungen.</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a class="btn btn-light btn-lg fw-semibold" href="{{ url_for('terminplaner.configure') }}">Neue Planung</a>
                        <a class="btn btn-outline-light btn-lg fw-semibold" href="{{ url_for('terminplan') }}">Kalender öffnen</a>
                    </div>
                </div>
            </section>

            <div class="row g-4 mt-1">
                <div class="col-12 col-md-4">
                    <div class="card h-100 shadow-sm border-0 rounded-4">
                        <div class="card-body p-4">
                            <div class="display-6 mb-3">🗓️</div>
                            <h2 class="h4 fw-bold">Kalender</h2>
                            <p class="mb-4 text-muted">Sehen Sie vorhandene Termine, ihre Auslastung und die aktuellen Reservierungen im Kalender.</p>
                            <a class="btn btn-primary w-100" href="{{ url_for('terminplan') }}">Zum Kalender</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="card h-100 shadow-sm border-0 rounded-4">
                        <div class="card-body p-4">
                            <div class="display-6 mb-3">✍️</div>
                            <h2 class="h4 fw-bold">Neue Planung</h2>
                            <p class="mb-4 text-muted">Erstellen Sie einen neuen Terminplan und verschicken Sie den Buchungslink an Ihre Zielgruppe.</p>
                            <a class="btn btn-outline-primary w-100" href="{{ url_for('terminplaner.configure') }}">Konfiguration öffnen</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="card h-100 shadow-sm border-0 rounded-4">
                        <div class="card-body p-4">
                            <div class="display-6 mb-3">🔗</div>
                            <h2 class="h4 fw-bold">Buchungslink</h2>
                            <p class="mb-4 text-muted">Die öffentliche Buchungsseite liegt unter dem jeweiligen Terminlink und kann direkt an Teilnehmende weitergegeben werden.</p>
                            <div class="small text-muted">Die Buchungsseite wird aus dem Terminplan automatisch erzeugt.</div>
                        </div>
                    </div>
                </div>
            </div>

            {% if current_user %}
            <div class="mt-4 p-4 rounded-4 bg-white shadow-sm">
                <h2 class="h5 fw-bold mb-2">Angemeldet als {{ current_user }}</h2>
                <p class="mb-0 text-muted">Sie können Termine anlegen, den Kalender prüfen und Buchungslinks verteilen.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}