<div class="datatable-component">
    <!-- Toolbar -->
    <div class="datatable-toolbar">
        <div class="toolbar-left">
            <div class="selection-info" if="hasSelectedRows">
                <span class="selected-count">{{selectedCount}} ausgewählt</span>
                <button
                    class="btn btn-sm btn-danger"
                    data-live-action="bulkDelete"
                >
                    Ausgewählte löschen
                </button>
                <button
                    class="btn btn-sm btn-secondary"
                    data-live-action="deselectAll"
                >
                    {{selectAllText}}
                </button>
            </div>
            <div class="table-info" if="!hasSelectedRows">
                <span class="total-rows">{{total_rows}} Einträge gesamt</span>
            </div>
        </div>

        <div class="toolbar-right">
            <select
                class="page-size-select"
                data-live-action="changePageSize"
                data-param-page-size-from="value"
            >
                <for items="pageSizeOptions" as="option">
                    <option value="{{option.value}}" {{option.selected}}>{{option.label}}</option>
                </for>
            </select>
        </div>
    </div>

    <div class="alert alert-success" if="message">
        {{message}}
    </div>

    <!-- Table -->
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th class="col-checkbox">
                        <input
                            type="checkbox"
                            data-live-action="selectAll"
                            {{selectAllChecked}}
                        />
                    </th>
                    <th
                        class="sortable {{sortClass.id}}"
                        data-live-action="sort"
                        data-param-column="id"
                    >
                        ID
                        <span class="sort-icon">{{sortIndicator.id}}</span>
                    </th>
                    <th
                        class="sortable {{sortClass.name}}"
                        data-live-action="sort"
                        data-param-column="name"
                    >
                        Name
                        <span class="sort-icon">{{sortIndicator.name}}</span>
                    </th>
                    <th
                        class="sortable {{sortClass.email}}"
                        data-live-action="sort"
                        data-param-column="email"
                    >
                        Email
                        <span class="sort-icon">{{sortIndicator.email}}</span>
                    </th>
                    <th
                        class="sortable {{sortClass.role}}"
                        data-live-action="sort"
                        data-param-column="role"
                    >
                        Role
                        <span class="sort-icon">{{sortIndicator.role}}</span>
                    </th>
                    <th
                        class="sortable {{sortClass.status}}"
                        data-live-action="sort"
                        data-param-column="status"
                    >
                        Status
                        <span class="sort-icon">{{sortIndicator.status}}</span>
                    </th>
                    <th
                        class="sortable {{sortClass.created}}"
                        data-live-action="sort"
                        data-param-column="created"
                    >
                        Created
                        <span class="sort-icon">{{sortIndicator.created}}</span>
                    </th>
                </tr>
                <tr class="filter-row">
                    <th></th>
                    <th>
                        <input
                            type="text"
                            class="filter-input"
                            placeholder="Filter..."
                            value="{{filters.id}}"
                            data-live-action="filter"
                            data-param-column="id"
                            data-param-value-from="value"
                            data-live-debounce="300"
                        />
                    </th>
                    <th>
                        <input
                            type="text"
                            class="filter-input"
                            placeholder="Filter..."
                            value="{{filters.name}}"
                            data-live-action="filter"
                            data-param-column="name"
                            data-param-value-from="value"
                            data-live-debounce="300"
                        />
                    </th>
                    <th>
                        <input
                            type="text"
                            class="filter-input"
                            placeholder="Filter..."
                            value="{{filters.email}}"
                            data-live-action="filter"
                            data-param-column="email"
                            data-param-value-from="value"
                            data-live-debounce="300"
                        />
                    </th>
                    <th>
                        <select
                            class="filter-input"
                            data-live-action="filter"
                            data-param-column="role"
                            data-param-value-from="value"
                        >
                            <option value="">All Roles</option>
                            <for items="roleFilterOptions" as="option">
                                <option value="{{option.value}}" {{option.selected}}>{{option.label}}</option>
                            </for>
                        </select>
                    </th>
                    <th>
                        <select
                            class="filter-input"
                            data-live-action="filter"
                            data-param-column="status"
                            data-param-value-from="value"
                        >
                            <option value="">All Status</option>
                            <for items="statusFilterOptions" as="option">
                                <option value="{{option.value}}" {{option.selected}}>{{option.label}}</option>
                            </for>
                        </select>
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <for items="rows" as="row">
                    <tr class="{{row.selectedClass}}">
                        <td class="col-checkbox">
                            <input
                                type="checkbox"
                                data-live-action="toggleRow"
                                data-param-row-id="{{row.id}}"
                                {{row.checked}}
                            />
                        </td>
                        <td>{{row.id}}</td>
                        <td class="font-weight-bold">{{row.name}}</td>
                        <td>{{row.email}}</td>
                        <td>
                            <span class="badge {{row.roleClass}}">
                                {{row.role}}
                            </span>
                        </td>
                        <td>
                            <span class="badge {{row.statusClass}}">
                                {{row.status}}
                            </span>
                        </td>
                        <td>{{row.created}}</td>
                    </tr>
                </for>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="datatable-pagination">
        <div class="pagination-info">
            {{pageInfo}}
        </div>

        <div class="pagination-buttons">
            <button
                class="btn btn-sm"
                data-live-action="changePage"
                data-param-page="1"
                {{disabledFirst}}
            >
                ⟪ Erste
            </button>
            <button
                class="btn btn-sm"
                data-live-action="changePage"
                data-param-page="{{prevPage}}"
                {{disabledPrevious}}
            >
                ← Zurück
            </button>
            <button
                class="btn btn-sm"
                data-live-action="changePage"
                data-param-page="{{nextPage}}"
                {{disabledNext}}
            >
                Weiter →
            </button>
            <button
                class="btn btn-sm"
                data-live-action="changePage"
                data-param-page="{{total_pages}}"
                {{disabledLast}}
            >
                Letzte ⟫
            </button>
        </div>
    </div>
</div>

<style>
.datatable-component {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.datatable-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.selection-info,
.table-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.selected-count,
.total-rows {
    font-weight: 600;
    color: #333;
}

.page-size-select {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.875rem;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.table-container {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead tr {
    background: #f9f9f9;
    border-bottom: 2px solid #e0e0e0;
}

.data-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.data-table th.sortable:hover {
    background: #f0f0f0;
}

.data-table th.sorted {
    background: #e3f2fd;
    color: #1976D2;
}

.sort-icon {
    margin-left: 0.25rem;
    opacity: 0.5;
}

.data-table th.sorted .sort-icon {
    opacity: 1;
}

.filter-row th {
    padding: 0.5rem 0.75rem;
    background: white;
}

.filter-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.8125rem;
}

.filter-input:focus {
    outline: none;
    border-color: #2196F3;
}

.data-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.data-table tbody tr:hover {
    background: #f9f9f9;
}

.data-table tbody tr.selected {
    background: #e3f2fd;
}

.data-table td {
    padding: 0.75rem;
}

.col-checkbox {
    width: 40px;
    text-align: center;
}

.font-weight-bold {
    font-weight: 600;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-danger {
    background: #ffebee;
    color: #c62828;
}

.badge-warning {
    background: #fff3e0;
    color: #e65100;
}

.badge-secondary {
    background: #f5f5f5;
    color: #666;
}

.badge-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-muted {
    background: #f5f5f5;
    color: #999;
}

.datatable-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.pagination-info {
    font-size: 0.875rem;
    color: #666;
}

.pagination-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.btn:hover:not(:disabled) {
    background: #f5f5f5;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-primary {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

.btn-primary:hover:not(:disabled) {
    background: #1976D2;
}

.btn-secondary {
    background: #f5f5f5;
    color: #666;
}

.btn-danger {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

.btn-danger:hover:not(:disabled) {
    background: #d32f2f;
}
</style>
