{% extends "base.html" %}

{% block title %}File Areas{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-folder2-open"></i> File Areas</h1>
    <p>FidoNet file echos and local file libraries.</p>
</div>

<div class="mb-3">
    <a href="{{ url_for('file_areas.smart_upload') }}" class="btn btn-primary btn-sm">
        <i class="bi bi-cloud-arrow-up"></i> Smart Upload (auto-route by tag)
    </a>
</div>

{% if rows %}
    {% for slug in cat_order %}
    {% set cat_rows = grouped[slug] %}
    {% set cat_label = cat_names.get(slug, slug|capitalize) %}
    <div class="card mb-3">
        <div class="card-header"><strong>{{ cat_label }}</strong>
            <span class="badge bg-secondary">{{ cat_rows|length }}</span>
        </div>
        <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0" style="table-layout: fixed;">
                <colgroup>
                    <col style="width: 20%;">
                    <col style="width: 25%;">
                    <col style="width: 10%;">
                    <col style="width: 15%;">
                    <col style="width: 30%;">
                </colgroup>
                <thead><tr>
                    <th>Tag</th><th>Name</th><th>Files</th><th>Total Size</th>
                    <th>Description</th>
                </tr></thead>
                <tbody>
                {% for r in cat_rows %}
                    <tr>
                        <td class="text-truncate"><code><a href="{{ url_for('file_areas.view_area', area_id=r.area.id) }}">{{ r.area.tag }}</a></code></td>
                        <td class="text-truncate">{{ r.area.name or '' }}</td>
                        <td>{{ r.count }}</td>
                        <td>{{ '%.1f'|format(r.total_size / 1024) }} KB</td>
                        <td class="text-truncate"><small class="text-muted">{{ r.area.description or '' }}</small></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}
{% else %}
    <div class="card"><div class="p-3 text-muted">No file areas yet — they'll appear after the first inbound TIC arrives.</div></div>
{% endif %}
{% endblock %}