@page
@model MTG_CollectionVerwaltung.Areas.Identity.Pages.Account.Admin.IndexModel
@{}
<h2>Users</h2>
<table class="table table-striped">
    <thead class="table-dark">
        <tr>
            <th>UserId</th>
            <th>Username</th>
            <th>Usermail</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in Model.Users)
        {
            <tr>
                <th>@user.Id</th>
                <th>@user.UserName</th>
                <th>@user.Email</th>
                <th>
                    <div class="btn-group">
                        @if (user.Id == Model.CurrentUserID)
                        {
                            <a class="btn btn-outline-success disabled">Modify</a>
                        }
                        else
                        {
                            <a asp-page="/Account/Admin/ModifyUser" asp-route-id="@user.Id" class="btn btn-outline-success">Modify</a>
                        }
                        @if (user.Id == Model.CurrentUserID)
                        {
                            <a class="btn btn-outline-danger disabled">Delete</a>
                        }
                        else
                        {
                            <button data-bs-toggle="modal" data-bs-target="#deleteUserModal" data-user-id="@user.Id" data-user-name="@user.UserName" type="button" class="btn btn-outline-danger">Delete</button>
                        }
                        
                    </div>
                </th>
            </tr>
        }
    </tbody>
</table>
    
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" asp-page-handler="Delete">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Benutzer Löschen</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Soll der Benutzer <strong id="modalUserName"></strong> wirklich gelöscht werden?</p>
                    <input type="hidden" id="modalUserId" name="UserId" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-danger">Löschen</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    var deleteUserModal = document.getElementById('deleteUserModal')
    deleteUserModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget
        var userId = button.getAttribute('data-user-id')
        var userName = button.getAttribute('data-user-name')

        // Fülle Modal Felder
        var modalUserName = deleteUserModal.querySelector('#modalUserName')
        var modalUserId = deleteUserModal.querySelector('#modalUserId')

        modalUserName.textContent = userName
        modalUserId.value = userId
    })
</script>