{% extends "base.html" %}

{% block title %}Startseite{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <h1 class="display-5 mb-3">
                        <i class="bi bi-life-preserver text-primary me-3"></i>
                        Willkommen zur Hilfe
                    </h1>
                    <p class="lead text-muted mb-4">
                        Alles was Sie ueber das Kurs-Booking Plugin wissen muessen
                    </p>
                    <form action="/search" method="get" class="d-flex justify-content-center">
                        <div class="input-group" style="max-width: 500px;">
                            <input type="text" name="q" class="form-control form-control-lg"
                                   placeholder="Was moechten Sie wissen?">
                            <button class="btn btn-primary btn-lg" type="submit">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Links -->
    <div class="row mb-4">
        <div class="col-12">
            <h4 class="mb-3"><i class="bi bi-lightning me-2"></i>Schnellstart</h4>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/topic/buchungsfelder-uebersicht" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-ui-checks-grid text-primary display-4 mb-3"></i>
                        <h5>Buchungsfelder</h5>
                        <p class="text-muted small mb-0">Formularfelder verwalten</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/topic/produktarten" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-tags text-success display-4 mb-3"></i>
                        <h5>Produktarten</h5>
                        <p class="text-muted small mb-0">Kurs, Workshop, Webinar</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/topic/email-vorlagen" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-envelope text-warning display-4 mb-3"></i>
                        <h5>E-Mail Vorlagen</h5>
                        <p class="text-muted small mb-0">Templates anpassen</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/topic/sevdesk" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-receipt text-info display-4 mb-3"></i>
                        <h5>sevDesk</h5>
                        <p class="text-muted small mb-0">Rechnungen erstellen</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- All Sections -->
    {% for section in content.sections %}
    <div class="row mb-4">
        <div class="col-12">
            <h4 class="mb-3">
                <i class="bi bi-{{ section.icon|default('folder') }} me-2"></i>
                {{ section.title }}
            </h4>
        </div>
        {% for topic in section.topics %}
        <div class="col-md-4 mb-3">
            <a href="/topic/{{ topic.id }}" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start">
                            <i class="bi bi-{{ topic.icon|default('file-text') }} text-primary me-3 fs-4"></i>
                            <div>
                                <h6 class="mb-1">{{ topic.title }}</h6>
                                <p class="text-muted small mb-0">{{ topic.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% endfor %}

    <!-- Interner Bereich -->
    <div class="row mt-5">
        <div class="col-12">
            <a href="/intern/" class="text-decoration-none">
                <div class="card border-danger bg-danger bg-opacity-10">
                    <div class="card-body d-flex align-items-center">
                        <i class="bi bi-shield-lock text-danger display-6 me-3"></i>
                        <div>
                            <h5 class="mb-1 text-danger">Interner Bereich</h5>
                            <p class="text-muted mb-0">API-Dokumentation, DevOps & Troubleshooting fuer Entwickler (passwortgeschuetzt)</p>
                        </div>
                        <i class="bi bi-arrow-right text-danger ms-auto fs-4"></i>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Footer -->
    <div class="row mt-5">
        <div class="col-12 text-center">
            <hr class="border-secondary">
            <p class="text-muted small">
                <i class="bi bi-info-circle me-1"></i>
                Kurs-Booking Plugin v1.3.1 &bull;
                <a href="https://web-werkstatt.at" target="_blank" class="text-muted">web-werkstatt.at</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}