{% extends "base.html" %}

{% block title %}Upload Files - Flask Files{% endblock %}

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

{% block content %}
<section class="upload-container">
    <h2>Upload Files</h2>

    <div class="upload-tabs">
        <button class="tab-btn active" data-tab="file-tab">Files</button>
        <button class="tab-btn" data-tab="folder-tab">Folder</button>
    </div>

    <div class="upload-location">
        <p>
            Uploading to:
            {% if parent_folder %}
            <a href="{{ url_for('files.browser', folder_id=parent_folder.id) }}">{{ parent_folder.name }}</a>
            {% else %}
            <a href="{{ url_for('files.browser') }}">Root</a>
            {% endif %}
        </p>
    </div>

    <div class="tab-content active" id="file-tab">
        <form id="file-upload-form" enctype="multipart/form-data" class="upload-form">
            <input type="hidden" name="folder_id" value="{{ parent_folder.id if parent_folder else '' }}">

            <div class="upload-dropzone" id="file-dropzone">
                <i class="fas fa-cloud-upload-alt upload-icon"></i>
                <p>Drag & drop files here to start uploading</p>
                <p>or</p>
                <label class="btn primary">
                    <i class="fas fa-file"></i> Select Files
                    <input type="file" name="files[]" multiple id="file-input" style="display: none">
                </label>
            </div>

            <div class="upload-progress-container">
                <h4>Upload Progress</h4>
                <div class="progress-overall">
                    <div class="progress-label">
                        <span>Overall Progress</span>
                        <span id="progress-percentage">0%</span>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-bar" id="progress-bar"></div>
                    </div>
                </div>
                <div class="upload-stats">
                    <div class="stat">
                        <span class="stat-label">Speed:</span>
                        <span class="stat-value" id="upload-speed">0 KB/s</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Uploaded:</span>
                        <span class="stat-value" id="uploaded-size">0 KB / 0 KB</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Remaining:</span>
                        <span class="stat-value" id="time-remaining">calculating...</span>
                    </div>
                </div>
            </div>

            <div class="selected-files">
                <h4>Files</h4>
                <div class="file-list" id="file-list"></div>
            </div>

            <div class="form-actions">
                <a href="{{ url_for('files.browser', folder_id=parent_folder.id if parent_folder else None) }}"
                    class="btn">Back to Browser</a>
            </div>
        </form>
    </div>

    <div class="tab-content" id="folder-tab">
        <form id="folder-upload-form" enctype="multipart/form-data" class="upload-form">
            <input type="hidden" name="folder_id" value="{{ parent_folder.id if parent_folder else '' }}">

            <div class="upload-dropzone folder-dropzone" id="folder-dropzone">
                <i class="fas fa-folder-open upload-icon"></i>
                <p>Select a folder to upload</p>
                <p>(Some browsers may not fully support folder drag & drop)</p>
                <label class="btn primary">
                    <i class="fas fa-folder"></i> Select Folder
                    <input type="file" name="files[]" webkitdirectory directory multiple id="folder-input"
                        style="display: none">
                </label>
            </div>

            <div class="upload-progress-container">
                <h4>Upload Progress</h4>
                <div class="progress-overall">
                    <div class="progress-label">
                        <span>Overall Progress</span>
                        <span id="folder-progress-percentage">0%</span>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-bar" id="folder-progress-bar"></div>
                    </div>
                </div>
                <div class="upload-stats">
                    <div class="stat">
                        <span class="stat-label">Speed:</span>
                        <span class="stat-value" id="folder-upload-speed">0 KB/s</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Uploaded:</span>
                        <span class="stat-value" id="folder-uploaded-size">0 KB / 0 KB</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Remaining:</span>
                        <span class="stat-value" id="folder-time-remaining">calculating...</span>
                    </div>
                </div>
            </div>

            <div class="selected-files">
                <h4>Folder Contents</h4>
                <div class="file-list" id="folder-file-list"></div>
            </div>

            <div class="form-actions">
                <a href="{{ url_for('files.browser', folder_id=parent_folder.id if parent_folder else None) }}"
                    class="btn">Back to Browser</a>
            </div>
        </form>
    </div>
</section>
{% endblock %}

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