{% extends "base.html" %}

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

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-calendar-alt me-2"></i>{{ title }}
        </h1>
        <div class="d-flex gap-2">
            <a href="{% url 'stiftung:kalender' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>Zurück zum Kalender
            </a>
            <a href="{% url 'stiftung:kalender_edit' event.pk %}" class="btn btn-primary">
                <i class="fas fa-edit me-1"></i>Bearbeiten
            </a>
            <a href="{% url 'stiftung:kalender_delete' event.pk %}" class="btn btn-danger">
                <i class="fas fa-trash me-1"></i>Löschen
            </a>
        </div>
    </div>

    <!-- Event Details -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Termindetails
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted">Titel</h6>
                            <p class="h5">{{ event.titel }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted">Datum</h6>
                            <p class="h5">
                                <i class="fas fa-calendar me-2"></i>{{ event.datum|date:"d.m.Y" }}
                                {% if event.uhrzeit %}
                                <br><small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>{{ event.uhrzeit|time:"H:i" }} Uhr
                                </small>
                                {% endif %}
                            </p>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted">Kategorie</h6>
                            <span class="badge bg-info fs-6">
                                <i class="fas fa-tag me-1"></i>{{ event.get_kategorie_display }}
                            </span>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted">Priorität</h6>
                            <span class="badge bg-{% if event.prioritaet == 'hoch' %}danger{% elif event.prioritaet == 'mittel' %}warning{% else %}secondary{% endif %} fs-6">
                                <i class="fas fa-{% if event.prioritaet == 'hoch' %}exclamation-triangle{% elif event.prioritaet == 'mittel' %}exclamation-circle{% else %}info-circle{% endif %} me-1"></i>{{ event.get_prioritaet_display }}
                            </span>
                        </div>
                    </div>

                    {% if event.beschreibung %}
                    <div class="mb-4">
                        <h6 class="text-muted">Beschreibung</h6>
                        <div class="bg-light p-3 rounded">
                            {{ event.beschreibung|linebreaks }}
                        </div>
                    </div>
                    {% endif %}

                    {% if event.destinataer %}
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <h6 class="text-muted">Bezogen auf Destinatär</h6>
                            <p>
                                <i class="fas fa-user me-2"></i>
                                <a href="{% url 'stiftung:destinataer_detail' event.destinataer.pk %}">
                                    {{ event.destinataer }}
                                </a>
                            </p>
                        </div>
                    </div>
                    {% endif %}

                    {% if event.verpachtung %}
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <h6 class="text-muted">Bezogen auf Verpachtung</h6>
                            <p>
                                <i class="fas fa-handshake me-2"></i>
                                <a href="{% url 'stiftung:verpachtung_detail' event.verpachtung.pk %}">
                                    {{ event.verpachtung }}
                                </a>
                            </p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Status Card -->
            <div class="card shadow mb-4">
                <div class="card-header bg-{% if event.erledigt %}success{% else %}warning{% endif %} text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-{% if event.erledigt %}check-circle{% else %}clock{% endif %} me-2"></i>Status
                    </h6>
                </div>
                <div class="card-body">
                    {% if event.erledigt %}
                    <div class="text-center">
                        <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                        <h6 class="text-success">Erledigt</h6>
                        <p class="text-muted">Dieser Termin wurde als erledigt markiert.</p>
                    </div>
                    {% else %}
                    <div class="text-center">
                        <i class="fas fa-clock fa-3x text-warning mb-3"></i>
                        <h6 class="text-warning">Ausstehend</h6>
                        <p class="text-muted">Dieser Termin steht noch aus.</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Meta Information -->
            <div class="card shadow">
                <div class="card-header bg-secondary text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-info me-2"></i>Meta-Informationen
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <small class="text-muted">Erstellt von:</small><br>
                        <strong>{{ event.erstellt_von|default:"System" }}</strong>
                    </div>
                    
                    <div class="mb-3">
                        <small class="text-muted">Erstellt am:</small><br>
                        <strong>{{ event.erstellt_am|date:"d.m.Y H:i" }}</strong>
                    </div>
                    
                    {% if event.aktualisiert_am %}
                    <div class="mb-3">
                        <small class="text-muted">Zuletzt aktualisiert:</small><br>
                        <strong>{{ event.aktualisiert_am|date:"d.m.Y H:i" }}</strong>
                    </div>
                    {% endif %}
                    
                    <div>
                        <small class="text-muted">Termin-ID:</small><br>
                        <code class="small">{{ event.pk }}</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}