<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}van Hees-Theyssen-Vogel'sche Stiftung - Stiftungsverwaltung{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- Custom CSS - British Racing Green Theme -->
    <style>
        /* British Racing Green Color Palette */
        :root {
            --racing-green: #004225;
            --racing-green-light: #006837;
            --racing-green-dark: #002818;
            --grey-light: #f8f9fa;
            --grey-medium: #6c757d;
            --grey-dark: #495057;
            --orange-accent: #fd7e14;
            --orange-light: #ff922b;
            --orange-dark: #e8590c;
        }
        
        .border-left-primary {
            border-left: 0.25rem solid var(--racing-green) !important;
        }
        .border-left-success {
            border-left: 0.25rem solid var(--racing-green-light) !important;
        }
        .border-left-info {
            border-left: 0.25rem solid var(--grey-medium) !important;
        }
        .border-left-warning {
            border-left: 0.25rem solid var(--orange-accent) !important;
        }
        .border-left-danger {
            border-left: 0.25rem solid #dc3545 !important;
        }
        
        /* Main navbar with racing green gradient */
        .bg-gradient-primary {
            background-color: var(--racing-green);
            background-image: linear-gradient(180deg, var(--racing-green-light) 10%, var(--racing-green-dark) 100%);
        }
        
        /* Navigation styling */
        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .navbar-dark .navbar-nav .nav-link:hover {
            color: var(--orange-light);
        }
        
        /* Ensure all nav links have consistent alignment */
        .navbar-nav .nav-link,
        .navbar-nav .nav-link.dropdown-toggle {
            padding: 0.5rem 0.75rem !important;
            display: inline-flex !important;
            align-items: center !important;
            white-space: nowrap !important;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
        }
        
        /* Cards and content */
        .card {
            border: 1px solid #e9ecef;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 66, 37, 0.1);
        }
        
        .card-header {
            background-color: var(--grey-light);
            border-bottom: 1px solid #dee2e6;
            color: var(--racing-green-dark);
        }
        
        .card-header.bg-primary {
            background-color: var(--racing-green) !important;
            color: white;
        }
        
        .card-header.bg-success {
            background-color: var(--racing-green-light) !important;
            color: white;
        }
        
        .card-header.bg-info {
            background-color: var(--grey-medium) !important;
            color: white;
        }
        
        .card-header.bg-warning {
            background-color: var(--orange-accent) !important;
            color: white;
        }
        
        /* Buttons */
        .btn-primary {
            background-color: var(--racing-green);
            border-color: var(--racing-green);
        }
        
        .btn-primary:hover {
            background-color: var(--racing-green-dark);
            border-color: var(--racing-green-dark);
        }
        
        .btn-success {
            background-color: var(--racing-green-light);
            border-color: var(--racing-green-light);
        }
        
        .btn-success:hover {
            background-color: var(--racing-green);
            border-color: var(--racing-green);
        }
        
        .btn-warning {
            background-color: var(--orange-accent);
            border-color: var(--orange-accent);
            color: white;
        }
        
        .btn-warning:hover {
            background-color: var(--orange-dark);
            border-color: var(--orange-dark);
            color: white;
        }
        
        .btn-outline-primary {
            color: var(--racing-green);
            border-color: var(--racing-green);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--racing-green);
            border-color: var(--racing-green);
        }
        
        .btn-outline-secondary {
            color: var(--grey-medium);
            border-color: var(--grey-medium);
        }
        
        .btn-outline-secondary:hover {
            background-color: var(--grey-medium);
            border-color: var(--grey-medium);
        }
        
        /* Table styling */
        .table th {
            border-top: none;
            font-weight: 600;
            color: var(--racing-green-dark);
            background-color: var(--grey-light);
        }
        
        .table-light {
            background-color: var(--grey-light);
        }
        
        /* Badges */
        .badge.bg-primary {
            background-color: var(--racing-green) !important;
        }
        
        .badge.bg-success {
            background-color: var(--racing-green-light) !important;
        }
        
        .badge.bg-warning {
            background-color: var(--orange-accent) !important;
            color: white;
        }
        
        .badge.bg-info {
            background-color: var(--grey-medium) !important;
        }
        
        /* Pagination */
        .pagination .page-link {
            color: var(--racing-green);
            border-color: #dee2e6;
        }
        
        .pagination .page-item.active .page-link {
            background-color: var(--racing-green);
            border-color: var(--racing-green);
        }
        
        .pagination .page-link:hover {
            color: var(--racing-green-dark);
            background-color: var(--grey-light);
        }
        
        /* Text colors */
        .text-primary {
            color: var(--racing-green) !important;
        }
        
        .text-success {
            color: var(--racing-green-light) !important;
        }
        
        /* Form controls */
        .form-control:focus {
            border-color: var(--racing-green-light);
            box-shadow: 0 0 0 0.2rem rgba(0, 66, 37, 0.25);
        }
        
        .form-select:focus {
            border-color: var(--racing-green-light);
            box-shadow: 0 0 0 0.2rem rgba(0, 66, 37, 0.25);
        }
        
        /* Alerts */
        .alert-success {
            background-color: rgba(0, 104, 55, 0.1);
            border-color: var(--racing-green-light);
            color: var(--racing-green-dark);
        }
        
        .alert-warning {
            background-color: rgba(253, 126, 20, 0.1);
            border-color: var(--orange-accent);
            color: var(--orange-dark);
        }
        
        /* Footer */
        .sticky-footer {
            background-color: var(--grey-light) !important;
            border-top: 1px solid #dee2e6;
        }
        
        /* Dropdown menus */
        .dropdown-menu {
            border: 1px solid #dee2e6;
            box-shadow: 0 0.5rem 1rem rgba(0, 66, 37, 0.15);
        }
        
        .dropdown-item:hover {
            background-color: rgba(0, 66, 37, 0.1);
            color: var(--racing-green-dark);
        }
        
        /* Custom accent colors for specific elements */
        .btn-accent {
            background-color: var(--orange-accent);
            border-color: var(--orange-accent);
            color: white;
        }
        
        .btn-accent:hover {
            background-color: var(--orange-dark);
            border-color: var(--orange-dark);
            color: white;
        }
        
        .bg-accent {
            background-color: var(--orange-accent) !important;
            color: white;
        }
    </style>
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{% url 'stiftung:home' %}">
                <i class="fas fa-landmark me-2"></i>van Hees-Theyssen-Vogel'sche Stiftung
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'stiftung:home' %}">
                            <i class="fas fa-tachometer-alt me-1"></i>Dashboard
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="destinataereDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-users me-1"></i>Destinatäre
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="destinataereDropdown">
                            <li><a class="dropdown-item" href="{% url 'stiftung:destinataer_list' %}">
                                <i class="fas fa-list me-2"></i>Alle Destinatäre
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:destinataer_create' %}">
                                <i class="fas fa-plus me-2"></i>Neuer Destinatär
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:foerderung_list' %}">
                                <i class="fas fa-gift me-2"></i>Alle Förderungen
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:foerderung_create' %}">
                                <i class="fas fa-plus me-2"></i>Neue Förderung
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:unterstuetzungen_all' %}">
                                <i class="fas fa-hand-holding-usd me-2"></i>Alle Unterstützungen
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:unterstuetzung_create' %}">
                                <i class="fas fa-plus me-2"></i>Neue Unterstützung
                            </a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="laendereiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-tree me-1"></i>Ländereien
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="laendereiDropdown">
                            <li><a class="dropdown-item" href="{% url 'stiftung:land_list' %}">
                                <i class="fas fa-list me-2"></i>Alle Ländereien
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:land_create' %}">
                                <i class="fas fa-plus me-2"></i>Neue Länderei
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:land_abrechnung_list' %}">
                                <i class="fas fa-calculator me-2"></i>Abrechnungen
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'stiftung:land_abrechnung_create' %}">
                                <i class="fas fa-plus me-2"></i>Neue Abrechnung
                            </a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'stiftung:paechter_list' %}">
                            <i class="fas fa-user-tie me-1"></i>Pächter
                        </a>
                    </li>
                    <!-- Legacy Verpachtungen aus Navigation entfernt -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'stiftung:dokument_management' %}">
                            <i class="fas fa-folder-open me-1"></i>Dokumente
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'stiftung:geschaeftsfuehrung' %}">
                            <i class="fas fa-briefcase me-1"></i>Geschäftsführung
                        </a>
                    </li>
                                            <li class="nav-item">
                            <a class="nav-link" href="{% url 'stiftung:administration' %}">
                                <i class="fas fa-cogs me-1"></i>Administration
                            </a>
                        </li>
                        
                        <!-- User Menu -->
                        {% if user.is_authenticated %}
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-user me-1"></i>{{ user.username }}
                                    {% if user.is_staff %}
                                    <span class="badge bg-warning ms-1">Staff</span>
                                    {% endif %}
                                    {% if user.is_superuser %}
                                    <span class="badge bg-danger ms-1">Admin</span>
                                    {% endif %}
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                                    <li><h6 class="dropdown-header">{{ user.get_full_name|default:user.username }}</h6></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="{% url 'stiftung:user_detail' user.pk %}">
                                        <i class="fas fa-user me-2"></i>Mein Profil
                                    </a></li>
                                    {% if perms.stiftung.manage_users %}
                                    <li><a class="dropdown-item" href="{% url 'stiftung:user_management' %}">
                                        <i class="fas fa-users me-2"></i>Benutzerverwaltung
                                    </a></li>
                                    {% endif %}
                                    {% if perms.stiftung.access_administration %}
                                    <li><a class="dropdown-item" href="{% url 'stiftung:administration' %}">
                                        <i class="fas fa-cogs me-2"></i>Administration
                                    </a></li>
                                    {% endif %}
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="{% url 'stiftung:logout' %}">
                                        <i class="fas fa-sign-out-alt me-2"></i>Abmelden
                                    </a></li>
                                </ul>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'stiftung:login' %}">
                                    <i class="fas fa-sign-in-alt me-1"></i>Anmelden
                                </a>
                            </li>
                        {% endif %}
                </div>
            </div>
        </nav>

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">
            <!-- Main Content -->
            <div id="content" style="padding-top: 80px;">
                <!-- Messages -->
                {% if messages %}
                    <div class="container-lg mx-auto mt-3" style="max-width: 1200px;">
                        {% for message in messages %}
                            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                <!-- Page Content -->
                <div class="container-lg mx-auto" style="max-width: 1200px; padding: 20px;">
                    {% block content %}
                    {% endblock %}
                </div>
            </div>

            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container-lg mx-auto my-auto" style="max-width: 1200px;">
                    <div class="copyright text-center my-auto">
                        <span>&copy; 2024 van Hees-Theyssen-Vogel'sche Stiftung. Alle Rechte vorbehalten.</span>
                    </div>
                </div>
            </footer>
        </div>

    <!-- Import Modal -->
    <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">Import Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="importProgress" class="progress mb-3" style="display: none;">
                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                    </div>
                    <div id="importMessage"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Additional JavaScript -->
    {% block javascript %}
    {% endblock %}

</body>
</html> 