{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="title">Secure File Storage</div>
    <div class="subtitle">Upload and manage isolated files securely (Max 5MB).</div>

    <div class="grid">
        <div class="glass-panel" style="grid-column: span 1;">
            <h3 style="margin-top:0; color:var(--primary);">Upload File</h3>
            <form method="POST" action="{{ url_for('storage_upload') }}" enctype="multipart/form-data">
                <div class="form-group">
                    <label>Select File (TxT, PDF, PNG/JPG, MP4, Docs)</label>
                    <input type="file" name="file" class="form-input" required style="padding: 0.5rem; background:rgba(0,0,0,0.3);">
                </div>
                <button type="submit" class="btn">Secure Upload</button>
            </form>
        </div>

        <div class="glass-panel" style="grid-column: span 2;">
            <h3 style="margin-top:0; color:var(--primary);">Your Files</h3>
            {% if files %}
            <table>
                <thead>
                    <tr>
                        <th>Filename</th>
                        <th>Size (Bytes)</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for f in files %}
                    <tr>
                        <td>{{ f.name }}</td>
                        <td>{{ f.size }}</td>
                        <td>
                            <a href="{{ url_for('storage_download', filename=f.name) }}" class="btn" style="padding:0.4rem 0.8rem; font-size:0.75rem;">Download</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color:var(--text-muted);">No files uploaded in your secure container.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}