<div class="container-fluid" hx-trigger="userListChanged from:body"
    hx-get="/admin/content/users?page={{ .Page }}&search={{ .Search }}" hx-target="this" hx-swap="outerHTML">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Kullanıcılar</h2>
        <div>
            <input type="text" class="form-control d-inline-block w-auto me-2" placeholder="Ara..." name="search"
                value="{{ .Search }}" hx-get="/admin/content/users" hx-trigger="keyup changed delay:500ms"
                hx-target="#users-container" hx-push-url="true">
            <div class="btn-group me-2" role="group">
                <a href="/admin/content/users"
                    class="btn btn-outline-primary {{ if not .ShowDeleted }}active{{ end }}">Aktif</a>
                <a href="/admin/content/users?deleted=true"
                    class="btn btn-outline-danger {{ if .ShowDeleted }}active{{ end }}">Silinenler</a>
            </div>
            <a href="/admin/users/new" class="btn btn-primary">
                <i class="bi bi-plus-lg"></i> Yeni Kullanıcı
            </a>
        </div>
    </div>

    <div class="card border-0 shadow-sm" id="users-container">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Ad Soyad</th>
                            <th>Email</th>
                            <th>Rol</th>
                            <th>Durum</th>
                            <th>İşlemler</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ range .Users }}
                        <tr>
                            <td>{{ .ID }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    {{ if .Profile }}
                                    {{ range .Profile }}
                                    {{ if .AvatarURL }}
                                    <img src="{{ .AvatarURL }}" class="rounded-circle me-2" width="32" height="32"
                                        alt="">
                                    {{ end }}
                                    {{ end }}
                                    {{ end }}
                                    {{ .UserName }}
                                </div>
                            </td>
                            <td>{{ .Email }}</td>
                            <td>
                                {{ if isTrue .IsAdmin }}
                                <span class="badge bg-danger">Admin</span>
                                {{ else }}
                                <span class="badge bg-info">User</span>
                                {{ end }}
                            </td>
                            <td>
                                {{ if isTrue .EmailVerified }}
                                <span class="text-success"><i class="bi bi-check-circle-fill"></i> Onaylı</span>
                                {{ else }}
                                <span class="text-warning"><i class="bi bi-exclamation-circle-fill"></i> Bekliyor</span>
                                {{ end }}
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    {{ if $.ShowDeleted }}
                                    <form action="/admin/users/{{ .ID }}/restore" method="POST"
                                        onsubmit="return confirmRestore(event, this);">
                                        <button type="submit" class="btn btn-sm btn-success" title="Geri Yükle">
                                            <i class="bi bi-arrow-counterclockwise"></i> Geri Yükle
                                        </button>
                                    </form>
                                    {{ else }}
                                    <a href="/admin/users/{{ .ID }}/edit" class="btn btn-sm btn-outline-secondary"
                                        title="Düzenle">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form action="/admin/users/{{ .ID }}/delete" method="POST"
                                        onsubmit="return confirmDelete(event, this);">
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Sil">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                    {{ end }}
                                </div>
                            </td>
                        </tr>
                        {{ end }}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            {{ if gt .TotalPages 1 }}
            <nav class="mt-3">
                <ul class="pagination justify-content-center">
                    <li class="page-item {{ if le .Page 1 }}disabled{{ end }}">
                        <a class="page-link" href="#"
                            hx-get="/admin/content/users?page={{ .PrevPage }}&search={{ .Search }}"
                            hx-target="#users-container">Önceki</a>
                    </li>

                    <li class="page-item disabled"><span class="page-link">{{ .Page }} / {{ .TotalPages }}</span></li>

                    <li class="page-item {{ if ge .Page .TotalPages }}disabled{{ end }}">
                        <a class="page-link" href="#"
                            hx-get="/admin/content/users?page={{ .NextPage }}&search={{ .Search }}"
                            hx-target="#users-container">Sonraki</a>
                    </li>
                </ul>
            </nav>
            {{ end }}
        </div>
    </div>
</div>