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

{% block title %}{{ topic.title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-9">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/intern/" class="text-danger">Intern</a></li>
                    {% if parent_topic %}
                    <li class="breadcrumb-item"><a href="/intern/topic/{{ parent_topic.id }}" class="text-danger">{{ parent_topic.title }}</a></li>
                    {% endif %}
                    <li class="breadcrumb-item active">{{ topic.title }}</li>
                </ol>
            </nav>

            <!-- Topic Card -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h1 class="h3 mb-0">
                        <i class="bi bi-{{ topic.icon|default('file-lock') }} text-danger me-2"></i>
                        {{ topic.title }}
                    </h1>
                    <span class="intern-badge">INTERN</span>
                </div>
                <div class="card-body content-body">
                    {% if topic.description %}
                    <p class="lead text-muted">{{ topic.description }}</p>
                    <hr class="border-danger opacity-25">
                    {% endif %}

                    {{ topic.content|safe }}
                </div>
            </div>

            <!-- Child Topics -->
            {% if child_topics %}
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-folder2-open me-2"></i>Unterseiten</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for child in child_topics %}
                        <div class="col-md-6 mb-3">
                            <a href="/intern/topic/{{ child.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-{{ child.icon|default('file-lock') }} text-danger me-3 fs-4"></i>
                                            <div>
                                                <h6 class="mb-1">{{ child.title }}</h6>
                                                <p class="text-muted small mb-0">{{ child.description }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- TOC Sidebar -->
        <div class="col-lg-3 d-none d-lg-block">
            {% if topic.toc %}
            <div class="toc-sidebar">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="bi bi-list-ul me-2"></i>Inhalt</h6>
                    </div>
                    <div class="card-body p-2">
                        <nav class="toc-nav">
                            {% for item in topic.toc %}
                            <a href="#{{ item.id }}" class="toc-link {% if item.level == 3 %}ps-4{% endif %}">
                                {{ item.title }}
                            </a>
                            {% endfor %}
                        </nav>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}