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

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3><i class="fas fa-edit"></i> Editar Arquivo</h3>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- Preview atual -->
                        <div class="current-file mb-4">
                            <h5>Arquivo Atual</h5>
                            <div class="row">
                                <div class="col-md-4">
                                    {% if media_file.is_image %}
                                        <img src="{{ media_file.file.url }}" 
                                             alt="{{ media_file.title }}" 
                                             class="img-fluid rounded">
                                    {% elif media_file.is_video %}
                                        <video class="w-100 rounded" style="max-height: 200px;">
                                            <source src="{{ media_file.file.url }}" type="{{ media_file.mime_type }}">
                                        </video>
                                    {% else %}
                                        <div class="text-center p-3 bg-light rounded">
                                            {% if media_file.is_audio %}
                                                <i class="fas fa-music fa-3x text-muted"></i>
                                            {% elif media_file.is_document %}
                                                <i class="fas fa-file-pdf fa-3x text-danger"></i>
                                            {% else %}
                                                <i class="fas fa-file fa-3x text-muted"></i>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="col-md-8">
                                    <h6>{{ media_file.title }}</h6>
                                    <p class="text-muted">{{ media_file.file_size_human }} • {{ media_file.get_file_type_display }}</p>
                                    {% if media_file.description %}
                                        <p><small>{{ media_file.description|truncatechars:100 }}</small></p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <!-- Form Fields -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.title.id_for_label }}" class="form-label">
                                        <strong>{{ form.title.label }}</strong>
                                    </label>
                                    {{ form.title }}
                                    {% if form.title.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.title.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.category.id_for_label }}" class="form-label">
                                        {{ form.category.label }}
                                    </label>
                                    {{ form.category }}
                                    {% if form.category.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.category.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                {{ form.description.label }}
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.description.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="form-group mb-3">
                            <label for="{{ form.tags.id_for_label }}" class="form-label">
                                {{ form.tags.label }}
                            </label>
                            {{ form.tags }}
                            <small class="form-text text-muted">{{ form.tags.help_text }}</small>
                            {% if form.tags.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.tags.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="form-check mb-3">
                            {{ form.is_public }}
                            <label class="form-check-label" for="{{ form.is_public.id_for_label }}">
                                {{ form.is_public.label }}
                            </label>
                            {% if form.is_public.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.is_public.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Substituir arquivo (opcional) -->
                        <div class="form-group mb-3">
                            <label for="{{ form.file.id_for_label }}" class="form-label">
                                <i class="fas fa-exchange-alt"></i> Substituir Arquivo (Opcional)
                            </label>
                            {{ form.file }}
                            <small class="form-text text-muted">
                                Deixe em branco para manter o arquivo atual.
                            </small>
                            {% if form.file.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.file.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Preview do novo arquivo -->
                        <div class="file-preview mb-3"></div>
                        
                        <!-- Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ media_file.get_absolute_url }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Salvar Alterações
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}