<div class="container">
    <h1>Benutzerverzeichnis</h1>

    <div class="box">
        <?php $this->renderFeedbackMessages(); ?>

        <table id="users-table" class="overview-table" style="width:100%">
            <thead>
                <tr>
                    <td>Id</td>
                    <td>Avatar</td>
                    <td>Benutzername</td>
                    <td>Email</td>
                    <td>Aktiv?</td>
                    <td>Gruppe</td>
                    <td>Profil</td>
                </tr>
            </thead>
            <tbody>
            <?php foreach ($this->users as $user) { ?>
                <tr class="<?= ($user->user_active == 0 ? 'inactive' : 'active'); ?>">
                    <td><?= $user->user_id; ?></td>
                    <td class="avatar">
                        <?php if (isset($user->user_avatar_link)) { ?>
                            <img src="<?= $user->user_avatar_link; ?>"/>
                        <?php } ?>
                    </td>
                    <td><?= $user->user_name; ?></td>
                    <td><?= $user->user_email; ?></td>
                    <td><?= ($user->user_active == 0 ? 'Nein' : 'Ja'); ?></td>
                    <td><?= htmlspecialchars($user->group_name ?: $user->user_account_type, ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><a href="<?= Config::get('URL') . 'profile/showProfile/' . $user->user_id; ?>">Profil</a></td>
                </tr>
            <?php } ?>
            </tbody>
        </table>
    </div>
</div>

<!-- jQuery & DataTables CDN -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function(){
        $('#users-table').DataTable({
            pageLength: 10,
            order: [[ 0, 'asc' ]],
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/de-DE.json'
            }
        });
    });
</script>
