{% extends "base.html" %}

{% block title %}Upload Extra Files - {{ lego_set.set_number }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1>
            <i class="bi bi-cloud-upload"></i> Upload Extra Files
        </h1>
        <p class="text-muted">
            {{ lego_set.set_number }}: {{ lego_set.set_name }}
        </p>
    </div>
    <div class="col-auto">
        <a href="{{ url_for('sets.view_set', set_id=lego_set.id) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to Set
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-file-earmark-arrow-up"></i> Upload Files</h5>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data">
                    <!-- File Upload -->
                    <div class="mb-3">
                        <label for="files" class="form-label">
                            <strong>Select Files</strong>
                        </label>
                        <input class="form-control" 
                               type="file" 
                               id="files" 
                               name="files" 
                               multiple 
                               required>
                        <small class="form-text text-muted">
                            Select one or more files to upload. Multiple files can be selected at once.
                        </small>
                    </div>
                    
                    <!-- Category -->
                    <div class="mb-3">
                        <label for="category" class="form-label">
                            <strong>Category</strong>
                        </label>
                        <select class="form-select" id="category" name="category">
                            <option value="auto">Auto-detect from file type</option>
                            <option value="bricklink">BrickLink (XML)</option>
                            <option value="studio">Stud.io Files</option>
                            <option value="ldraw">LDraw Files</option>
                            <option value="ldd">LEGO Digital Designer</option>
                            <option value="box_art">Box Art</option>
                            <option value="photo">Photos</option>
                            <option value="document">Documents</option>
                            <option value="data">Data Files</option>
                            <option value="archive">Archives</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description" class="form-label">
                            <strong>Description</strong> <span class="text-muted">(optional)</span>
                        </label>
                        <textarea class="form-control" 
                                  id="description" 
                                  name="description" 
                                  rows="3"
                                  placeholder="Add a description for these files..."></textarea>
                        <small class="form-text text-muted">
                            This description will apply to all uploaded files.
                        </small>
                    </div>
                    
                    <!-- Submit -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-cloud-upload"></i> Upload Files
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Info Card -->
        <div class="card bg-light mb-3">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-info-circle"></i> Supported Files</h6>
            </div>
            <div class="card-body">
                <strong>Images:</strong>
                <p class="small mb-2">JPG, PNG, GIF, WebP, BMP, SVG</p>
                
                <strong>Documents:</strong>
                <p class="small mb-2">PDF, DOC, DOCX, TXT, RTF</p>
                
                <strong>Data Files:</strong>
                <p class="small mb-2">XML, JSON, CSV, XLSX, XLS</p>
                
                <strong>3D/CAD:</strong>
                <p class="small mb-2">
                    LDR, MPD (LDraw)<br>
                    IO (Stud.io)<br>
                    LXF, LXFML (LDD)<br>
                    STL, OBJ
                </p>
                
                <strong>Archives:</strong>
                <p class="small mb-0">ZIP, RAR, 7Z, TAR, GZ</p>
            </div>
        </div>
        
        <!-- Tips Card -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-lightbulb"></i> Tips</h6>
            </div>
            <div class="card-body">
                <ul class="small mb-0">
                    <li class="mb-2">
                        <strong>BrickLink XML:</strong> Part lists for ordering
                    </li>
                    <li class="mb-2">
                        <strong>Stud.io Files:</strong> Digital building models
                    </li>
                    <li class="mb-2">
                        <strong>Box Art:</strong> High-res images of the box
                    </li>
                    <li class="mb-2">
                        <strong>Photos:</strong> Your built model pictures
                    </li>
                    <li class="mb-0">
                        <strong>Archives:</strong> Zip multiple files together
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Selected Files Preview -->
<script>
document.getElementById('files').addEventListener('change', function(e) {
    const files = Array.from(e.target.files);
    if (files.length > 0) {
        console.log(`Selected ${files.length} file(s):`);
        files.forEach(file => {
            console.log(`- ${file.name} (${(file.size / 1024).toFixed(1)} KB)`);
        });
    }
});
</script>

{% endblock %}