{% extends "base.html" %}

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

{% block extra_css %}
<style>
    /* Additional page-specific styles if needed */
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="browser-container">
        <div class="browser-header">
            <div class="browser-title">
                <i class="fas fa-folder-open"></i>
                <h2>{% if current_folder %}{{ current_folder.name }}{% else %}My Files{% endif %}</h2>
            </div>
            <div class="browser-actions">
                <div class="search-container">
                    <form action="{{ url_for('files.browser') }}" method="get">
                        <input type="text" name="q" placeholder="Search files..."
                            value="{{ request.args.get('q', '') }}">
                        <button type="submit" class="search-btn">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>
                <div class="view-toggle">
                    <button id="grid-view-btn" class="view-btn active" title="Grid View">
                        <i class="fas fa-th"></i>
                    </button>
                    <button id="list-view-btn" class="view-btn" title="List View">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
                <a href="{% if current_folder %}{{ url_for('files.upload', folder_id=current_folder.id) }}{% else %}{{ url_for('files.upload') }}{% endif %}"
                    class="btn primary">
                    <i class="fas fa-upload"></i> Upload
                </a>
                <button id="new-folder-btn" class="btn secondary">
                    <i class="fas fa-folder-plus"></i> New Folder
                </button>
            </div>
        </div>

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

        <div id="files-container" class="files-container grid-view">
            {% include 'files/partials/folder_contents.html' %}
        </div>
    </div>
</div>

<!-- New Folder Modal -->
<div id="new-folder-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Create New Folder</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <form id="new-folder-form" action="{{ url_for('files.create_folder') }}" method="post">
                <div class="form-group">
                    <label for="folder-name">Folder Name</label>
                    <input type="text" id="folder-name" name="name" required placeholder="Enter folder name">
                    <input type="hidden" id="parent-folder-id" name="parent_id"
                        value="{% if current_folder %}{{ current_folder.id }}{% endif %}">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn modal-cancel">Cancel</button>
                    <button type="submit" class="btn primary">Create Folder</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Context Menu -->
<div id="context-menu" class="context-menu">
    <div class="context-menu-item" data-action="open" data-for="folder">
        <i class="fas fa-folder-open"></i> Open
    </div>
    <div class="context-menu-item" data-action="download" data-for="file">
        <i class="fas fa-download"></i> Download
    </div>
    <div class="context-menu-item" data-action="share" data-for="file">
        <i class="fas fa-share-alt"></i> Share
    </div>
    <div class="context-menu-item" data-action="rename" data-for="all">
        <i class="fas fa-pencil-alt"></i> Rename
    </div>
    <div class="context-menu-item" data-action="delete" data-for="all">
        <i class="fas fa-trash"></i> Delete
    </div>
</div>

{% block extra_js %}
<script>
    // Add folder entrance animation
    document.addEventListener('DOMContentLoaded', function () {
        const filesContainer = document.getElementById('files-container');
        if (filesContainer) {
            filesContainer.classList.add('folder-enter-active');
        }
    });
</script>
{% endblock %}
{% endblock %}