{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="title">Hosting Management</div>
    <div class="subtitle">Upload static web pages securely to your personal directory.</div>

    <div class="grid">
        <div class="glass-panel" style="grid-column: span 1;">
            <h3 style="margin-top:0; color:var(--primary);">Upload Web File</h3>
            <p style="color:var(--text-muted); font-size:0.875rem; margin-bottom:1rem;">Allowed: HTML, CSS, JS, Images (PNG/JPG/GIF/SVG).</p>
            <form method="POST" action="{{ url_for('hosting_upload') }}" enctype="multipart/form-data">
                <div class="form-group">
                    <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">Deploy File</button>
            </form>
        </div>

        <div class="glass-panel" style="grid-column: span 2;">
            <h3 style="margin-top:0; color:var(--primary);">Live Files</h3>
            <p style="color:var(--text-muted); font-size:0.875rem; margin-bottom:1rem;">Your personal hosting root is active.</p>
            {% if files %}
            <table>
                <thead>
                    <tr>
                        <th>Filename</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for f in files %}
                    <tr>
                        <td>{{ f }}</td>
                        <td>
                            <div style="display:flex; align-items:center;">
                                <a href="/h/{{ user.id }}/{{ f }}" target="_blank" class="btn" style="padding:0.4rem 0.8rem; font-size:0.75rem; width:auto;">View Live</a>
                                <div id="link-{{ loop.index }}" style="display:none;">/h/{{ user.id }}/{{ f }}</div>
                                <button class="clipboard-btn" data-target="link-{{ loop.index }}">Copy URL</button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color:var(--text-muted);">No deployment files found.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}