{% extends 'base.html' %}
{% load help_tags %}

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

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'stiftung:home' %}">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Geschichte</li>
    </ol>
</nav>

<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-book-open me-2"></i>{{ title }}
                </h5>
                {% if perms.stiftung.add_geschichteseite %}
                <a href="{% url 'stiftung:geschichte_create' %}" class="btn btn-light btn-sm">
                    <i class="fas fa-plus me-1"></i>Neue Seite
                </a>
                {% endif %}
            </div>
            <div class="card-body">
                {% if seiten %}
                    <div class="row">
                        {% for seite in seiten %}
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100">
                                {% if seite.bilder.first %}
                                <img src="{{ seite.bilder.first.bild.url }}" class="card-img-top" alt="{{ seite.bilder.first.alt_text }}" style="height: 200px; object-fit: cover;">
                                {% endif %}
                                <div class="card-body d-flex flex-column">
                                    <h6 class="card-title">{{ seite.titel }}</h6>
                                    <p class="card-text text-muted small flex-grow-1">
                                        {{ seite.inhalt|truncatewords:20|striptags }}
                                    </p>
                                    <div class="mt-auto">
                                        <a href="{{ seite.get_absolute_url }}" class="btn btn-primary btn-sm">
                                            <i class="fas fa-eye me-1"></i>Lesen
                                        </a>
                                        {% if perms.stiftung.change_geschichteseite %}
                                        <a href="{% url 'stiftung:geschichte_edit' slug=seite.slug %}" class="btn btn-outline-secondary btn-sm">
                                            <i class="fas fa-edit me-1"></i>Bearbeiten
                                        </a>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="card-footer text-muted small">
                                    <i class="fas fa-clock me-1"></i>
                                    Aktualisiert: {{ seite.aktualisiert_am|date:"d.m.Y H:i" }}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-book-open fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Keine Geschichtsseiten vorhanden</h5>
                        <p class="text-muted">Es wurden noch keine Seiten zur Stiftungsgeschichte erstellt.</p>
                        {% if perms.stiftung.add_geschichteseite %}
                        <a href="{% url 'stiftung:geschichte_create' %}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>Erste Seite erstellen
                        </a>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}