{% extends "base.html" %}
{% block title %}{% if area %}Edit Area{% else %}Add Area{% endif %} — {{ config.BBS_NAME }}{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-chat-square-text"></i> {% if area %}Edit Area: {{ area.name }}{% else %}Add Echo Area{% endif %}</h1>
</div>

<a href="{{ url_for('echomail_admin.areas') }}" class="btn btn-primary btn-sm mb-3">
    <i class="bi bi-arrow-left"></i> Back to Areas
</a>

<div class="card">
    <div class="card-header"><i class="bi bi-gear"></i> Area Configuration</div>
    <div class="card-body">
        <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            {{ form.hidden_tag() }}

            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    {{ form.network_id.label(class="form-label") }}
                    {{ form.network_id(class="form-control") }}
                    {% for e in form.network_id.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
                </div>
                <div class="col-md-4">
                    {{ form.tag.label(class="form-label") }}
                    {{ form.tag(class="form-control", placeholder="FIDO_GENERAL") }}
                    {% for e in form.tag.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
                </div>
                <div class="col-md-4">
                    {{ form.order.label(class="form-label") }}
                    {{ form.order(class="form-control") }}
                </div>
            </div>

            <div class="mb-3">
                {{ form.name.label(class="form-label") }}
                {{ form.name(class="form-control", placeholder="General Discussion") }}
                {% for e in form.name.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
            </div>

            <div class="mb-3">
                {{ form.description.label(class="form-label") }}
                {{ form.description(class="form-control", rows=2) }}
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-8">
                    <label class="form-label small text-muted text-uppercase" style="letter-spacing:1px;">Area Flags</label>
                    <div class="d-flex gap-4 flex-wrap p-2" style="background:rgba(255,255,255,.04);border:1px solid #333;border-radius:6px;">
                        <div class="form-check">
                            {{ form.is_active(class="form-check-input") }}
                            <label class="form-check-label" for="is_active" style="color:#00ff00;">
                                <i class="bi bi-check-circle"></i> Active
                            </label>
                            <div class="form-text" style="font-size:.7rem;">Area visible and accepting messages</div>
                        </div>
                        <div class="form-check">
                            {{ form.is_subscribed(class="form-check-input") }}
                            <label class="form-check-label" for="is_subscribed" style="color:#44aaff;">
                                <i class="bi bi-bell"></i> Subscribed
                            </label>
                            <div class="form-text" style="font-size:.7rem;">Receive messages from hub/upstream</div>
                        </div>
                        <div class="form-check">
                            {{ form.is_sysop_only(class="form-check-input") }}
                            <label class="form-check-label" for="is_sysop_only" style="color:#ff8800;">
                                <i class="bi bi-shield-lock"></i> Sysop Only
                            </label>
                            <div class="form-text" style="font-size:.7rem;">Hidden from and inaccessible to non-admins</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    {{ form.min_access_level.label(class="form-label") }}
                    {{ form.min_access_level(class="form-control") }}
                    <div class="form-text">
                        0 = all users &nbsp;|&nbsp; 10 = registered &nbsp;|&nbsp; 50 = VIP &nbsp;|&nbsp; 100 = sysop
                    </div>
                    {% for e in form.min_access_level.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
                </div>
            </div>

            <div class="d-flex justify-content-between">
                <a href="{{ url_for('echomail_admin.areas') }}" class="btn btn-primary">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
                {{ form.submit(class="btn btn-primary") }}
            </div>
        </form>
    </div>
</div>
{% endblock %}