{% extends "base.html" %}

{% block title %}Resource Pool{% endblock %}



{% block extra_css %}
<style>
    /* Statistik-Karten Design wie Dashboard */
    .stat-card {
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        height: 100%;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }
    .stat-card .card-icon {
        font-size: 3rem;
        margin-bottom: 0.5rem;
        opacity: 0.8;
    }
    .stat-card .card-value {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 0.5rem 0;
    }
    .stat-card .card-label {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.7;
    }
    
    /* Resource Type Icons */
    .resource-icon {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.2rem;
    }
    .resource-icon.domain {
        background-color: #e3f2fd;
        color: #1976d2;
    }
    .resource-icon.ipv4 {
        background-color: #f3e5f5;
        color: #7b1fa2;
    }
    .resource-icon.phone {
        background-color: #e8f5e9;
        color: #388e3c;
    }
    
    /* Status Badges */
    .status-badge {
        padding: 0.35rem 0.65rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
    }
    .status-available {
        background-color: #d4edda;
        color: #155724;
    }
    .status-allocated {
        background-color: #d1ecf1;
        color: #0c5460;
    }
    .status-quarantine {
        background-color: #fff3cd;
        color: #856404;
    }
    
    /* Progress Bar Custom */
    .progress-custom {
        height: 25px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }
    .progress-bar-custom {
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Table Styling */
    .table-custom {
        border: none;
    }
    .table-custom thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.875rem;
        color: #495057;
        padding: 1rem;
    }
    .table-custom tbody tr {
        transition: all 0.2s ease;
    }
    .table-custom tbody tr:hover {
        background-color: #f8f9fa;
    }
    .table-custom td {
        padding: 1rem;
        vertical-align: middle;
    }
    
    /* Action Buttons */
    .btn-action {
        width: 35px;
        height: 35px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 2px;
        transition: all 0.2s ease;
    }
    .btn-action:hover {
        transform: scale(1.1);
    }
    
    /* Copy Button */
    .copy-btn {
        background: none;
        border: none;
        color: #6c757d;
        padding: 0.25rem 0.5rem;
        transition: color 0.2s ease;
    }
    .copy-btn:hover {
        color: #28a745;
    }
    .copy-btn.copied {
        color: #28a745;
    }
    
    /* Filter Card */
    .filter-card {
        background-color: #f8f9fa;
        border: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem;
        color: #6c757d;
    }
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    /* Dropdown Verbesserungen */
    .dropdown-menu {
        min-width: 220px;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border: none;
    }
    .dropdown-item {
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.2s ease;
    }
    .dropdown-item:hover {
        background-color: #f8f9fa;
        transform: translateX(2px);
    }
    .dropdown-item i {
        width: 20px;
        text-align: center;
    }
    
    /* Quick Action Buttons */
    .btn-success {
        font-weight: 500;
    }
    
    /* Sortable Headers */
    thead th a {
        display: block;
        position: relative;
        padding-right: 20px;
    }
    thead th a:hover {
        color: #0d6efd !important;
    }
    thead th a i {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="mb-4">
        <h1 class="mb-0">Ressourcen Pool</h1>
        <p class="text-muted mb-0">Verwalten Sie Domains, IPs und Telefonnummern</p>
    </div>

    <!-- Test/Live Mode Toggle -->
    <div class="card mb-3">
        <div class="card-body py-2">
            <div class="form-check mb-0">
                <input class="form-check-input" type="checkbox" id="showTestResources" 
                       {% if show_fake %}checked{% endif %}
                       onchange="toggleTestResources()">
                <label class="form-check-label" for="showTestResources">
                    Fake-Ressourcen anzeigen
                </label>
            </div>
        </div>
    </div>

    <!-- Statistik-Karten -->
    <div class="row g-4 mb-4">
        {% for type, data in stats.items() %}
        <div class="col-md-4">
            <div class="card stat-card">
                <div class="card-body text-center">
                    <div class="card-icon">
                        {% if type == 'domain' %}
                            🌐
                        {% elif type == 'ipv4' %}
                            🖥️
                        {% else %}
                            📱
                        {% endif %}
                    </div>
                    <h5 class="text-muted mb-2">{{ type|upper }}</h5>
                    <div class="card-value text-primary">{{ data.available }}</div>
                    <div class="card-label text-muted mb-3">von {{ data.total }} verfügbar</div>
                    
                    <div class="progress progress-custom">
                        <div class="progress-bar bg-success progress-bar-custom" 
                             style="width: {{ data.available_percent }}%"
                             data-bs-toggle="tooltip" 
                             title="{{ data.available }} verfügbar">
                            {{ data.available_percent }}%
                        </div>
                        <div class="progress-bar bg-info progress-bar-custom" 
                             style="width: {{ (data.allocated / data.total * 100) if data.total > 0 else 0 }}%"
                             data-bs-toggle="tooltip" 
                             title="{{ data.allocated }} zugeteilt">
                            {% if data.allocated > 0 %}{{ data.allocated }}{% endif %}
                        </div>
                        <div class="progress-bar bg-warning progress-bar-custom" 
                             style="width: {{ (data.quarantined / data.total * 100) if data.total > 0 else 0 }}%"
                             data-bs-toggle="tooltip" 
                             title="{{ data.quarantined }} in Quarantäne">
                            {% if data.quarantined > 0 %}{{ data.quarantined }}{% endif %}
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        {% if data.available_percent < 20 %}
                            <span class="badge bg-danger">⚠️ Niedriger Bestand</span>
                        {% elif data.available_percent < 50 %}
                            <span class="badge bg-warning text-dark">⚡ Bestand prüfen</span>
                        {% else %}
                            <span class="badge bg-success">✅ Gut gefüllt</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Filter -->
    <div class="card filter-card mb-4">
        <div class="card-body">
            <form method="get" action="{{ url_for('resources.resources') }}" id="filterForm">
                <input type="hidden" name="show_fake" value="{{ 'true' if show_fake else 'false' }}">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="type" class="form-label">🏷️ Typ</label>
                        <select name="type" id="type" class="form-select">
                            <option value="">Alle Typen</option>
                            <option value="domain" {% if resource_type == 'domain' %}selected{% endif %}>🌐 Domain</option>
                            <option value="ipv4" {% if resource_type == 'ipv4' %}selected{% endif %}>🖥️ IPv4</option>
                            <option value="phone" {% if resource_type == 'phone' %}selected{% endif %}>📱 Telefon</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label">📊 Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="">Alle Status</option>
                            <option value="available" {% if status_filter == 'available' %}selected{% endif %}>✅ Verfügbar</option>
                            <option value="allocated" {% if status_filter == 'allocated' %}selected{% endif %}>🔗 Zugeteilt</option>
                            <option value="quarantine" {% if status_filter == 'quarantine' %}selected{% endif %}>⚠️ Quarantäne</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="search" class="form-label">🔍 Suche</label>
                        <input type="text" name="search" id="search" class="form-control" 
                               placeholder="Ressource suchen..." value="{{ search }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <a href="{{ url_for('resources.resources', show_fake=show_fake) }}" class="btn btn-secondary w-100">
                            🔄 Zurücksetzen
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Ressourcen-Tabelle -->
    <div class="card">
        <div class="card-header bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">📋 Ressourcen-Liste</h5>
                <div class="d-flex align-items-center gap-2">
                    <div class="dropdown">
                        <button class="btn btn-sm btn-secondary dropdown-toggle" 
                                type="button" 
                                id="exportDropdown"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">
                            <i class="bi bi-download"></i> Export
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                            <li><a class="dropdown-item" href="{{ url_for('resources.resources_report', format='excel', type=resource_type, status=status_filter, search=search, show_fake=show_fake) }}">
                                <i class="bi bi-file-earmark-excel text-success"></i> Excel Export</a></li>
                        </ul>
                    </div>
                    <span class="badge bg-secondary">{{ total }} Einträge</span>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            {% if resources %}
            <div class="table-responsive">
                <table class="table table-custom mb-0">
                    <thead>
                        <tr>
                            <th width="80">
                                <a href="{{ url_for('resources.resources', sort='id', order='desc' if sort_by == 'id' and sort_order == 'asc' else 'asc', type=resource_type, status=status_filter, search=search, show_fake=show_fake) }}" 
                                   class="text-decoration-none text-dark sort-link">
                                    ID
                                    {% if sort_by == 'id' %}
                                        <i class="bi bi-caret-{{ 'up' if sort_order == 'asc' else 'down' }}-fill"></i>
                                    {% else %}
                                        <i class="bi bi-caret-down-fill text-muted opacity-25"></i>
                                    {% endif %}
                                </a>
                            </th>
                            <th width="120">
                                <a href="{{ url_for('resources.resources', sort='type', order='desc' if sort_by == 'type' and sort_order == 'asc' else 'asc', type=resource_type, status=status_filter, search=search, show_fake=show_fake) }}" 
                                   class="text-decoration-none text-dark sort-link">
                                    Typ
                                    {% if sort_by == 'type' %}
                                        <i class="bi bi-caret-{{ 'up' if sort_order == 'asc' else 'down' }}-fill"></i>
                                    {% else %}
                                        <i class="bi bi-caret-down-fill text-muted opacity-25"></i>
                                    {% endif %}
                                </a>
                            </th>
                            <th>
                                <a href="{{ url_for('resources.resources', sort='resource', order='desc' if sort_by == 'resource' and sort_order == 'asc' else 'asc', type=resource_type, status=status_filter, search=search, show_fake=show_fake) }}" 
                                   class="text-decoration-none text-dark sort-link">
                                    Ressource
                                    {% if sort_by == 'resource' %}
                                        <i class="bi bi-caret-{{ 'up' if sort_order == 'asc' else 'down' }}-fill"></i>
                                    {% else %}
                                        <i class="bi bi-caret-down-fill text-muted opacity-25"></i>
                                    {% endif %}
                                </a>
                            </th>
                            <th width="140">
                                <a href="{{ url_for('resources.resources', sort='status', order='desc' if sort_by == 'status' and sort_order == 'asc' else 'asc', type=resource_type, status=status_filter, search=search, show_fake=show_fake) }}" 
                                   class="text-decoration-none text-dark sort-link">
                                    Status
                                    {% if sort_by == 'status' %}
                                        <i class="bi bi-caret-{{ 'up' if sort_order == 'asc' else 'down' }}-fill"></i>
                                    {% else %}
                                        <i class="bi bi-caret-down-fill text-muted opacity-25"></i>
                                    {% endif %}
                                </a>
                            </th>
                            <th>
                                <a href="{{ url_for('resources.resources', sort='assigned', order='desc' if sort_by == 'assigned' and sort_order == 'asc' else 'asc', type=resource_type, status=status_filter, search=search, show_fake=show_fake) }}" 
                                   class="text-decoration-none text-dark sort-link">
                                    Zugewiesen an
                                    {% if sort_by == 'assigned' %}
                                        <i class="bi bi-caret-{{ 'up' if sort_order == 'asc' else 'down' }}-fill"></i>
                                    {% else %}
                                        <i class="bi bi-caret-down-fill text-muted opacity-25"></i>
                                    {% endif %}
                                </a>
                            </th>
                            <th width="180">
                                <a href="{{ url_for('resources.resources', sort='changed', order='desc' if sort_by == 'changed' and sort_order == 'asc' else 'asc', type=resource_type, status=status_filter, search=search, show_fake=show_fake) }}" 
                                   class="text-decoration-none text-dark sort-link">
                                    Letzte Änderung
                                    {% if sort_by == 'changed' %}
                                        <i class="bi bi-caret-{{ 'up' if sort_order == 'asc' else 'down' }}-fill"></i>
                                    {% else %}
                                        <i class="bi bi-caret-down-fill text-muted opacity-25"></i>
                                    {% endif %}
                                </a>
                            </th>
                            <th width="200" class="text-center">Aktionen</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for resource in resources %}
                        <tr>
                            <td>
                                <span class="text-muted">#{{ resource.id }}</span>
                            </td>
                            <td>
                                <div class="resource-icon {{ resource.resource_type }}">
                                    {% if resource.resource_type == 'domain' %}
                                        🌐
                                    {% elif resource.resource_type == 'ipv4' %}
                                        🖥️
                                    {% else %}
                                        📱
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <code class="me-2">{{ resource.resource_value }}</code>
                                    <button class="copy-btn" onclick="copyToClipboard('{{ resource.resource_value }}', this)" 
                                            title="Kopieren">
                                        <i class="bi bi-clipboard"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                {% if resource.status == 'available' %}
                                    <span class="status-badge status-available">
                                        ✅ Verfügbar
                                    </span>
                                {% elif resource.status == 'allocated' %}
                                    <span class="status-badge status-allocated">
                                        🔗 Zugeteilt
                                    </span>
                                {% else %}
                                    <span class="status-badge status-quarantine">
                                        ⚠️ Quarantäne
                                    </span>
                                    {% if resource.status_changed_by %}
                                        <div class="small text-muted mt-1">{{ resource.status_changed_by }}</div>
                                    {% endif %}
                                {% endif %}
                            </td>
                            <td>
                                {% if resource.customer_name %}
                                    <div>
                                        <a href="{{ url_for('customers.customers_licenses', show_fake=show_fake) }}" 
                                           class="text-decoration-none">
                                            <strong>{{ resource.customer_name }}</strong>
                                        </a>
                                    </div>
                                    <div class="small text-muted">
                                        <a href="{{ url_for('licenses.edit_license', license_id=resource.allocated_to_license) }}?ref=resources{{ '&show_fake=true' if show_fake else '' }}" 
                                           class="text-decoration-none text-muted">
                                            {{ resource.allocated_to_license }}
                                        </a>
                                    </div>
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if resource.status_changed_at %}
                                    <div class="small">
                                        <div>{{ resource.status_changed_at.strftime('%d.%m.%Y') }}</div>
                                        <div class="text-muted">{{ resource.status_changed_at.strftime('%H:%M Uhr') }}</div>
                                    </div>
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if resource.status == 'quarantine' %}
                                    <!-- Quick Action für Quarantäne -->
                                    <form method="post" action="{{ url_for('resources.release', show_fake=show_fake, type=resource_type, status=status_filter, search=search) }}" 
                                          style="display: inline-block; margin-right: 5px;">
                                        <input type="hidden" name="resource_ids" value="{{ resource.id }}">
                                        <input type="hidden" name="show_fake" value="{{ show_fake }}">
                                        <button type="submit" 
                                                class="btn btn-sm btn-success">
                                            <i class="bi bi-check-circle"></i> Freigeben
                                        </button>
                                    </form>
                                {% endif %}
                                
                                <!-- Dropdown für weitere Aktionen -->
                                <div class="dropdown" style="display: inline-block;">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                            type="button" 
                                            id="dropdownMenuButton{{ resource.id }}"
                                            data-bs-toggle="dropdown" 
                                            aria-expanded="false">
                                        <i class="bi bi-three-dots-vertical"></i> Aktionen
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ resource.id }}">
                                            <!-- Historie immer verfügbar -->
                                            <li>
                                                <a class="dropdown-item" 
                                                   href="{{ url_for('resources.resource_history', resource_id=resource.id) }}">
                                                    <i class="bi bi-clock-history text-info"></i> Historie anzeigen
                                                </a>
                                            </li>
                                            
                                            <li><hr class="dropdown-divider"></li>
                                            
                                            {% if resource.status == 'available' %}
                                                <!-- Aktionen für verfügbare Ressourcen -->
                                                <li>
                                                    <button class="dropdown-item" 
                                                            onclick="showQuarantineModal({{ resource.id }})">
                                                        <i class="bi bi-exclamation-triangle text-warning"></i> In Quarantäne setzen
                                                    </button>
                                                </li>
                                            {% elif resource.status == 'allocated' %}
                                                <!-- Aktionen für zugeteilte Ressourcen -->
                                                {% if resource.allocated_to_license %}
                                                    <li>
                                                        <a class="dropdown-item" 
                                                           href="{{ url_for('licenses.edit_license', license_id=resource.allocated_to_license) }}?ref=resources{{ '&show_fake=true' if show_fake else '' }}">
                                                            <i class="bi bi-file-text text-primary"></i> Lizenz bearbeiten
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if resource.id %}
                                                    <li>
                                                        <a class="dropdown-item" 
                                                           href="{{ url_for('customers.customers_licenses', customer_id=resource.id, show_fake=show_fake) }}">
                                                            <i class="bi bi-person text-primary"></i> Kunde anzeigen
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            {% elif resource.status == 'quarantine' %}
                                                <!-- Aktionen für Quarantäne-Ressourcen -->
                                                <li>
                                                    <form method="post" action="{{ url_for('resources.release', show_fake=show_fake, type=resource_type, status=status_filter, search=search) }}" 
                                                          style="display: contents;">
                                                        <input type="hidden" name="resource_ids" value="{{ resource.id }}">
                                                        <input type="hidden" name="show_fake" value="{{ show_fake }}">
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="bi bi-check-circle text-success"></i> Ressource freigeben
                                                        </button>
                                                    </form>
                                                </li>
                                                {% if resource[9] %}
                                                    <li>
                                                        <button class="dropdown-item" 
                                                                onclick="extendQuarantine({{ resource.id }})">
                                                            <i class="bi bi-calendar-plus text-warning"></i> Quarantäne verlängern
                                                        </button>
                                                    </li>
                                                {% endif %}
                                            {% endif %}
                                            
                                            <li><hr class="dropdown-divider"></li>
                                            
                                            <!-- Kopieren immer verfügbar -->
                                            <li>
                                                <button class="dropdown-item" 
                                                        onclick="copyToClipboard('{{ resource.resource_value }}', this)">
                                                    <i class="bi bi-clipboard text-secondary"></i> Ressource kopieren
                                                </button>
                                            </li>
                                        </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="empty-state">
                <i class="bi bi-inbox"></i>
                <h4>Keine Ressourcen gefunden</h4>
                <p>Ändern Sie Ihre Filterkriterien oder fügen Sie neue Ressourcen hinzu.</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item {% if page == 1 %}disabled{% endif %}">
                <a class="page-link" 
                   href="{{ url_for('resources.resources', page=1, type=resource_type, status=status_filter, search=search, show_fake=show_fake, sort=sort_by, order=sort_order) }}">
                    <i class="bi bi-chevron-double-left"></i> Erste
                </a>
            </li>
            <li class="page-item {% if page == 1 %}disabled{% endif %}">
                <a class="page-link" 
                   href="{{ url_for('resources.resources', page=page-1, type=resource_type, status=status_filter, search=search, show_fake=show_fake, sort=sort_by, order=sort_order) }}">
                    <i class="bi bi-chevron-left"></i> Zurück
                </a>
            </li>
            
            {% for p in range(1, total_pages + 1) %}
                {% if p == page or (p >= page - 2 and p <= page + 2) %}
                    <li class="page-item {% if p == page %}active{% endif %}">
                        <a class="page-link" 
                           href="{{ url_for('resources.resources', page=p, type=resource_type, status=status_filter, search=search, show_fake=show_fake, sort=sort_by, order=sort_order) }}">
                            {{ p }}
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
            
            <li class="page-item {% if page == total_pages %}disabled{% endif %}">
                <a class="page-link" 
                   href="{{ url_for('resources.resources', page=page+1, type=resource_type, status=status_filter, search=search, show_fake=show_fake, sort=sort_by, order=sort_order) }}">
                    Weiter <i class="bi bi-chevron-right"></i>
                </a>
            </li>
            <li class="page-item {% if page == total_pages %}disabled{% endif %}">
                <a class="page-link" 
                   href="{{ url_for('resources.resources', page=total_pages, type=resource_type, status=status_filter, search=search, show_fake=show_fake, sort=sort_by, order=sort_order) }}">
                    Letzte <i class="bi bi-chevron-double-right"></i>
                </a>
            </li>
        </ul>
    </nav>
    {% endif %}

    <!-- Kürzliche Aktivitäten -->
    {% if recent_activities %}
    <div class="card mt-4">
        <div class="card-header bg-white">
            <h5 class="mb-0">⏰ Kürzliche Aktivitäten</h5>
        </div>
        <div class="card-body">
            <div class="timeline">
                {% for activity in recent_activities %}
                <div class="d-flex mb-3">
                    <div class="me-3">
                        {% if activity[0] == 'created' %}
                            <span class="badge bg-success rounded-pill">➕</span>
                        {% elif activity[0] == 'allocated' %}
                            <span class="badge bg-info rounded-pill">🔗</span>
                        {% elif activity[0] == 'deallocated' %}
                            <span class="badge bg-secondary rounded-pill">🔓</span>
                        {% elif activity[0] == 'quarantined' %}
                            <span class="badge bg-warning rounded-pill">⚠️</span>
                        {% else %}
                            <span class="badge bg-primary rounded-pill">ℹ️</span>
                        {% endif %}
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>{{ activity[4] }}</strong> ({{ activity[3] }}) - {{ activity[0] }}
                                {% if activity[1] %}
                                    <span class="text-muted">von {{ activity[1] }}</span>
                                {% endif %}
                            </div>
                            <small class="text-muted">
                                {{ activity[2].strftime('%d.%m.%Y %H:%M') if activity[2] else '' }}
                            </small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Quarantäne Modal -->
<div class="modal fade" id="quarantineModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" id="quarantineForm">
                <!-- Filter-Parameter als Hidden Fields -->
                <input type="hidden" name="show_fake" value="{{ show_fake }}">
                <input type="hidden" name="type" value="{{ resource_type }}">
                <input type="hidden" name="status" value="{{ status_filter }}">
                <input type="hidden" name="search" value="{{ search }}">
                
                <div class="modal-header">
                    <h5 class="modal-title">⚠️ Ressource in Quarantäne setzen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="reason" class="form-label">Grund</label>
                        <select name="reason" id="reason" class="form-select" required>
                            <option value="">Bitte wählen...</option>
                            <option value="review">🔍 Überprüfung</option>
                            <option value="abuse">⚠️ Missbrauch</option>
                            <option value="defect">❌ Defekt</option>
                            <option value="maintenance">🔧 Wartung</option>
                            <option value="blacklisted">🚫 Blacklisted</option>
                            <option value="expired">⏰ Abgelaufen</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="until_date" class="form-label">Bis wann? (optional)</label>
                        <input type="date" name="until_date" id="until_date" class="form-control"
                               min="{{ datetime.now().strftime('%Y-%m-%d') }}">
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">Notizen</label>
                        <textarea name="notes" id="notes" class="form-control" rows="3"
                                  placeholder="Zusätzliche Informationen..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Abbrechen
                    </button>
                    <button type="submit" class="btn btn-warning">
                        ⚠️ In Quarantäne setzen
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Debug Bootstrap
console.log('Bootstrap loaded:', typeof bootstrap !== 'undefined');
if (typeof bootstrap !== 'undefined') {
    console.log('Bootstrap version:', bootstrap.Dropdown.VERSION);
}

// Scroll-Position speichern und wiederherstellen
(function() {
    // Speichere Scroll-Position vor dem Verlassen der Seite
    window.addEventListener('beforeunload', function() {
        sessionStorage.setItem('resourcesScrollPos', window.scrollY);
    });
    
    // Stelle Scroll-Position wieder her
    const scrollPos = sessionStorage.getItem('resourcesScrollPos');
    if (scrollPos) {
        window.scrollTo(0, parseInt(scrollPos));
        sessionStorage.removeItem('resourcesScrollPos');
    }
})();

// Live-Filtering
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('filterForm');
    const inputs = form.querySelectorAll('select, input[type="text"]');
    
    inputs.forEach(input => {
        if (input.type === 'text') {
            let timeout;
            input.addEventListener('input', function() {
                clearTimeout(timeout);
                timeout = setTimeout(() => form.submit(), 300);
            });
        } else {
            input.addEventListener('change', () => form.submit());
        }
    });

    // Bootstrap Tooltips initialisieren
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
    
    // Bootstrap Dropdowns explizit initialisieren
    var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
        return new bootstrap.Dropdown(dropdownToggleEl)
    });
    
    // Export Dropdown manuell aktivieren falls nötig
    const exportBtn = document.getElementById('exportDropdown');
    if (exportBtn) {
        exportBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const dropdown = bootstrap.Dropdown.getOrCreateInstance(this);
            dropdown.toggle();
        });
    }
    
    // Sort-Links: Scroll-Position speichern
    document.querySelectorAll('.sort-link').forEach(link => {
        link.addEventListener('click', function(e) {
            sessionStorage.setItem('resourcesScrollPos', window.scrollY);
        });
    });
});

// Copy to Clipboard mit besserem Feedback
function copyToClipboard(text, button) {
    navigator.clipboard.writeText(text).then(() => {
        // Original Text speichern
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="bi bi-check"></i> Kopiert!';
        button.classList.add('copied');
        
        // Nach 2 Sekunden zurücksetzen
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('copied');
        }, 2000);
    });
}

// Quarantäne Modal
function showQuarantineModal(resourceId) {
    const modalElement = document.getElementById('quarantineModal');
    const modal = new bootstrap.Modal(modalElement);
    const form = modalElement.querySelector('form');
    
    // URL mit aktuellen Filtern
    const currentUrl = new URL(window.location);
    const params = new URLSearchParams(currentUrl.search);
    form.setAttribute('action', `/resources/quarantine/${resourceId}?${params.toString()}`);
    
    modal.show();
}

// Toggle Testressourcen
function toggleTestResources() {
    const showTest = document.getElementById('showTestResources').checked;
    const currentUrl = new URL(window.location);
    currentUrl.searchParams.set('show_fake', showTest);
    window.location.href = currentUrl.toString();
}

// Quarantäne verlängern
function extendQuarantine(resourceId) {
    if (confirm('Möchten Sie die Quarantäne für diese Ressource verlängern?')) {
        // TODO: Implementiere Modal für Quarantäne-Verlängerung
        alert('Diese Funktion wird noch implementiert.');
    }
}

// Fallback für Dropdowns
document.addEventListener('click', function(e) {
    // Prüfe ob ein Dropdown-Toggle geklickt wurde
    if (e.target.closest('.dropdown-toggle')) {
        const button = e.target.closest('.dropdown-toggle');
        const dropdown = button.nextElementSibling;
        
        if (dropdown && dropdown.classList.contains('dropdown-menu')) {
            // Toggle show class
            dropdown.classList.toggle('show');
            button.setAttribute('aria-expanded', dropdown.classList.contains('show'));
            
            // Schließe andere Dropdowns
            document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
                if (menu !== dropdown) {
                    menu.classList.remove('show');
                    menu.previousElementSibling.setAttribute('aria-expanded', 'false');
                }
            });
        }
    } else {
        // Schließe alle Dropdowns wenn außerhalb geklickt
        document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
            menu.classList.remove('show');
            menu.previousElementSibling.setAttribute('aria-expanded', 'false');
        });
    }
});
</script>
{% endblock %}