@extends('layouts.app')

@section('title', 'Benutzer')

@section('content')
<div class="container-xxl mt-4">
    <h1>Benutzer</h1>
    <div id="user-table" class="mt-3">
        <div class="spinner-border" role="status"><span class="visually-hidden">Laden...</span></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
fetch('{{ route("users.indexJson") }}')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var el = document.getElementById('user-table');
        el.replaceChildren();

        var table = document.createElement('table');
        table.className = 'table table-striped';
        var thead = document.createElement('thead');
        var headerRow = document.createElement('tr');
        ['Name', 'E-Mail'].forEach(function(h) {
            var th = document.createElement('th');
            th.textContent = h;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        table.appendChild(thead);

        var tbody = document.createElement('tbody');
        data.forEach(function(u) {
            var tr = document.createElement('tr');
            [u.display_name || '', u.email].forEach(function(val) {
                var td = document.createElement('td');
                td.textContent = val;
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        el.appendChild(table);
    });
</script>
@endpush