@extends('layouts.app')
@section('title', 'Tableros · Taks')
@section('body-class', 'boards-home')
@section('content')
<header class="catalog-topbar">
    <a class="mobile-header-boards icon-button" href="{{ route('boards') }}" aria-label="Ver tableros"><i class="ti tabler-layout-grid" aria-hidden="true"></i></a>
        <a class="top-brand" href="{{ route('boards') }}"><img src="{{ asset('images/taks-mark.svg') }}" width="26" height="26" alt=""><strong>Taks</strong></a>
    <button type="button" class="icon-button mobile-search-toggle" aria-label="Abrir buscador" aria-expanded="false"><i class="ti tabler-search" aria-hidden="true"></i></button><form class="board-search global-search" data-search-url="{{ route('search') }}" method="get" role="search"><input class="form-control" name="q" value="{{ request('q') }}" placeholder="Buscar en Taks" aria-label="Buscar tableros" maxlength="200"><button class="icon-button" aria-label="Buscar"><i class="ti tabler-search" aria-hidden="true"></i></button>@if(request()->filled('q'))<a class="icon-button" href="{{ route('boards') }}" aria-label="Limpiar búsqueda"><i class="ti tabler-x" aria-hidden="true"></i></a>@endif</form>
    <button class="btn btn-primary" type="button" data-dialog="create-board">Crear</button>
    @include('partials.account-menu')
<details class="mobile-header-menu"><summary aria-label="Más opciones"><i class="ti tabler-dots" aria-hidden="true"></i></summary><div><a href="{{ route('boards') }}"><i class="ti tabler-layout-grid" aria-hidden="true"></i> Mis tableros</a><a href="{{ route('home') }}"><i class="ti tabler-inbox" aria-hidden="true"></i> Bandeja de entrada</a><form method="post" action="{{ route('logout') }}">@csrf<button><i class="ti tabler-logout" aria-hidden="true"></i> Cerrar sesión</button></form></div></details></header>
<div class="catalog-layout">
    <nav class="catalog-nav" aria-label="Espacio de trabajo"><a class="active" href="{{ route('boards') }}" aria-current="page"><i class="ti tabler-layout-kanban" aria-hidden="true"></i> Tableros</a><a href="{{ route('home') }}"><i class="ti tabler-inbox" aria-hidden="true"></i> Bandeja de entrada</a><div class="catalog-nav-label">ESPACIO DE TRABAJO</div><div class="workspace-identity"><span>T</span> Mi espacio personal</div><a href="{{ route('boards', ['closed' => 1]) }}#closed-boards"><i class="ti tabler-archive" aria-hidden="true"></i> Tableros cerrados</a></nav>
    <main class="catalog-main">
        <div class="mobile-board-browser"><label class="mobile-board-filter"><i class="ti tabler-search" aria-hidden="true"></i><input type="search" placeholder="Buscar tus tableros" aria-label="Filtrar mis tableros" data-board-filter></label><div class="mobile-board-tabs"><button type="button" data-board-scope="all" aria-pressed="true">Todos</button><button type="button" data-board-scope="recent" aria-pressed="false"><i class="ti tabler-clock" aria-hidden="true"></i> Recientes</button></div><p data-board-empty hidden>No hay tableros con ese nombre.</p></div>
        <div class="catalog-heading"><div><span class="catalog-eyebrow">TU ESPACIO DE TRABAJO</span><h1>Tableros</h1><p>Un espacio para cada proyecto.</p></div><button class="btn btn-primary" type="button" data-dialog="create-board"><i class="ti tabler-plus" aria-hidden="true"></i> Crear tablero</button></div>
        @if($recent->isNotEmpty() && !request()->filled('q'))
        <section class="catalog-section" data-board-section="recent"><h2><i class="ti tabler-clock" aria-hidden="true"></i> Vistos recientemente</h2><div class="boards-grid">@foreach($recent as $board)@include('partials.board-tile')@endforeach</div></section>
        @endif
        <section class="catalog-section" data-board-section="all"><h2><i class="ti tabler-layout-grid" aria-hidden="true"></i> {{ request()->filled('q') ? 'Resultados de búsqueda' : 'Mis tableros' }} <span>{{ $boards->count() }}</span></h2><div class="boards-grid">@foreach($boards as $board)@include('partials.board-tile')@endforeach<button class="new-board-tile" type="button" data-dialog="create-board"><i class="ti tabler-plus" aria-hidden="true"></i><span>Crear un tablero nuevo</span></button></div>@if($boards->isEmpty() && request()->filled('q'))<p class="muted mt-3">No hay tableros con ese nombre.</p>@endif</section>
        <details id="closed-boards" class="closed-boards" @if(request('closed')) open @endif><summary><i class="ti tabler-archive" aria-hidden="true"></i> Ver tableros cerrados <span>{{ $closed->count() }}</span></summary><p class="muted">Sus listas y tarjetas se conservan.</p>@forelse($closed as $board)<div class="closed-board-row"><strong>{{ $board->name }}</strong><form method="post" action="{{ url('/projects/'.$board->id) }}">@csrf @method('PATCH')<input type="hidden" name="is_active" value="1"><button class="btn btn-outline-secondary">Reabrir</button></form></div>@empty<p class="muted">No tienes tableros cerrados.</p>@endforelse</details>
    </main>
</div>
@include('partials.mobile-dock', ['catalogDock' => true])
<dialog id="create-board" class="workspace-dialog" aria-labelledby="create-board-heading" @if($errors->any()) data-auto-open @endif><div class="dialog-heading"><h2 id="create-board-heading">Crear tablero</h2><button type="button" class="icon-button" data-close-dialog aria-label="Cerrar"><i class="ti tabler-x" aria-hidden="true"></i></button></div><div class="create-board-preview" aria-hidden="true"><span></span><span></span><span></span></div><form method="post" action="{{ url('/projects') }}">@csrf<input type="hidden" name="_form" value="project"><label for="board-name">Nombre del tablero</label><input id="board-name" name="name" class="form-control" placeholder="Por ejemplo, sitio web" required maxlength="100" value="{{ old('name') }}"><div class="dialog-actions"><button type="button" class="btn btn-outline-secondary" data-close-dialog>Cancelar</button><button class="btn btn-primary">Crear tablero</button></div></form></dialog>
@endsection
@push('scripts')<script src="{{ asset('js/board-browser.js') }}" defer></script><script src="{{ asset('js/workspace.js') }}?v=7" defer></script>@endpush