{% extends "base.html" %}
{% block title %}Echomail Areas — {{ config.BBS_NAME }}{% endblock %}

{% block extra_css %}
<style>
.unread-badge { background-color: #00ff00; color: #000; font-size: 0.75rem; padding: 2px 6px; border-radius: 10px; }
.network-header { color: #00ff00; font-size: 1.1rem; font-weight: bold; border-bottom: 1px solid #00ff00; padding-bottom: 4px; margin-top: 20px; }
</style>
{% endblock %}

{% block content %}
<div class="bbs-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
        <h1 class="mb-1"><i class="bi bi-envelope-paper"></i> Echomail Networks</h1>
        <p class="mb-0">FidoNet / QWK networked message areas</p>
    </div>
    <div>
        <a href="{{ url_for('echomail.netmail_inbox') }}" class="btn btn-outline-success btn-sm">
            <i class="bi bi-mailbox"></i> QWK Netmail
        </a>
        <a href="{{ url_for('echomail.netmail_compose') }}" class="btn btn-success btn-sm">
            <i class="bi bi-pencil-square"></i> Compose Netmail
        </a>
    </div>
</div>

{% if areas_by_network %}
    {% for network, area_list in areas_by_network.items() %}
    <div class="network-header">
        <i class="bi bi-diagram-3"></i> {{ network.name }}
        <small class="ms-2" style="color:#00cc00; font-size:0.85rem;">{{ network.network_type|upper }}</small>
    </div>
    <div class="row g-3 mb-4">
        {% for area, unread in area_list %}
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-chat-square-text"></i> {{ area.name }}</span>
                    {% if unread > 0 %}
                    <span class="unread-badge">{{ unread }} new</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if area.description %}
                    <p class="card-text" style="font-size:0.85rem;">{{ area.description }}</p>
                    {% endif %}
                    <p class="card-text" style="font-size:0.8rem;">
                        <i class="bi bi-envelope"></i> {{ area.total_messages or 0 }} messages
                        {% if area.last_message_at %}
                        &nbsp;|&nbsp;Last: {{ area.last_message_at.strftime('%Y-%m-%d') }}
                        {% endif %}
                    </p>
                    <code style="font-size:0.75rem; color:#00cc00;">{{ area.tag }}</code>
                </div>
                <div class="card-footer">
                    <a href="{{ url_for('echomail.area', area_id=area.id) }}" class="btn btn-primary btn-sm">
                        <i class="bi bi-folder2-open"></i> Enter Area
                    </a>
                    <a href="{{ url_for('echomail.compose', area_id=area.id) }}" class="btn btn-primary btn-sm ms-1">
                        <i class="bi bi-pencil-square"></i> Compose
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endfor %}
{% else %}
<div class="card">
    <div class="card-body text-center" style="padding: 40px;">
        <i class="bi bi-inbox" style="font-size: 3rem;"></i>
        <p class="mt-3">No echo areas are currently available.</p>
        {% if current_user.is_admin %}
        <a href="{{ url_for('echomail_admin.dashboard') }}" class="btn btn-primary">
            <i class="bi bi-gear"></i> Configure Echomail
        </a>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}