Flask-Files/app/templates/files/browser.html

{% extends "base.html" %}

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

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/browser.js') }}"></script>
<script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% endblock %}

{% block content %}
<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>

            <!-- File upload button and hidden input -->
            <input type="file" id="file-upload" multiple style="display: none">
            <button class="btn primary" id="upload-button">
                <i class="fas fa-upload"></i> Upload
            </button>

            <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>

<!-- New Folder Modal -->
<div id="new-folder-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Create New Folder</h2>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <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="folder_name" required>
                </div>
                <input type="hidden" id="parent_id" name="parent_id"
                    value="{{ current_folder.id if current_folder else '' }}">
                <div class="form-actions">
                    <button type="button" class="btn secondary modal-cancel">Cancel</button>
                    <button type="submit" class="btn primary">Create Folder</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Rename Modal -->
<div id="rename-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Rename Item</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <form id="rename-form" action="{{ url_for('files.rename_item') }}" method="post">
                <div class="form-group">
                    <label for="new-name">New Name</label>
                    <input type="text" id="new-name" name="new_name" required placeholder="Enter new name">
                    <input type="hidden" id="item-id" name="item_id">
                    <input type="hidden" id="item-type" name="item_type">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn modal-cancel">Cancel</button>
                    <button type="submit" class="btn primary">Rename</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div id="delete-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Delete Item</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete this item? This action cannot be undone.</p>
            <form id="delete-form" action="{{ url_for('files.delete_item', item_id='placeholder') }}" method="post">
                <input type="hidden" id="delete-item-id" name="item_id">
                <input type="hidden" id="delete-item-type" name="item_type">
                <div class="form-actions">
                    <button type="button" class="btn modal-cancel">Cancel</button>
                    <button type="submit" class="btn danger">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Context Menu -->
<div id="context-menu" class="context-menu"></div>

<!-- Add this before the closing content block -->
<div id="selection-actions" class="selection-actions">
    <span class="selection-count">0 items selected</span>
    <button class="action-btn" id="selection-download">
        <i class="fas fa-download"></i> Download
    </button>
    <button class="action-btn" id="selection-move">
        <i class="fas fa-cut"></i> Cut
    </button>
    <button class="action-btn" id="selection-copy">
        <i class="fas fa-copy"></i> Copy
    </button>
    <button class="action-btn danger" id="selection-delete">
        <i class="fas fa-trash"></i> Delete
    </button>
</div>
{% endblock %}