@if($rows->count() === 0)
    <div class="alert alert-light border">
        Brak szkolen spelniajacych wybrane filtry.
    </div>
@elseif($viewMode === 'tiles')
    <div class="row">
        @foreach($rows as $item)
            @php
                $watermarkVariant = trim((string) ($item['watermark_variant'] ?? ''));
                $watermarkText = trim((string) ($item['watermark_text'] ?? ''));
                $showWatermark = $watermarkVariant !== '' && $watermarkText !== '';
                $watermarkSizeClass = '';
                if ($showWatermark) {
                    $watermarkSizeClass = strpos($watermarkText, '%') !== false ? 'is-percent' : 'is-label';
                }
            @endphp
            <div class="col-xl-4 col-lg-4 col-md-6 mb-3" style="height: 22vh;">
                <div
                    class="my_kafelek my-training-tile-card js-open-training-tile {{ (!empty($item['can_open']) && !empty($item['open_url'])) ? 'is-clickable' : '' }}"
                    style="min-width: 24vw; max-width: unset;"
                    data-open-url="{{ (!empty($item['can_open']) && !empty($item['open_url'])) ? $item['open_url'] : '' }}"
                    @if(!empty($item['can_open']) && !empty($item['open_url']))
                        role="link" tabindex="0" aria-label="Otworz szkolenie {{ $item['topic'] }}"
                    @endif
                >
                    @if($showWatermark)
                        <div class="training-result-watermark {{ $watermarkVariant === 'passed' ? 'is-passed' : 'is-failed' }} {{ $watermarkSizeClass }}" aria-hidden="true">
                            <span>{{ $watermarkText }}</span>
                        </div>
                    @endif
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-start mb-2 collumn-gap-3" style="position: relative; top: -20px; margin-inline: -20px;">
                            <span class="badge badge-light">#{{ $item['training_id'] }}</span>

                            <div class="tile-status-icons ml-auto">
                                @if(!empty($item['is_passed']))
                                    <span class="tile-status-icon is-success" title="Zaliczone" aria-label="Zaliczone">
                                        <i class="fas fa-check"></i>
                                    </span>
                                @elseif(!empty($item['has_participation']))
                                    <span class="tile-status-icon is-warning" title="W trakcie / niezaliczone" aria-label="W trakcie / niezaliczone">
                                        <i class="fas fa-hourglass-half"></i>
                                    </span>
                                @else
                                    <span class="tile-status-icon is-muted" title="Nie rozpoczeto" aria-label="Nie rozpoczeto">
                                        <i class="far fa-eye-slash"></i>
                                    </span>
                                @endif

                                @if(!empty($item['is_active']))
                                    <span class="tile-status-icon is-active" title="Aktywne" aria-label="Aktywne">
                                        <i class="fas fa-bolt"></i>
                                    </span>
                                @elseif(empty($item['has_started']))
                                    <span class="tile-status-icon is-muted" title="Zaplanowane" aria-label="Zaplanowane">
                                        <i class="far fa-clock"></i>
                                    </span>
                                @else
                                    <span class="tile-status-icon is-archived" title="Archiwalne" aria-label="Archiwalne">
                                        <i class="fas fa-archive"></i>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <h5 class="my-training-title">{{ $item['topic'] }}</h5>

                        <div class="my-training-meta mb-3">
                            <div><i class="far fa-calendar-alt mr-1"></i>{{ $item['date_display'] }}</div>
                            <div><i class="fas fa-map-marker-alt mr-1"></i>{{ $item['place'] }}</div>
                        </div>


                        <div class="small text-muted mb-3">
                            Materialy otwarte: {{ (int)($item['materials_opened_count'] ?? 0) }}<br>
                            Proby testu: {{ (int)($item['attempts_count'] ?? 0) }}
                            @if(!empty($item['max_attempts']) && (int)($item['max_attempts']) > 0)
                                / {{ (int)$item['max_attempts'] }}
                            @endif
                        </div>
                        <div class="mb-2">
                            @if(!empty($item['is_passed']))
                                <span class="badge badge-success mr-1"><i class="fas fa-check mr-1"></i>Zaliczone</span>
                            @endif
                            @if(!empty($item['is_attempt_limit_reached']))
                                <span class="badge badge-danger"><i class="fas fa-ban mr-1"></i>Wykorzystano limit testow</span>
                            @endif
                        </div>

                        <div class="mt-auto">
                            @if(!empty($item['can_open']) && !empty($item['open_url']))
                                <a class="btn btn-primary btn-block" href="{{ $item['open_url'] }}">
                                    <i class="fas fa-play-circle mr-1"></i>Otworz szkolenie
                                </a>
                                @if(!empty($item['is_active']))
                                    <div class="small text-success mt-2">
                                        <i class="fas fa-bolt mr-1"></i>Aktywne
                                    </div>
                                @elseif(!empty($item['is_read_only_archive']))
                                    <div class="small text-muted mt-2">
                                        <i class="fas fa-lock mr-1"></i>Tryb tylko do odczytu
                                    </div>
                                @else
                                    <div class="small text-success mt-2">
                                        <i class="fas fa-bolt mr-1"></i>Aktywne
                                    </div>
                                @endif
                            @else
                                <button class="btn btn-secondary btn-block" type="button" disabled>
                                    <i class="fas fa-lock mr-1"></i>Brak dostepu do archiwum
                                </button>
                                @if(empty($item['has_started']))
                                    <div class="small text-muted mt-2">
                                        <i class="far fa-clock mr-1"></i>Dostep po godzinie rozpoczecia.
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="ajax-crud-theme my-trainings-list-grid">
        <div class="ajax-crud-card">
            <div class="card-body py-0 px-0">
                <div class="table-responsive ajax-crud-theme_div_TableScroll tableFixHead my_scrollbar_new ajax-crud-table-wrap">
                    <table class="table table-sm new_table_app ajax-crud-table table-hover table-striped mb-0">
                        <thead>
                        <tr class="tabela-naglowek">
                            <th style="width: 5rem;" class="text-center">ID</th>
                            <th>Temat</th>
                            <th style="width: 10rem;" class="text-center">Data</th>
                            <th style="width: 12rem;" class="text-center">Status</th>
                            <th style="width: 12rem;" class="text-center">Postep</th>
                            <th style="width: 10rem;" class="text-center">Proby</th>
                            <th style="width: 12rem;" class="text-center">Akcja</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($rows as $item)
                            <tr>
                                <td class="text-center">#{{ $item['training_id'] }}</td>
                                <td>
                                    <strong>{{ $item['topic'] }}</strong>
                                    <div class="small text-muted">{{ $item['trainer'] }} | {{ $item['place'] }}</div>
                                </td>
                                <td class="text-center">{{ $item['date_display'] }}</td>
                                <td class="text-center">
                                    @if(!empty($item['is_active']))
                                        <span class="badge badge-success">Aktywne</span>
                                    @elseif(empty($item['has_started']))
                                        <span class="badge badge-light">Zaplanowane</span>
                                    @else
                                        <span class="badge badge-secondary">Archiwalne</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if(!empty($item['is_passed']))
                                        <span class="badge badge-success"><i class="fas fa-check mr-1"></i>Zaliczone</span>
                                    @elseif(!empty($item['has_participation']))
                                        <span class="badge badge-warning text-dark"><i class="fas fa-hourglass-half mr-1"></i>W trakcie</span>
                                    @else
                                        <span class="badge badge-light"><i class="far fa-eye-slash mr-1"></i>Brak wejscia</span>
                                    @endif
                                </td>
                                <td class="text-center">{{ (int)($item['attempts_count'] ?? 0) }}</td>
                                <td class="text-center">
                                    @if(!empty($item['can_open']) && !empty($item['open_url']))
                                        <a class="btn btn-sm btn-primary" href="{{ $item['open_url'] }}">
                                            <i class="fas fa-external-link-alt mr-1"></i>Otworz
                                        </a>
                                    @else
                                        <button class="btn btn-sm btn-secondary" disabled>
                                            <i class="fas fa-lock mr-1"></i>{{ empty($item['has_started']) ? 'Start w przyszlosci' : 'Brak' }}
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="mt-2">
    {{ $rows->links() }}
</div>