{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Manage Videos - {{ post.judul }}{% endblock %}

{% block content %}
<div class="p-4 md:p-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 space-y-4 sm:space-y-0">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-gray-900">Manage Videos</h1>
            <p class="text-sm md:text-base text-gray-600">{{ post.judul }}</p>
        </div>
        <a href="{% url 'admin_panel:blog_detail' post.pk %}" 
           class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 w-full sm:w-auto justify-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Post
        </a>
    </div>

    <!-- Upload Form -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6 mb-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Add New Video</h2>
        <form method="POST" enctype="multipart/form-data" class="space-y-4">
            {% csrf_token %}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="{{ form.title.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Video Title <span class="text-red-500">*</span>
                    </label>
                    {{ form.title }}
                    {% if form.title.errors %}
                        <div class="text-sm text-red-600 mt-1">{{ form.title.errors.0 }}</div>
                    {% endif %}
                </div>
                <div>
                    <label for="{{ form.video_url.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Video URL
                    </label>
                    {{ form.video_url }}
                    {% if form.video_url.errors %}
                        <div class="text-sm text-red-600 mt-1">{{ form.video_url.errors.0 }}</div>
                    {% endif %}
                    <p class="text-xs text-gray-500 mt-1">YouTube, Vimeo, or other video URL</p>
                </div>
            </div>
            <div>
                <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                    Description
                </label>
                {{ form.description }}
                {% if form.description.errors %}
                    <div class="text-sm text-red-600 mt-1">{{ form.description.errors.0 }}</div>
                {% endif %}
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="{{ form.video.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Upload Video File
                    </label>
                    {{ form.video }}
                    {% if form.video.errors %}
                        <div class="text-sm text-red-600 mt-1">{{ form.video.errors.0 }}</div>
                    {% endif %}
                </div>
                <div>
                    <label for="{{ form.thumbnail.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        Thumbnail Image
                    </label>
                    {{ form.thumbnail }}
                    {% if form.thumbnail.errors %}
                        <div class="text-sm text-red-600 mt-1">{{ form.thumbnail.errors.0 }}</div>
                    {% endif %}
                </div>
            </div>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                <i class="fas fa-plus mr-2"></i>
                Add Video
            </button>
        </form>
    </div>

    <!-- Videos List -->
    {% if videos %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for video in videos %}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="aspect-w-16 aspect-h-9">
                {% if video.thumbnail %}
                    <img src="{{ video.thumbnail.url }}" alt="{{ video.title }}" 
                         class="w-full h-48 object-cover">
                {% elif video.video_url %}
                    <div class="w-full h-48 bg-gray-200 flex items-center justify-center">
                        <i class="fas fa-video text-4xl text-gray-400"></i>
                    </div>
                {% else %}
                    <div class="w-full h-48 bg-gray-200 flex items-center justify-center">
                        <i class="fas fa-file-video text-4xl text-gray-400"></i>
                    </div>
                {% endif %}
            </div>
            <div class="p-4">
                <h3 class="font-medium text-gray-900 mb-2">{{ video.title }}</h3>
                {% if video.description %}
                <p class="text-sm text-gray-600 mb-3">{{ video.description|truncatechars:100 }}</p>
                {% endif %}
                <div class="flex items-center justify-between text-xs text-gray-500 mb-3">
                    <span>Order: {{ video.order }}</span>
                    <span>{{ video.created_at|date:"M d, Y" }}</span>
                </div>
                <div class="flex space-x-2">
                    {% if video.video_url %}
                    <a href="{{ video.video_url }}" target="_blank" 
                       class="text-blue-600 hover:text-blue-800 text-sm">
                        <i class="fas fa-external-link-alt mr-1"></i>
                        View
                    </a>
                    {% endif %}
                    <form method="POST" action="{% url 'admin_panel:blog_video_delete' video.pk %}" class="inline">
                        {% csrf_token %}
                        <button type="submit" onclick="return confirm('Delete this video?')" 
                                class="text-red-600 hover:text-red-800 text-sm">
                            <i class="fas fa-trash mr-1"></i>
                            Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <i class="fas fa-video text-6xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900 mb-2">No videos added</h3>
        <p class="text-gray-500">Add videos to enhance your blog post</p>
    </div>
    {% endif %}
</div>
{% endblock %}