{% if not (perm_view_others or perm_edit_others or perm_add_new or perm_is_godlike) %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ base_url_prefix }}/">{% trans %}Home{% endtrans %}</a></li>
        <li class="breadcrumb-item" aria-current="page">{% trans %}Edit profile{% endtrans %}</li>
    </ol>
</nav>
{% else %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ base_url_prefix }}/">{% trans %}Home{% endtrans %}</a></li>
        <li class="breadcrumb-item"><a href="{{ base_url_prefix }}/users">{% trans %}Users{% endtrans %}</a></li>
        <li class="breadcrumb-item" aria-current="page">{% trans %}Edit user{% endtrans %}</li>
    </ol>
</nav>
{% endif %}

<div class="row">
    <div class="col-md-6">
        <div class="card shadow-sm mb-4">
            <div class="card-header py-3">
                <strong><i class="bi bi-pencil-square me-2"></i>{% trans %}Edit User{% endtrans %}: "{{ name }}"</strong>
            </div>
            <div class="card-body">
                <form class="needs-validation" method="post" action="" novalidate>
                    <input type="hidden" name="_token" value="{{ csrf_token }}">
                    <input type="hidden" name="number" value="{{ edit_id }}">

                    <div class="mb-3">
                        <label for="username" class="form-label">{% trans %}Username{% endtrans %} <span class="text-danger">*</span></label>
                        <input class="form-control form-control-sm" type="text" id="username" name="username" value="{{ user['username'] }}"{% if restricted_self_edit %} readonly{% endif %} required>
                        {% if restricted_self_edit %}
                        <small class="text-muted">{% trans %}Your username can only be changed by an administrator{% endtrans %}</small>
                        {% endif %}
                        <div class="invalid-feedback">{% trans %}Provide user name{% endtrans %}</div>
                    </div>

                    <div class="mb-3">
                        <label for="fullname" class="form-label">{% trans %}Fullname{% endtrans %} <span class="text-danger">*</span></label>
                        <input class="form-control form-control-sm" type="text" id="fullname" name="fullname" value="{{ user['fullname'] }}"{% if is_identity_readonly %} readonly{% endif %}{% if not is_identity_readonly %} required{% endif %}>
                        {% if is_identity_readonly %}
                        <small class="text-muted">{% trans with {'%auth_type%': user['auth_type']|upper} %}Managed externally via %auth_type% authentication{% endtrans %}</small>
                        {% else %}
                        <small class="text-muted">{% trans %}User's full name for identification{% endtrans %}</small>
                        {% endif %}
                        <div class="invalid-feedback">{% trans %}Provide full name{% endtrans %}</div>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">{% trans %}Email address{% endtrans %} <span class="text-danger">*</span></label>
                        <input class="form-control form-control-sm" type="email" id="email" name="email" value="{{ user['email'] }}"{% if is_identity_readonly %} readonly{% endif %}{% if not is_identity_readonly %} required{% endif %}>
                        {% if is_identity_readonly %}
                        <small class="text-muted">{% trans with {'%auth_type%': user['auth_type']|upper} %}Managed externally via %auth_type% authentication{% endtrans %}</small>
                        {% endif %}
                        <div class="invalid-feedback">{% trans %}Provide email{% endtrans %}</div>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">{% trans %}Password{% endtrans %}</label>
                        <div class="input-group input-group-sm">
                            <input class="form-control form-control-sm" type="password" id="password" name="password"
                                   {% if (not perm_passwd_edit_others and (edit_own_perm and user['uid'] != session_user_id) or is_external_auth) %}disabled{% endif %}>
                            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="showPassword('password', 'eye')"><i class="bi bi-eye-fill text-secondary" id="eye"></i></button>
                        </div>
                        {% if is_external_auth %}
                        <small class="text-muted">{% trans with {'%auth_type%': user['auth_type']|upper} %}Password managed externally via %auth_type% authentication{% endtrans %}</small>
                        {% else %}
                        <small class="text-muted">{% trans %}Leave empty to keep current password{% endtrans %}</small>
                        {% endif %}
                    </div>

                    {% if show_user_access_templates and edit_templ_perm %}
                    <div class="mb-3">
                        <label for="perm_templ" class="form-label">{% trans %}Access template{% endtrans %}</label>
                        <select class="form-select form-select-sm" id="perm_templ" name="perm_templ">
                            {% for template in permission_templates %}
                            {% if template['id'] == user['tpl_id'] %}
                            <option value="{{ template['id'] }}" selected>{{ template['name'] }}</option>
                            {% else %}
                            <option value="{{ template['id'] }}">{{ template['name'] }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        <small class="text-muted">{% trans %}Permissions from this template will apply globally across the entire system for this user{% endtrans %}</small>
                    </div>
                    {% endif %}

                    <div class="mb-3">
                        <label for="description" class="form-label">{% trans %}Description{% endtrans %}</label>
                        <textarea class="form-control form-control-sm" id="description" rows="3" name="description">{{ user['descr'] }}</textarea>
                        <small class="text-muted">{% trans %}Optional information about this user{% endtrans %}</small>
                    </div>

                    {% if user['uid'] != session_user_id %}
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="active" name="active" value="1" {{ check }}>
                            <label class="form-check-label" for="active">{% trans %}Enabled{% endtrans %}</label>
                        </div>
                    </div>
                    {% else %}
                    <!-- Hidden input to ensure the user cannot disable their own account -->
                    <input type="hidden" name="active" value="1">
                    {% endif %}

                    {% if ldap_use %}
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" id="ldap" type="checkbox" name="use_ldap" value="1"
                                   onclick="disablePasswordField()" {{ use_ldap_checked }}{% if restricted_self_edit %} disabled{% endif %}>
                            <label class="form-check-label" for="ldap">{% trans %}LDAP Authentication{% endtrans %}</label>
                        </div>
                        {% if restricted_self_edit %}
                        <small class="text-muted">{% trans %}Authentication settings can only be changed by an administrator{% endtrans %}</small>
                        {% else %}
                        <small class="text-muted">{% trans %}Use external LDAP directory for authentication{% endtrans %}</small>
                        {% endif %}
                    </div>
                    {% endif %}

                    <div class="d-flex justify-content-between">
                        <div>
                            <button type="submit" class="btn btn-primary btn-sm" name="commit">
                                <i class="bi bi-check-circle me-1 text-white"></i>{% trans %}Update{% endtrans %}
                            </button>
                            <button type="reset" class="btn btn-secondary btn-sm" name="reset">
                                <i class="bi bi-arrow-counterclockwise me-1 text-white"></i>{% trans %}Reset{% endtrans %}
                            </button>
                            {% if not (perm_view_others or perm_edit_others or perm_add_new or perm_is_godlike) %}
                            <a href="{{ base_url_prefix }}/" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-left me-1"></i>{% trans %}Back to Home{% endtrans %}
                            </a>
                            {% else %}
                            <a href="{{ base_url_prefix }}/users" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-left me-1"></i>{% trans %}Back to Users{% endtrans %}
                            </a>
                            {% endif %}
                        </div>
                        <small class="text-muted align-self-end">{% trans %}* Required fields{% endtrans %}</small>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow-sm mb-4">
            <div class="card-header py-3" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#accountInfoBody" role="button" aria-expanded="true">
                <strong><i class="bi bi-info-circle me-2"></i>{% trans %}Account Information{% endtrans %}</strong>
                <i class="bi bi-chevron-down float-end"></i>
            </div>
            <div class="collapse show" id="accountInfoBody">
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    <div class="list-group-item border-bottom">
                        <h6 class="mb-1"><i class="bi bi-shield-lock text-primary me-2"></i>{% trans %}Password Requirements{% endtrans %}</h6>
                        <ul class="mb-0 ps-4 small">
                            {% if password_policy.enabled %}
                                {% if password_policy.min_length %}
                                <li>{% trans %}Minimum length{% endtrans %}: {{ password_policy.min_length }} {% trans %}characters{% endtrans %}</li>
                                {% endif %}
                                {% if password_policy.require_uppercase %}
                                <li>{% trans %}Must contain uppercase letters{% endtrans %}</li>
                                {% endif %}
                                {% if password_policy.require_lowercase %}
                                <li>{% trans %}Must contain lowercase letters{% endtrans %}</li>
                                {% endif %}
                                {% if password_policy.require_numbers %}
                                <li>{% trans %}Must contain numbers{% endtrans %}</li>
                                {% endif %}
                                {% if password_policy.require_special %}
                                <li>
                                    {% trans %}Must contain special characters{% endtrans %}
                                    <span class="text-muted">({{ password_policy.special_characters }})</span>
                                </li>
                                {% endif %}
                            {% else %}
                                <li>{% trans %}No specific password requirements{% endtrans %}</li>
                            {% endif %}
                        </ul>
                    </div>
                    {% if show_user_access_templates %}
                    <div class="list-group-item">
                        <h6 class="mb-1" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#permissionsBody" role="button" aria-expanded="false">
                            <i class="bi bi-key text-warning me-2"></i>{% trans %}User Permissions{% endtrans %}
                            <i class="bi bi-chevron-down float-end"></i>
                        </h6>
                        <div class="collapse" id="permissionsBody">
                        <p class="mb-2 small mt-2">
                            {% trans %}This user has been assigned the access template{% endtrans %}: <strong>"{{ user['tpl_name'] }}"</strong>
                        </p>

                        {% if user['tpl_descr'] != "" %}
                        <p class="mb-2 small">
                            {% trans %}Description{% endtrans %}: <em>"{{ user['tpl_descr'] }}"</em>
                        </p>
                        {% endif %}

                        <p class="mb-2 small">{% trans %}Based on this template, this user has the following permissions{% endtrans %}:</p>

                        {% if user_permissions is empty %}
                            <p class="small text-muted fst-italic mb-0">{% trans %}No permissions are assigned to this template{% endtrans %}</p>
                        {% else %}
                            <ul class="small mb-0 ps-4">
                                {% for item in user_permissions %}
                                {% set descr = item['descr'] %}
                                <li>{{ descr|trans }} <span class="text-muted">({{ item['name'] }})</span></li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            </div>
        </div>

        {% if show_group_access_templates %}
        <div class="card shadow-sm mb-4">
            <div class="card-header py-3">
                <strong><i class="bi bi-people me-2"></i>{% trans %}Group Memberships{% endtrans %}</strong>
            </div>
            <div class="card-body">
                <!-- Current Memberships -->
                <h6 class="text-muted mb-2">{% trans %}Current Memberships{% endtrans %}</h6>
                {% if user_groups is not empty %}
                <div class="list-group mb-3">
                    {% for group in user_groups %}
                    <div class="list-group-item">
                        <div class="d-flex w-100 justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">
                                    <i class="bi bi-people-fill me-1 text-primary"></i>{{ group.name }}
                                </h6>
                                {% if group.description %}
                                <p class="mb-0 small text-muted">{{ group.description }}</p>
                                {% endif %}
                            </div>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ base_url_prefix }}/groups/{{ group.id }}/edit" class="btn btn-sm btn-outline-secondary" title="{% trans %}View group details{% endtrans %}">
                                    <i class="bi bi-box-arrow-up-right text-secondary"></i>
                                </a>
                                {% if perm_is_godlike %}
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="showRemoveGroupModal({{ edit_id }}, {{ group.id }}, '{{ group.name|e('js') }}')" title="{% trans %}Remove from group{% endtrans %}">
                                    <i class="bi bi-x-circle text-danger"></i>
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted small mb-3">{% trans %}This user is not a member of any groups.{% endtrans %}</p>
                {% endif %}

                <!-- Add to Groups Section (Admin Only) -->
                {% if perm_is_godlike and available_groups is not empty %}
                <hr class="my-3">
                <h6 class="text-muted mb-2">{% trans %}Add to Groups{% endtrans %}</h6>
                <p class="small text-muted mb-3">{% trans %}Select one or more groups and click "Add Selected Groups" button.{% endtrans %}</p>

                <form method="post" action="{{ base_url_prefix }}/users/{{ edit_id }}/edit" id="addGroupsForm">
                    <input type="hidden" name="_token" value="{{ csrf_token }}">
                    <input type="hidden" name="action" value="add_groups">

                    <div class="mb-2">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control form-control-sm" id="available_groups_search" placeholder="{% trans %}Search available groups...{% endtrans %}" autocomplete="off">
                            <button class="btn btn-outline-secondary" type="button" id="clear_available_groups_search" title="{% trans %}Clear search{% endtrans %}">
                                <i class="bi bi-x-circle text-secondary"></i>
                            </button>
                        </div>
                    </div>

                    <div id="available_groups_list" style="max-height: 200px; overflow-y: auto;" class="border rounded p-2 mb-3">
                        <div id="no_groups_found" class="text-muted text-center py-3" style="display: none;">
                            <i class="bi bi-search me-2"></i>{% trans %}No groups found{% endtrans %}
                        </div>
                        {% for group in available_groups %}
                        <div class="form-check mb-2 available-group-item" data-groupname="{{ group.name|lower }}" data-groupdesc="{{ group.description|lower|default('') }}">
                            <input class="form-check-input" type="checkbox" name="add_to_groups[]" id="add_group_{{ group.id }}" value="{{ group.id }}">
                            <label class="form-check-label" for="add_group_{{ group.id }}">
                                <strong>{{ group.name }}</strong>
                                {% if group.description %}<small class="text-muted d-block">{{ group.description }}</small>{% endif %}
                            </label>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="select_all_available_groups">{% trans %}Select All{% endtrans %}</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="deselect_all_available_groups">{% trans %}Clear All{% endtrans %}</button>
                        </div>
                        <div>
                            <span class="badge bg-secondary me-2" id="selected_groups_count">0 {% trans %}selected{% endtrans %}</span>
                            <button type="submit" class="btn btn-primary btn-sm" id="addGroupsBtn" disabled>
                                <i class="bi bi-plus-circle me-1 text-white"></i>{% trans %}Add Selected Groups{% endtrans %}
                            </button>
                        </div>
                    </div>
                </form>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% if show_group_access_templates %}
<form id="removeGroupForm" method="post" action="{{ base_url_prefix }}/users/groups/remove" style="display: none;">
    <input type="hidden" name="_token" value="{{ csrf_token }}">
    <input type="hidden" name="user_id" id="remove_user_id" value="">
    <input type="hidden" name="group_id" id="remove_group_id" value="">
</form>

<!-- Remove Group Confirmation Modal -->
<div class="modal fade" id="removeGroupModal" tabindex="-1" aria-labelledby="removeGroupModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="removeGroupModalLabel">
                    <i class="bi bi-exclamation-triangle text-warning me-2"></i>{% trans %}Confirm Removal{% endtrans %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{% trans %}Are you sure you want to remove this user from the group{% endtrans %} "<strong id="modalGroupName"></strong>"?</p>
                <p class="text-muted small mb-0">{% trans %}This action will immediately revoke any permissions granted by this group.{% endtrans %}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i>{% trans %}Cancel{% endtrans %}
                </button>
                <button type="button" class="btn btn-danger btn-sm" id="confirmRemoveBtn">
                    <i class="bi bi-trash me-1"></i>{% trans %}Remove{% endtrans %}
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<script>
function disablePasswordField() {
    const ldapCheckbox = document.getElementById('ldap');
    const passwordField = document.getElementById('password');

    if (ldapCheckbox && ldapCheckbox.checked) {
        passwordField.disabled = true;
    } else {
        passwordField.disabled = false;
    }
{% if user['auth_type'] == 'ldap' %}
    // An LDAP account converts to a local account when LDAP is unchecked, so its
    // fullname/email are only IdP-managed (read-only) while LDAP stays enabled.
    const idpManaged = ldapCheckbox && ldapCheckbox.checked;
    ['fullname', 'email'].forEach(function (id) {
        const field = document.getElementById(id);
        if (field) {
            field.readOnly = idpManaged;
        }
    });
{% endif %}
}

function showRemoveGroupModal(userId, groupId, groupName) {
    document.getElementById('modalGroupName').textContent = groupName;
    document.getElementById('remove_user_id').value = userId;
    document.getElementById('remove_group_id').value = groupId;

    const modal = new bootstrap.Modal(document.getElementById('removeGroupModal'));
    modal.show();
}

// Initialize fields on page load
document.addEventListener('DOMContentLoaded', function() {
    const ldapCheckbox = document.getElementById('ldap');
    if (ldapCheckbox) {
        disablePasswordField();
    }

    // Handle remove confirmation
    const confirmRemoveBtn = document.getElementById('confirmRemoveBtn');
    if (confirmRemoveBtn) {
        confirmRemoveBtn.addEventListener('click', function() {
            document.getElementById('removeGroupForm').submit();
        });
    }

    // Available groups search functionality
    const availableGroupsSearch = document.getElementById('available_groups_search');
    const clearAvailableGroupsSearch = document.getElementById('clear_available_groups_search');

    if (availableGroupsSearch) {
        const availableGroupItems = document.querySelectorAll('.available-group-item');
        const noGroupsFound = document.getElementById('no_groups_found');

        function updateGroupSearch() {
            const searchTerm = availableGroupsSearch.value.toLowerCase();
            let visibleCount = 0;

            availableGroupItems.forEach(function(item) {
                const groupname = item.getAttribute('data-groupname') || '';
                const groupdesc = item.getAttribute('data-groupdesc') || '';
                if (groupname.includes(searchTerm) || groupdesc.includes(searchTerm)) {
                    item.style.display = '';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });

            // Show/hide "no results" message
            if (noGroupsFound) {
                noGroupsFound.style.display = visibleCount === 0 ? '' : 'none';
            }
        }

        availableGroupsSearch.addEventListener('input', updateGroupSearch);

        // Clear search button
        if (clearAvailableGroupsSearch) {
            clearAvailableGroupsSearch.addEventListener('click', function() {
                availableGroupsSearch.value = '';
                updateGroupSearch();
                availableGroupsSearch.focus();
            });
        }
    }

    // Select all available groups
    const selectAllBtn = document.getElementById('select_all_available_groups');
    if (selectAllBtn) {
        const availableGroupItems = document.querySelectorAll('.available-group-item');
        selectAllBtn.addEventListener('click', function() {
            const visibleCheckboxes = Array.from(availableGroupItems)
                .filter(item => item.style.display !== 'none')
                .map(item => item.querySelector('input[type="checkbox"]'));

            visibleCheckboxes.forEach(checkbox => checkbox.checked = true);
            updateSelectedGroupsCount();
        });
    }

    // Deselect all available groups
    const deselectAllBtn = document.getElementById('deselect_all_available_groups');
    if (deselectAllBtn) {
        deselectAllBtn.addEventListener('click', function() {
            const checkboxes = document.querySelectorAll('input[name="add_to_groups[]"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
            updateSelectedGroupsCount();
        });
    }

    // Update selected groups count and button state
    function updateSelectedGroupsCount() {
        const selectedCount = document.querySelectorAll('input[name="add_to_groups[]"]:checked').length;
        const countBadge = document.getElementById('selected_groups_count');
        const addGroupsBtn = document.getElementById('addGroupsBtn');

        if (countBadge) {
            countBadge.textContent = selectedCount + ' {% trans %}selected{% endtrans %}';
        }

        if (addGroupsBtn) {
            addGroupsBtn.disabled = selectedCount === 0;
        }
    }

    // Track checkbox changes (only if checkboxes exist)
    const groupCheckboxes = document.querySelectorAll('input[name="add_to_groups[]"]');
    if (groupCheckboxes.length > 0) {
        groupCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateSelectedGroupsCount);
        });
    }
});
</script>