@php($routePrefix = $routePrefix ?? 'configuration.branding')
<div class="table-responsive project-table">
    <table id="datatable" class="table mb-0 dt-responsive nowrap">
        <thead class="thead-light ">
            <tr>
                <th>User</th>
                <th>Color</th>
                <th class="text-end">Action</th>
            </tr>
        </thead>
        <tbody>
        @if(isset($data) && count($data) > 0)
            @foreach($data as $user)
                <tr data-id="{{ $user->id }}">
                    <td>{{ $user->full_name ?? ($user->first_name.' '.$user->last_name) }}</td>
                    <td>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="color" value="{{ $user->calendar_color ?? '#000000' }}" data-user-id="{{ $user->id }}" class="form-control form-control-color calendar-color-picker" title="Choose color">
                            <span class="ml-2">{{ $user->calendar_color ?? '' }}</span>
                        </div>
                    </td>
                    <td class="d-flex gap-2 justify-content-end">
                        <button type="button" class="action-btn" title="Change the color from color picker to save"
                                data-save-user-id="{{ $user->id }}" data-toggle="tooltip" disabled>
                            <i class="{{ \Config::get('settings.icon_save', 'mdi mdi-content-save') }}"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
        @else
            <tr><td colspan="4" class="text-center">No Data Found</td></tr>
        @endif
        </tbody>
    </table>
</div>
@include('admin.components.pagination')
<meta name="calendar-color-save-url" content="{{ route('configuration.branding.save-user-color') }}">
@push('page_script')
<script src="{{ asset('assets/js/calendar-color.js') }}"></script>
@endpush