{% 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-upload"></i> Upload de Arquivo</h3>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- Upload Zone -->
                        <div class="upload-zone mb-3">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                            <h5>Arraste e solte seu arquivo aqui</h5>
                            <p class="text-muted">ou clique no botão abaixo para selecionar</p>
                            {{ form.file }}
                        </div>
                        
                        <!-- Preview Area -->
                        <div class="file-preview mb-3"></div>
                        
                        <!-- 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>
                            <small class="form-text text-muted d-block">
                                Arquivos públicos podem ser acessados por qualquer usuário.
                            </small>
                            {% if form.is_public.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.is_public.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'media_storage:list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Voltar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-upload"></i> Fazer Upload
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Informações sobre formatos suportados -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5><i class="fas fa-info-circle"></i> Formatos Suportados</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <h6><i class="fas fa-image text-primary"></i> Imagens</h6>
                            <small class="text-muted">JPG, JPEG, PNG, GIF, WebP, SVG</small>
                        </div>
                        <div class="col-md-3">
                            <h6><i class="fas fa-video text-purple"></i> Vídeos</h6>
                            <small class="text-muted">MP4, AVI, MOV, WMV, FLV, WebM</small>
                        </div>
                        <div class="col-md-3">
                            <h6><i class="fas fa-music text-success"></i> Áudios</h6>
                            <small class="text-muted">MP3, WAV, OGG, FLAC, AAC</small>
                        </div>
                        <div class="col-md-3">
                            <h6><i class="fas fa-file text-warning"></i> Documentos</h6>
                            <small class="text-muted">PDF, DOC, DOCX, TXT, RTF</small>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <h6><i class="fas fa-archive text-info"></i> Arquivos</h6>
                            <small class="text-muted">ZIP, RAR, 7Z, TAR, GZ</small>
                        </div>
                    </div>
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Tamanho máximo:</strong> 100MB por arquivo
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-gerar título baseado no nome do arquivo
    const fileInput = document.querySelector('#id_file');
    const titleInput = document.querySelector('#id_title');
    
    if (fileInput && titleInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && !titleInput.value) {
                // Gerar título baseado no nome do arquivo
                const fileName = file.name;
                const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
                const title = nameWithoutExt.replace(/[_-]/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                titleInput.value = title;
            }
        });
    }
});
</script>
{% endblock %}