{% extends base_template %}


{% load i18n %}
{% load account socialaccount %}
{% load static %}
{% load user_admin_tags %}

{% block title %}Add New User{% endblock %}

{% block content %}
<div class="card mb-4">
    <div class="card-header">
        <h2 class="card-title">Add User</h2>
        <p class="card-text">
            Create a Django user account for an ACCESS user
        </p>
    </div>
    <div class="card-body">
        {% if messages %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {% for message in messages %}
                {{ message }}
            {% endfor %}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endif %}

        <form method="post" novalidate>
            {% csrf_token %}

            {% if form.errors %}
            <div class="alert alert-danger">
                <strong>Please correct the errors below.</strong>
            </div>
            {% endif %}

            <!-- Account Information -->
            <h5 class="border-bottom pb-2 mb-3"><strong>Account Information</strong></h5>
            <div class="row mb-3">
                <div class="col-sm-6">
                    <label for="id_username" class="form-label">Username:</label>
                    <input type="text" name="username" class="form-control {% if form.username.errors %}is-invalid{% endif %}"
                          id="id_username" value="{{ form.username.value|default:'' }}">
                    {% if form.username.errors %}
                    <div class="invalid-feedback">{{ form.username.errors }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Personal Information -->
            <h5 class="border-bottom pb-2 mb-3 mt-4"><strong>Personal Information</strong></h5>
            <div class="row">
                <div class="col-sm-6 mb-3">
                    <label for="id_first_name" class="form-label">First name:</label>
                    <input type="text" name="first_name" class="form-control {% if form.first_name.errors %}is-invalid{% endif %}"
                          id="id_first_name" value="{{ form.first_name.value|default:'' }}">
                    {% if form.first_name.errors %}
                    <div class="invalid-feedback">{{ form.first_name.errors }}</div>
                    {% endif %}
                </div>
                <div class="col-sm-6 mb-3">
                    <label for="id_last_name" class="form-label">Last name:</label>
                    <input type="text" name="last_name" class="form-control {% if form.last_name.errors %}is-invalid{% endif %}"
                          id="id_last_name" value="{{ form.last_name.value|default:'' }}">
                    {% if form.last_name.errors %}
                    <div class="invalid-feedback">{{ form.last_name.errors }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-sm-6">
                    <label for="id_email" class="form-label">Email address:</label>
                    <input type="email" name="email" class="form-control {% if form.email.errors %}is-invalid{% endif %}"
                          id="id_email" value="{{ form.email.value|default:'' }}">
                    {% if form.email.errors %}
                    <div class="invalid-feedback">{{ form.email.errors }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Permissions -->
            <h5 class="border-bottom pb-2 mb-3 mt-4"><strong>Permissions</strong></h5>
            <div class="row">
                <div class="col-sm-6 mb-3">
                    <div class="form-check">
                        <input type="checkbox" name="is_active" class="form-check-input" id="id_is_active"
                              {% if form.is_active.value %}checked{% endif %} checked>
                        <label class="form-check-label" for="id_is_active">Active</label>
                       <div class="form-text">Designates whether this user is active. <br />
                       <strong>Policy</strong>: Rather than delete a user, toggle off Active.</div>
                    </div>
                </div>
                {% if request.user.is_staff %}
                <div class="col-sm-6 mb-3">
                    <div class="form-check">
                        <input type="checkbox" name="is_staff" class="form-check-input" id="id_is_staff"
                              {% if form.is_staff.value %}checked{% endif %}>
                        <label class="form-check-label" for="id_is_staff">Staff status</label>
                        <div class="form-text">Designates whether the user can log into the Django admin.</div>
                    </div>
                </div>
                {% endif %}
            </div>


            <!-- Groups -->
            <h5 class="border-bottom pb-2 mb-3 mt-4"><strong>Groups</strong></h5>
            <div class="mb-3">
                <div class="input-group">
                    <input type="text" class="form-control" id="group-search" placeholder="Filter groups..." autocomplete="off">
                    <button type="button" class="btn btn-outline-secondary" id="group-search-clear" aria-label="Clear group filter">Clear</button>
                </div>
                <div class="form-text" style="color: #000000;">Start typing to filter user groups.</div>
            </div>
            <!-- Simple vertical list -->
            <ul id="group-list" style="
                list-style-type: none;
                padding: 0;
                margin: 0;
            ">
                <!-- Current groups (already checked) -->
                {% if user_groups %}
                    {% for group in all_groups %}
                        {% if group in user_groups %}
                        <li class="mb-2" data-group-name="{{ group.name|lower }}">
                            <div class="form-check form-check-sm">
                                <input type="checkbox" name="groups" value="{{ group.id }}" class="form-check-input" 
                                    id="group_{{ group.id }}" checked>
                                <label class="form-check-label fw-bold" for="group_{{ group.id }}" 
                                    title="{{ group.name }}">
                                    {{ group.name }}
                                </label>
                            </div>
                        </li>
                        {% endif %}
                    {% endfor %}
                {% endif %}

                <!-- Available groups (unchecked) -->
                {% for group in all_groups %}
                    {% if not user_groups or group not in user_groups %}
                    <li class="mb-2" data-group-name="{{ group.name|lower }}">
                        <div class="form-check form-check-sm">
                            <input type="checkbox" name="groups" value="{{ group.id }}" class="form-check-input" 
                                id="group_{{ group.id }}">
                            <label class="form-check-label" for="group_{{ group.id }}" 
                                title="{{ group.name }}">
                                {{ group.name }}
                            </label>
                        </div>
                    </li>
                    {% endif %}
                {% endfor %}
            </ul>

            {% if all_groups|length == 0 %}
            <p class="mb-0">No groups available.</p>
            {% endif %}
            <p id="group-no-match" class="mb-0" style="display: none;">No groups match your filter.</p>



            <!-- Submit buttons -->
            <div class="d-flex justify-content-between mt-4">
                <a href="javascript:history.back()" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-outline-success">
                    <span class="glyphicon glyphicon-plus"></span> Add User
                </button>
            </div>
        </form>
    </div> <!-- card body -->
</div> <!-- card -->
<script>
    (function () {
        const input = document.getElementById('group-search');
        const list = document.getElementById('group-list');
        const noMatch = document.getElementById('group-no-match');
        if (!input || !list) {
            return;
        }
        const items = Array.from(list.querySelectorAll('li[data-group-name]'));
        function updateFilter() {
            const query = input.value.trim().toLowerCase();
            let visible = 0;
            items.forEach((item) => {
                const name = item.getAttribute('data-group-name') || '';
                const show = !query || name.includes(query);
                item.style.display = show ? '' : 'none';
                if (show) {
                    visible += 1;
                }
            });
            if (noMatch) {
                noMatch.style.display = items.length && visible === 0 ? 'block' : 'none';
            }
            const clearBtn = document.getElementById('group-search-clear');
            if (clearBtn) {
                clearBtn.style.display = query ? '' : 'none';
            }
        }
        input.addEventListener('input', updateFilter);
        const clearBtn = document.getElementById('group-search-clear');
        if (clearBtn) {
            clearBtn.addEventListener('click', () => {
                input.value = '';
                input.focus();
                updateFilter();
            });
        }
        updateFilter();
    })();
</script>
{% endblock %}