{% extends "sidebar.html" %}

{% block title %}AstraOS - ETS2 DLCs{% endblock %}

{% block content %}
<div class="space-y-10">
    <header class="flex justify-between items-center gap-4">
        <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">ETS2 DLCs</h2>
    </header>

    <div class="text-sm text-gray-400">
        Große DLC-Pakete werden im Hintergrund als ZIP vorbereitet. Der Download steht erst bereit, wenn der Status <span class="text-white font-semibold">Bereit</span> ist.
    </div>

    <div class="bg-black/40 rounded-xl backdrop-blur-lg overflow-hidden {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <table class="min-w-full divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/20{% endif %}">
            <thead class="bg-black/20">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">DLC Datum</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Erstellt von</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-300 uppercase tracking-wider">Aktionen</th>
                </tr>
            </thead>
            <tbody class="divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/30{% endif %}">
                {% for package in dlc_packages %}
                <tr class="transition {% if maintenance_active %}hover:bg-yellow-500/5{% else %}hover:bg-purple-500/5{% endif %}">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{{ package.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ package.dlc_date_display }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        <span class="px-2 py-1 rounded-full text-xs font-semibold
                            {% if package.archive_status == 'ready' %}bg-green-500/20 text-green-300
                            {% elif package.archive_status == 'building' or package.archive_status == 'pending' %}bg-yellow-500/20 text-yellow-300
                            {% else %}bg-red-500/20 text-red-300{% endif %}">
                            {{ package.archive_status_display }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ package.created_by or 'N/A' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-right">
                        <div class="flex items-center justify-end gap-2">
                            {% if package.download_ready %}
                            <a href="{{ url_for('download_ets2_dlc_package', package_id=package._id) }}" class="px-3 py-2 text-sm font-semibold rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                                Download
                            </a>
                            {% else %}
                            <span class="px-3 py-2 text-sm font-semibold rounded-lg bg-gray-700 text-gray-300 cursor-not-allowed">
                                Download in Vorbereitung
                            </span>
                            {% endif %}
                            {% if can_manage_ets2_dlcs %}
                            <form action="{{ url_for('delete_ets2_dlc_package', package_id=package._id) }}" method="POST" onsubmit="return confirm('Möchtest du dieses DLC-Paket wirklich löschen?');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                <button type="submit" class="px-3 py-2 text-sm font-semibold rounded-lg transition text-white bg-red-600/80 hover:bg-red-700">
                                    Löschen
                                </button>
                            </form>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-6 py-8 text-center text-gray-400">Noch keine DLC-Pakete vorhanden.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if can_manage_ets2_dlcs %}
    <div class="bg-black/40 rounded-xl backdrop-blur-lg p-8 {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <h3 class="text-2xl font-bold mb-6 {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Neues DLC-Paket erstellen</h3>
        <form action="{{ url_for('create_ets2_dlc_package') }}" method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div>
                <label for="package_name" class="block text-sm font-medium text-gray-300">Paketname</label>
                <input type="text" name="package_name" id="package_name" required class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div>
                <label for="folder_path" class="block text-sm font-medium text-gray-300">Ordnerpfad</label>
                <input type="text" name="folder_path" id="folder_path" required placeholder="z.B. C:\\ETS2\\DLCs\\Package1" class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div>
                <label for="dlc_date" class="block text-sm font-medium text-gray-300">DLC Datum</label>
                <input type="date" name="dlc_date" id="dlc_date" required class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div class="flex justify-end">
                <button type="submit" class="px-6 py-2 text-white font-semibold rounded-lg transition {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                    Paket erstellen
                </button>
            </div>
        </form>
    </div>
    {% endif %}
</div>
{% endblock %}