{% extends "base.html" %}

{% block title %}Edit File{% endblock %}

{% block content %}
<div class="card card-body">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">Edit File</h2>
        <a href="/files" class="link-info hover:underline">← Back to Files</a>
    </div>

    {% if file %}
    <div class="space-y-4">
        <div class="mb-4">
            <div class="text-sm text-muted space-y-1">
                <p><strong class="text-label">Filename:</strong> {{ file.filename }}</p>
                <p><strong class="text-label">File ID:</strong> {{ file.id }}</p>
                <p><strong class="text-label">Uploaded:</strong> {{ file.created_at|strftime('%Y-%m-%d %H:%M:%S') }}</p>
            </div>
        </div>
        
        <form 
            id="edit-file-form"
            hx-post="/api/files/{{ file.id }}/update" 
            hx-target="#edit-file-result"
            hx-indicator="#save-loading"
            class="space-y-4"
        >
            <div>
                <label for="source_url" class="block text-sm font-medium text-label mb-1">
                    Source URL (optional)
                </label>
                <input 
                    type="text" 
                    id="source_url" 
                    name="source_url" 
                    value="{{ file.source_url or '' }}"
                    placeholder="e.g., https://example.com/malware.exe"
                    class="input"
                >
                <p class="mt-1 text-xs text-description">The original URL where this file was obtained from</p>
            </div>

            <div>
                <label for="comment" class="block text-sm font-medium text-label mb-1">
                    Comment (optional)
                </label>
                <textarea 
                    id="comment" 
                    name="comment" 
                    rows="3"
                    placeholder="e.g., Malware sample from campaign XYZ"
                    class="input"
                >{{ file.comment or '' }}</textarea>
                <p class="mt-1 text-xs text-description">Additional notes or description about this file</p>
            </div>

            <div class="flex space-x-4 pt-4">
                <button 
                    type="submit" 
                    class="btn-primary flex-1"
                >
                    <span id="save-loading" class="hidden">Saving...</span>
                    <span id="save-button-text">Save Changes</span>
                </button>
                <a 
                    href="/files"
                    class="btn-gray"
                >
                    Cancel
                </a>
            </div>
        </form>
        
        <div id="edit-file-result" class="mt-4"></div>
    </div>

    <script>
        // Handle form submission
        document.getElementById('edit-file-form').addEventListener('htmx:beforeRequest', function(evt) {
            // Show loading state
            document.getElementById('save-loading').classList.remove('hidden');
            document.getElementById('save-button-text').classList.add('hidden');
        });

        // Handle response
        document.getElementById('edit-file-form').addEventListener('htmx:afterRequest', function(evt) {
            const xhr = evt.detail.xhr;
            const container = document.getElementById('edit-file-result');
            
            // Hide loading state
            document.getElementById('save-loading').classList.add('hidden');
            document.getElementById('save-button-text').classList.remove('hidden');
            
            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 updated successfully!</h3>
                                <div class="mt-4">
                                    <a href="/files" class="btn-success text-sm inline-block">
                                        Back to Files
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                try {
                    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">Update failed</h3>
                                    <div class="mt-2 text-sm text-red-700">
                                        <p>${response.error || 'Unknown error occurred'}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                } catch (e) {
                    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">Update failed</h3>
                                    <div class="mt-2 text-sm text-red-700">
                                        <p>Server error: ${xhr.status} - ${xhr.statusText}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }
            }
        });
    </script>
    {% else %}
    <div class="text-center text-red-500">
        <p>Error: Could not load file information.</p>
        <a href="/files" class="link-info hover:underline mt-4 inline-block">← Back to Files</a>
    </div>
    {% endif %}
</div>
{% endblock %}