{% extends "intern/base.html" %}

{% block title %}Uebersicht{% 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">
                    <span class="intern-badge mb-3 d-inline-block">INTERNER BEREICH</span>
                    <h1 class="display-5 mb-3">
                        <i class="bi bi-shield-lock text-danger me-3"></i>
                        Entwickler-Dokumentation
                    </h1>
                    <p class="lead text-muted mb-0">
                        Technische Referenz, API, DevOps und Troubleshooting
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Access -->
    <div class="row mb-4">
        <div class="col-12">
            <h4 class="mb-3"><i class="bi bi-lightning me-2"></i>Schnellzugriff</h4>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/intern/topic/api/hooks" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-code-slash text-danger display-4 mb-3"></i>
                        <h5>Hooks & Filter</h5>
                        <p class="text-muted small mb-0">Actions & Filters</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/intern/topic/api/meta-felder" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-database text-warning display-4 mb-3"></i>
                        <h5>Meta-Felder</h5>
                        <p class="text-muted small mb-0">Alle Post Meta Keys</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/intern/topic/devops/docker" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-box text-info display-4 mb-3"></i>
                        <h5>Docker</h5>
                        <p class="text-muted small mb-0">Container & Ports</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 mb-3">
            <a href="/intern/topic/troubleshooting/debug" class="text-decoration-none">
                <div class="card topic-card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-bug text-success display-4 mb-3"></i>
                        <h5>Debugging</h5>
                        <p class="text-muted small mb-0">Logs & Fehlersuche</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="/intern/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-lock') }} text-danger 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 %}

    <!-- Footer -->
    <div class="row mt-5">
        <div class="col-12 text-center">
            <hr class="border-danger opacity-25">
            <p class="text-muted small">
                <i class="bi bi-shield-lock me-1"></i>
                Interner Bereich - Nur fuer autorisierte Entwickler
            </p>
        </div>
    </div>
</div>
{% endblock %}