{% extends "base.html" %}

{% block title %}Upload File{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto bg-container rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-100">Upload File (Storage Only)</h2>
    <div class="info-box rounded-md p-4 mb-6">
        <p class="info-box-text">
            <strong>Note:</strong> This page only uploads files for storage. No automatic analysis will be started. 
            To upload and start analysis immediately, use the <a href="/newsubmission" class="underline">submission page</a>.
        </p>
    </div>
    
    <form 
        hx-post="{{ API_BASE_URL }}/api/files" 
        hx-encoding="multipart/form-data"
        hx-target="#upload-result"
        hx-indicator="#loading"
        class="space-y-6"
    >
        <div>
            <label for="file" class="block text-sm font-medium text-label mb-2">
                Select File *
            </label>
            <input 
                type="file" 
                id="file" 
                name="file" 
                required
                class="input"
            >
        </div>

        <div>
            <label for="exec_arguments" class="block text-sm font-medium text-label mb-2">
                Command Line Arguments (optional)
            </label>
            <input 
                type="text" 
                id="exec_arguments" 
                name="exec_arguments" 
                placeholder="-x param1 --config file.conf"
                class="input"
            >
            <p class="text-description text-sm mt-1">Command line exec_arguments to pass to the executable</p>
        </div>

        <div>
            <label for="source_url" class="block text-sm font-medium text-label mb-2">
                Source URL (optional)
            </label>
            <input 
                type="text" 
                id="source_url" 
                name="source_url" 
                placeholder="https://github.com/dobin/DetonatorLab/file"
                class="input"
            >
        </div>

        <div>
            <label for="comment" class="block text-sm font-medium text-label mb-2">
                Comment (optional)
            </label>
            <textarea 
                id="comment" 
                name="comment" 
                rows="3"
                placeholder="Add any notes about this file..."
                class="input"
            ></textarea>
        </div>

        <div class="flex space-x-4">
            <button 
                data-auth-required
                type="submit" 
                class="btn-primary"
            >
                Upload File (Storage Only)
            </button>
            <a 
                href="/files" 
                class="btn-gray"
            >
                Cancel
            </a>
        </div>
    </form>

    <div id="upload-result" class="mt-6"></div>
</div>

<script>
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        if (evt.detail.target.id === 'upload-result') {
            const xhr = evt.detail.xhr;
            const container = document.getElementById('upload-result');
            
            if (xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                container.innerHTML = `
                    <div class="bg-green-50 border border-green-200 rounded-md p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-green-800">File uploaded successfully!</h3>
                                <div class="mt-2 text-sm text-green-700">
                                    <p><strong>Filename:</strong> ${response.filename}</p>
                                    <p><strong>Hash:</strong> ${response.file_hash}</p>
                                    <p>File has been stored. You can manually create a submission from the files page.</p>
                                </div>
                                <div class="mt-4">
                                    <div class="flex space-x-2">
                                        <a href="/files" class="btn-success text-sm">
                                            View All Files
                                        </a>
                                        <a href="/submissions" class="btn-info text-sm">
                                            View Submissions
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                const response = JSON.parse(xhr.responseText);
                container.innerHTML = `
                    <div class="bg-red-50 border border-red-200 rounded-md p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-red-800">Upload failed</h3>
                                <div class="mt-2 text-sm text-red-700">
                                    <p>${response.detail || response.error || 'Unknown error occurred'}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            }
        }
    });
</script>
{% endblock %}