{% extends "base.html" %}
{% set active_nav = "admin" %}

{% block title %}{{ group.name }} - System Groups - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="/admin/groups" class="text-sm text-muted">&larr; Back to System Groups</a>
        <h1 class="page-title">{{ group.name }}</h1>
        <p class="page-subtitle">{{ group.description or group.group_code }} &middot; {{ group.access_scope }} &middot; {{ group.member_count }} member{{ 's' if group.member_count != 1 else '' }}</p>
    </div>
</div>

<!-- Add Member Form -->
<div class="card mb-lg">
    <div class="card-header">
        <h2 class="card-title">Add Member</h2>
    </div>
    <form method="post" action="/admin/groups/{{ group.group_code }}/add-member" class="flex gap-md" style="padding: 1rem;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="filter-group" style="flex: 1;">
            <label for="user_email">User Email</label>
            <input type="email" name="user_email" id="user_email" class="form-input" placeholder="user@example.com" required>
        </div>
        <div style="display: flex; align-items: flex-end;">
            <button type="submit" class="btn btn-primary">Add to Group</button>
        </div>
    </form>
</div>

<!-- Members Table -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Members</h2>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Name</th>
                <th>Status</th>
                <th>Joined</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if members %}
                {% for m in members %}
                <tr>
                    <td>{{ m.email }}</td>
                    <td>{{ m.name or '—' }}</td>
                    <td>
                        {% if m.is_active %}
                        <span class="badge badge-success">Active</span>
                        {% else %}
                        <span class="badge badge-danger">Inactive</span>
                        {% endif %}
                    </td>
                    <td class="text-muted text-sm">{{ m.membership.joined_at | format_dt(user_preferences) }}</td>
                    <td>
                        {% if m.is_active %}
                        <form method="post" action="/admin/groups/{{ group.group_code }}/remove-member" style="display:inline;"
                              onsubmit="return confirm('Remove this member from {{ group.name }}?');">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="user_id" value="{{ m.membership.user_id }}">
                            <button type="submit" class="btn btn-sm btn-danger">Remove</button>
                        </form>
                        {% else %}
                        <span class="text-muted text-sm">Removed</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="5" class="text-center text-muted">No members in this group</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>
{% endblock %}