{% extends "base.html" %}
{% block title %}{{ net.name }} — {{ 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; font-weight: bold; }
.category-header { color: #00cc00; font-size: 0.8rem; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #006600; padding-bottom: 2px; margin-top: 1.25rem; margin-bottom: .5rem; }
.area-card { border-color: #333 !important; }
.area-card:hover { border-color: #00ff00 !important; }
</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> {{ net.name }}
      {% if net.network_type == 'binkp' %}
        <span class="badge fs-6 align-middle" style="background:#0dcaf0!important;color:#000!important">BinkP</span>
      {% else %}
        <span class="badge fs-6 align-middle" style="background:#fd7e14!important;color:#000!important">QWK</span>
      {% endif %}
    </h1>
    <p class="mb-0 text-muted small">
      {% if net.network_type == 'binkp' and net.hub_address %}
        <i class="bi bi-diagram-3"></i> {{ net.hub_address }}
      {% elif net.network_type == 'qwk' and net.qwk_hub_id %}
        <i class="bi bi-hdd-network"></i> Hub: {{ net.qwk_hub_id }}
      {% endif %}
      {% if total_unread %}
        &nbsp;·&nbsp;<span class="unread-badge">{{ total_unread }} unread</span>
      {% endif %}
    </p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a href="{{ url_for('echomail.index') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-arrow-left"></i> Networks
    </a>
    <a href="{{ url_for('echomail.netmail_inbox') }}" class="btn btn-outline-success btn-sm">
      <i class="bi bi-mailbox"></i> Netmail
    </a>
  </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% for cat, msg in messages %}
    <div class="alert alert-{{ cat }} alert-dismissible fade show" role="alert">
      {{ msg }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}
{% endwith %}

{% if groups %}
  {% for category, area_list in groups.items() %}
  <div class="category-header">
    <i class="bi bi-folder"></i> {{ category }}
    <span class="text-muted fw-normal ms-1">({{ area_list|length }} area{% if area_list|length != 1 %}s{% endif %})</span>
  </div>
  <div class="row g-2 mb-2">
    {% for area, unread in area_list %}
    <div class="col-12 col-md-6 col-xl-4">
      <div class="card h-100 area-card" style="transition: border-color .15s;">
        <div class="card-header d-flex justify-content-between align-items-center py-2">
          <span class="small fw-bold">
            <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 py-2">
          {% if area.description %}
          <p class="small text-muted mb-1" style="line-height:1.3;">{{ area.description|truncate(90) }}</p>
          {% endif %}
          <div class="d-flex align-items-center gap-3 small text-muted">
            <span><i class="bi bi-envelope"></i> {{ area.total_messages or 0 }} msgs</span>
            {% if area.last_message_at %}
            <span><i class="bi bi-clock"></i> {{ area.last_message_at.strftime('%Y-%m-%d') }}</span>
            {% endif %}
            <code style="font-size:.7rem; color:#00aa00;">{{ area.tag }}</code>
          </div>
        </div>
        <div class="card-footer py-2 d-flex gap-1">
          <a href="{{ url_for('echomail.area', area_id=area.id) }}"
             class="btn btn-primary btn-sm flex-grow-1">
            <i class="bi bi-folder2-open"></i> Enter
          </a>
          <a href="{{ url_for('echomail.next_unread', area_id=area.id) }}"
             class="btn btn-outline-success btn-sm" title="Jump to next unread">
            <i class="bi bi-skip-forward"></i>
          </a>
          <a href="{{ url_for('echomail.compose', area_id=area.id) }}"
             class="btn btn-outline-secondary btn-sm" title="Compose">
            <i class="bi bi-pencil-square"></i>
          </a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endfor %}
{% else %}
<div class="card mt-3">
  <div class="card-body text-center" style="padding: 40px;">
    <i class="bi bi-inbox" style="font-size: 3rem;"></i>
    <p class="mt-3">No areas available in this network.</p>
    {% if current_user.is_admin %}
    <a href="{{ url_for('echomail_admin.network_areas', network_id=net.id) }}" class="btn btn-primary">
      <i class="bi bi-gear"></i> Manage Areas
    </a>
    {% endif %}
  </div>
</div>
{% endif %}
{% endblock %}