{{--
    @intent Página de listagem de exemplo — template para novos módulos V2.
    @compliance Bootstrap 5, Bootstrap Icons 1.1, WCAG AAA, eMAG 3.1

    PADRÕES DEMONSTRADOS:
    ─────────────────────
    • Layout grid Bootstrap 5 (container → row → col)
    • @v2can() para esconder botões de escrita conforme permissão
    • Acessibilidade: labels, aria-*, role, headings hierarchy
    • Mensagens flash (success/error) padronizadas
    • Breadcrumb semântico
    • Tradução inline (sem package extra)

    DICA:
    • Copie este arquivo como ponto de partida para criar sua view CMS.
    • Substitua 'ExemploAPI' pela chave do seu módulo nos @v2can().
    • Mantenha os comentários de acessibilidade @compliance.
--}}

@extends('v2-cms::layouts.app', [
    'title' => 'Exemplo API — Referência para Devs',
])

@section('page-breadcrumbs')
    <nav aria-label="Breadcrumb">
        <ol class="breadcrumb bg-transparent p-0 mb-0 small">
            <li class="breadcrumb-item"><a href="{{ route('v2.cms.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Exemplos</li>
        </ol>
    </nav>
@endsection

@section('page-actions')
    @v2can('ExemploAPI', 'write')
    <button type="button"
            class="btn btn-success fw-bold d-inline-flex align-items-center gap-1"
            aria-label="Criar novo registro de exemplo"
            title="Criar novo registro">
        <i class="bi bi-plus-circle" aria-hidden="true"></i>
        Novo Exemplo
    </button>
    @endv2can
@endsection

@section('content')
<div class="row">
    <div class="col-12">

        {{-- ═══════════════════════════════════════════════════════════════════
             CARD HEADER — Cabeçalho da página
             ═══════════════════════════════════════════════════════════════ --}}
        <div class="card shadow-sm border-0">
            <div class="card-body p-4">

                {{-- ═══════════════════════════════════════════════════════════
                     MENSAGENS FLASH — Feedback ao usuário
                     ═══════════════════════════════════════════════════════ --}}
                @if(session('success'))
                    <div class="alert alert-success d-flex align-items-center gap-2 alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
                        <span>{{ session('success') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar mensagem"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger d-flex align-items-center gap-2 alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                        <span>{{ session('error') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar mensagem"></button>
                    </div>
                @endif

                {{-- ═══════════════════════════════════════════════════════════
                     BLOCO DE INFORMAÇÃO — Documentação embarcada
                     ═══════════════════════════════════════════════════════ --}}
                <div class="alert alert-info d-flex align-items-start gap-3 mb-4" role="alert">
                    <i class="bi bi-info-circle-fill fs-4 mt-1 flex-shrink-0" aria-hidden="true"></i>
                    <div class="small">
                        <strong class="d-block mb-1">📘 Módulo de Referência para Desenvolvedores</strong>
                        <p class="mb-0">
                            Este módulo serve como <strong>template vivo</strong> para criação de novos módulos V2.
                            Consulte os arquivos em <code>V2/Modules/_Exemplos/ExemploAPI/</code> para ver:
                            <br>
                            • ModuleProvider com restrição de acesso (<code>restricted</code>)<br>
• Controller com <code>v2_can()</code> e bloqueio por email<br>
                    • View com <code>@@v2can</code> e acessibilidade eMAG/WCAG AAA.
                        </p>
                    </div>
                </div>

                {{-- ═══════════════════════════════════════════════════════════
                     TABELA DE REGISTROS — Listagem principal
                     ═══════════════════════════════════════════════════════ --}}
                @if(empty($items))
                    {{-- Estado vazio --}}
                    <div class="text-center py-5">
                        <i class="bi bi-inbox text-muted" style="font-size: 3rem;" aria-hidden="true"></i>
                        <p class="text-muted mt-3 mb-0 fw-bold">Nenhum registro encontrado.</p>
                        <p class="text-muted small">Registros criados aparecerão nesta listagem.</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-striped table-hover align-middle mb-0"
                               aria-label="Listagem de registros de exemplo">
                            <caption class="visually-hidden">Relação de registros do módulo Exemplo API</caption>
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" style="width: 5%;" class="text-center">#</th>
                                    <th scope="col" style="width: 30%;">Título</th>
                                    <th scope="col" style="width: 45%;">Descrição</th>
                                    <th scope="col" style="width: 10%;">Status</th>
                                    <th scope="col" style="width: 10%;" class="text-center">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($items as $index => $item)
                                    <tr>
                                        <td class="text-center text-muted small">{{ $index + 1 }}</td>
                                        <td class="fw-bold">{{ $item['titulo'] }}</td>
                                        <td class="text-secondary small">{{ $item['descricao'] }}</td>
                                        <td>
                                            @if($item['status'] === 'ativo')
                                                <span class="badge bg-success d-inline-flex align-items-center gap-1">
                                                    <i class="bi bi-check-circle-fill" aria-hidden="true"></i> Ativo
                                                </span>
                                            @else
                                                <span class="badge bg-warning text-dark d-inline-flex align-items-center gap-1">
                                                    <i class="bi bi-clock" aria-hidden="true"></i> Rascunho
                                                </span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group gap-1">
                                                {{-- Botão de edição — só aparece com permissão write --}}
                                                @v2can('ExemploAPI', 'write')
                                                <button type="button"
                                                        class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-1 fw-bold"
                                                        aria-label="Editar {{ $item['titulo'] }}"
                                                        title="Editar">
                                                    <i class="bi bi-pencil-fill" aria-hidden="true"></i>
                                                </button>
                                                @endv2can
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            {{-- Footer informativo — mostra o namespace da view atual --}}
            <div class="card-footer bg-white border-top-0 text-center py-2">
                <small class="text-muted">
                    <i class="bi bi-code-slash me-1" aria-hidden="true"></i>
                    View: <code>v2-exemploapi::cms.index</code>
                    &bull; Controller: <code>ExemploAPICmsController</code>
                    &bull; Route: <code>v2.exemplo-api.index</code>
                </small>
            </div>
        </div>
    </div>
</div>
@endsection