{% extends "base.html" %}

{% block title %}File Browser - Flask Files{% endblock %}

{% block content %}
<section class="file-browser">
    <div class="browser-header">
        <h2>File Browser</h2>
        <!-- <div class="browser-actions"> -->
        <!-- <a href="{{ url_for('files.upload', folder=current_folder.id if current_folder else None) }}"
                class="btn primary">
                <i class="fas fa-cloud-upload-alt"></i> Upload
            </a> -->
        <!-- <button class="btn" id="new-folder-btn">
                <i class="fas fa-folder-plus"></i> New Folder
            </button> -->
        <!-- </div> -->
    </div>

    <div class="path-nav">
        <a href="{{ url_for('files.browser') }}" class="path-item">
            <i class="fas fa-home"></i> Home
        </a>
        {% for folder in breadcrumbs %}
        <span class="path-separator">/</span>
        <a href="{{ url_for('files.browser', folder=folder.id) }}" class="path-item">{{ folder.name }}</a>
        {% endfor %}
    </div>

    {% if folders or files %}
    <div class="files-container">
        {% if folders %}
        <div class="folder-section">
            <h3>Folders</h3>
            <div class="files-list">
                {% for folder in folders %}
                <div class="file-item folder">
                    <a href="{{ url_for('files.browser', folder=folder.id) }}" class="file-link">
                        <div class="file-icon">
                            <i class="fas fa-folder fa-2x"></i>
                        </div>
                        <div class="file-name">{{ folder.name }}</div>
                    </a>
                    <div class="file-actions">
                        <button class="action-btn rename" data-id="{{ folder.id }}" title="Rename">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" data-id="{{ folder.id }}" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if files %}
        <div class="file-section">
            <h3>Files</h3>
            <div class="files-list">
                {% for file in files %}
                <div class="file-item">
                    <div class="file-link">
                        <div class="file-icon">
                            {% if file.name.endswith('.pdf') %}<i class="fas fa-file-pdf fa-2x"></i>
                            {% elif file.name.endswith(('.jpg', '.jpeg', '.png', '.gif')) %}<i
                                class="fas fa-file-image fa-2x"></i>
                            {% elif file.name.endswith(('.mp3', '.wav', '.flac')) %}<i
                                class="fas fa-file-audio fa-2x"></i>
                            {% elif file.name.endswith(('.mp4', '.mov', '.avi')) %}<i
                                class="fas fa-file-video fa-2x"></i>
                            {% elif file.name.endswith(('.doc', '.docx')) %}<i class="fas fa-file-word fa-2x"></i>
                            {% elif file.name.endswith(('.xls', '.xlsx')) %}<i class="fas fa-file-excel fa-2x"></i>
                            {% elif file.name.endswith(('.ppt', '.pptx')) %}<i class="fas fa-file-powerpoint fa-2x"></i>
                            {% elif file.name.endswith('.zip') %}<i class="fas fa-file-archive fa-2x"></i>
                            {% else %}<i class="fas fa-file fa-2x"></i>{% endif %}
                        </div>
                        <div class="file-details">
                            <div class="file-name">{{ file.name }}</div>
                            <div class="file-meta">
                                <span class="file-size">{{ (file.size / 1024)|round(1) }} KB</span>
                                <span class="file-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="file-actions">
                        <a href="#" class="action-btn download" data-id="{{ file.id }}" title="Download">
                            <i class="fas fa-download"></i>
                        </a>
                        <a href="#" class="action-btn share" data-id="{{ file.id }}" title="Share">
                            <i class="fas fa-share-alt"></i>
                        </a>
                        <button class="action-btn rename" data-id="{{ file.id }}" title="Rename">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" data-id="{{ file.id }}" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">
            <i class="fas fa-folder-open fa-3x"></i>
        </div>
        <p>This folder is empty</p>
        <p>Upload files or create a new folder to get started</p>
        <div class="empty-actions">
            <a href="{{ url_for('files.upload', folder=current_folder.id if current_folder else None) }}"
                class="btn primary">
                <i class=" fas fa-cloud-upload-alt"></i> Upload
            </a>
            <button class="btn" id="empty-new-folder-btn">
                <i class="fas fa-folder-plus"></i> New Folder
            </button>
        </div>
    </div>
    {% endif %}
</section>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // New folder functionality
        const newFolderBtn = document.getElementById('new-folder-btn');
        const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');

        function showNewFolderPrompt() {
            const folderName = prompt('Enter folder name:');
            if (folderName) {
                createNewFolder(folderName);
            }
        }

        function createNewFolder(name) {
            const formData = new FormData();
            formData.append('name', name);

            {% if current_folder %}
            formData.append('parent_id', '{{ current_folder.id }}');
            {% endif %}

            fetch('/files/create_folder', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        alert(data.error || 'Failed to create folder');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while creating the folder');
                });
        }

        if (newFolderBtn) {
            newFolderBtn.addEventListener('click', showNewFolderPrompt);
        }

        if (emptyNewFolderBtn) {
            emptyNewFolderBtn.addEventListener('click', showNewFolderPrompt);
        }

        // Setup dismiss
        const closeBtn = alert.querySelector('.close');
        closeBtn.addEventListener('click', function () {
            alert.classList.add('fade-out');
            setTimeout(() => {
                alert.remove();
            }, 300);
        });

        // Auto dismiss
        setTimeout(() => {
            if (alert.parentNode) {
                alert.classList.add('fade-out');
                setTimeout(() => {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                }, 300);
            }
        }, 5000);
    });

    // Helper functions
    function formatSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    function formatDate(dateString) {
        if (!dateString) return 'Unknown';
        const date = new Date(dateString);
        return date.toLocaleString();
    }

    function escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
</script>
{% endblock %}