{% extends "admin/base.html" %}
{% block title %}{{ 'Edit User' if user else 'Invite New User' }}{% endblock %}
{% block content %}
<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ url_for('site_admin.users') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left"></i>
    </a>
    <h2 class="mb-0">{{ 'Edit User: ' ~ user.username if user else 'Invite New User' }}</h2>
</div>

<div class="row">
    <div class="col-md-7">
        <div class="card border-secondary">
            <div class="card-body">
                <form method="post">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label class="form-label">Username *</label>
                        <input type="text" name="username" class="form-control" required
                               value="{{ user.username if user else request.form.get('username', '') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email *</label>
                        <input type="email" name="email" class="form-control" required
                               value="{{ user.email if user else request.form.get('email', '') }}">
                    </div>
                    {% if user %}
                    <div class="mb-3">
                        <label class="form-label">New Password <span class="text-muted">(leave blank = unchanged)</span></label>
                        <input type="password" name="new_password" class="form-control">
                    </div>
                    {% else %}
                    {# ── Invite form: group + role (optional) ── #}
                    <div class="mb-3">
                        <label class="form-label">Group <span class="text-muted">(optional)</span></label>
                        <select name="group_id" id="invite_group" class="form-select" onchange="toggleRoleField()">
                            <option value="">— No group —</option>
                            {% for g in (groups or []) %}
                            <option value="{{ g.id }}"
                                {% if request.form.get('group_id')|string == g.id|string %}selected{% endif %}>
                                {{ g.name }}
                            </option>
                            {% endfor %}
                        </select>
                        <div class="form-text">If selected, the user will be added to this group upon accepting the invite.</div>
                    </div>
                    <div class="mb-3" id="role_field" style="display:none;">
                        <label class="form-label">Group Role</label>
                        <select name="role" class="form-select">
                            <option value="viewer">Viewer</option>
                            <option value="auditor">Auditor</option>
                            <option value="member">Member</option>
                            <option value="moderator">Moderator</option>
                            <option value="group_admin">Group Admin</option>
                            <option value="group_owner">Group Owner</option>
                        </select>
                    </div>
                    <div class="alert alert-info py-2 mb-3">
                        <i class="bi bi-envelope-check me-1"></i>
                        The user will receive an email with a link to set their own password.
                    </div>
                    {% endif %}
                    <div class="mb-4">
                        <div class="form-check">
                            <input type="checkbox" name="is_site_admin" id="is_site_admin" class="form-check-input"
                                   value="1" {{ 'checked' if user and user.is_site_admin }}>
                            <label class="form-check-label" for="is_site_admin">
                                <span class="text-danger fw-semibold"><i class="bi bi-shield-fill me-1"></i>Site Admin</span>
                                <small class="text-muted d-block">Full access to all groups and settings</small>
                            </label>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-success">
                            {% if user %}
                            <i class="bi bi-check-lg me-1"></i>Save
                            {% else %}
                            <i class="bi bi-envelope-fill me-1"></i>Send Invitation
                            {% endif %}
                        </button>
                        <a href="{{ url_for('site_admin.users') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% if not user %}
<script>
function toggleRoleField() {
    var gid = document.getElementById('invite_group').value;
    document.getElementById('role_field').style.display = gid ? 'block' : 'none';
}
// Show role field if a group was pre-selected (e.g. after validation error)
document.addEventListener('DOMContentLoaded', toggleRoleField);
</script>
{% endif %}
{% endblock %}