@forelse ($boards as $board)
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4" id="board-card-{{ $board->id }}">
        <div class="card h-100 shadow-sm rounded-3">
            <div class="card-content position-relative">
                <div class="card-overlay-icons d-flex justify-content-between align-items-center px-2 py-1">
                    <div class="left-icons d-flex align-items-center">
                        @can('edit board')
                            <span class="action-edit text-warning cursor-pointer edit-icon me-2" title="Edit Board"
                                data-bs-toggle="modal" data-bs-target="#addBoardModal" data-id="{{ $board->id }}"
                                data-title="{{ $board->title }}" data-description="{{ $board->description }}"
                                data-image="{{ $board->image }}"
                                data-members="{{ $board->members->pluck('id')->join(',') }}">
                                <i class="feather icon-edit"></i>
                            </span>
                        @endcan
                    </div>

                    <div class="right-icons d-flex align-items-center">
                        @can('delete board')
                            <span class="action-delete text-danger cursor-pointer delete-icon">
                                <i class="feather icon-trash" title="Delete Board"
                                    onclick="deleteBoard({{ $board->id }})"></i>
                            </span>
                            <form id="delete-board-form-{{ $board->id }}"
                                action="{{ route('board.destroy', ['board' => $board->id]) }}" method="POST">
                                @csrf
                                @method('DELETE')
                            </form>
                        @endcan
                    </div>
                </div>

                <img class="card-img-top img-fluid board-image rounded-top"
                    src="{{ $board->image ? asset('images/boards/' . $board->image) : asset('images/boards/download.jpeg') }}"
                    alt="Card image cap" />

                <div class="card-body d-flex flex-column justify-content-between" style="min-height: 220px;">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="card-title mb-0 flex-grow-1 overflow-hidden pr-1">
                            <a href="{{ route('board.detail', ['board' => $board->id]) }}" class="text-dark fw-bold d-block text-truncate">
                                {{ $board->title }}
                            </a>
                        </h5>

                        <div class="d-inline-flex align-items-center flex-shrink-0" style="white-space: nowrap;">
                            <span id="status-badge-{{ $board->id }}" class="status-badge {{ $board->status === 'active' ? 'is-active' : 'is-inactive' }} mr-50">{{ ucfirst($board->status ?? 'inactive') }}</span>
                            <div class="custom-switch">
                            <input type="checkbox" id="boardSwitch{{ $board->id }}" class="custom-switch-input"
                                {{ $board->status === 'active' ? 'checked' : '' }}
                                onchange="toggleBoardStatus({{ $board->id }}, this)">
                            <label class="custom-switch-label" for="boardSwitch{{ $board->id }}">
                                <span class="custom-switch-inner"></span>
                                <span class="custom-switch-handle"></span>
                            </label>
                            </div>
                        </div>
                    </div>

                    <div class="description mb-2">
                        <p class="card-text text-muted small">{!! $board->description !!}</p>
                    </div>

                    <div>
                        <p class="text-muted small mb-2">
                            <i class="feather icon-calendar me-1"></i>
                            {{ $board->created_at->format('d-M-y') }}
                        </p>
                        <strong class="small d-block mb-1">Members:</strong>
                        <ul class="list-unstyled users-list m-0 d-flex align-items-center flex-wrap">
                            @forelse ($board->members as $member)
                                @php
                                    $nameParts = explode(' ', $member->name);
                                    $initials = strtoupper(substr($nameParts[0], 0, 1));
                                    if (count($nameParts) > 1) {
                                        $initials .= strtoupper(substr($nameParts[1], 0, 1));
                                    } else {
                                        $initials .= strtoupper(substr($nameParts[0], 1, 1));
                                    }
                                    $randomColor = sprintf('#%06X', mt_rand(0, 0xffffff));
                                @endphp
                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom"
                                    data-original-title="{{ $member->name }}" class="avatar pull-up me-1 mb-1"
                                    style="background-color: {{ $randomColor }}; width:30px; height:30px">
                                    <span
                                        class="media-object rounded-circle d-flex align-items-center justify-content-center text-white fw-bold">
                                        {{ $initials }}
                                    </span>
                                </li>
                            @empty
                                <span class="text-muted small">No Member Assigned</span>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@empty
    <div class="mx-2">
        <h5>No board found.</h5>
    </div>
@endforelse