@extends('layouts.app')

@section('title', $board->name)

@push('head')
    {!! resource('css/board.default.css') !!}
    {!! resource('css/board.blog.css') !!}
    {!! resource('css/pagination.css') !!}
@endpush

@section('content')
<main class="board">
    @include('partials.document-navigation')

    <div class="container">
        <div class="board-header">
            <h1>
                {{ $board->name }}
                <span class="total-count">{{ $board->getSetting('enable_notice', false)  ? number_format($posts->total() + $notices->count()) : number_format($posts->total()) }}</span>
            </h1>
            
            @if ($board->getSetting('enable_search', false))
            <form method="GET" class="board-search-form">
                <div class="input-group input-group-sm">
                    @if($usesCategories)
                        <select class="form-select" name="category" onchange="this.form.submit()">
                            <option value="">
                                All Categories ({{ number_format($totalPosts) }})
                            </option>
                            @foreach($categoriesWithCounts as $categoryData)
                                <option value="{{ $categoryData['name'] }}" {{ $currentCategory === $categoryData['name'] ? 'selected' : '' }}>
                                    {{ $categoryData['name'] }} ({{ number_format($categoryData['count']) }})
                                </option>
                            @endforeach
                        </select>
                    @endif

                    <input type="text" name="search" class="form-control" placeholder="Search {{ $board->name }}" value="{{ $currentSearch ?? '' }}">
                    <button type="submit" class="btn btn-outline-dark"><i class="bi bi-search"></i></button>

                    @if($hasAnyFilter)
                        <a href="{{ route('board.index', $board->slug) }}" class="btn btn-outline-danger" title="Clear Filters">
                            <i class="bi bi-x-circle"></i> Clear
                        </a>
                    @endif
                </div>
            </form>
            @endif
        </div>

        @if($posts->count() > 0)
        <div class="posts-list">
            @foreach($posts as $post)
                <div class="post">
                    <a href="{{ route('board.show', [$board->slug, $post->slug ?: $post->id]) }}">
                        @if ($post->thumbnail)
                            <img src="{{ $post->thumbnail }}" alt="{{ $post->title }}">
                        @else
                            <div class="thumbnail-placeholder">
                                <i class="bi bi-image"></i>
                            </div>
                        @endif
                    </a>
                    
                    <div class="post-content">
                        <a href="{{ route('board.show', [$board->slug, $post->slug ?: $post->id]) }}">{{ $post->title }}</a>

                        <div class="post-preview">{{ $post->preview_content }}</div>
                    </div>
                </div>
            @endforeach
        </div>
        @endif

        @if($posts->count() > 0 && $posts->hasPages())
            <div class="d-none d-md-block">
                {{ $posts->appends(request()->query())->onEachSide(1)->links('pagination.custom') }}
            </div>
            <div class="d-md-none">
                {{ $posts->appends(request()->query())->links('pagination.simple-custom') }}
            </div>
        @endif
           
        <div class="board-footer">
            @if(can('write', $board))
                <a href="{{ route('board.create', $board->slug) }}" class="btn-default text-nowrap">
                    <i class="bi bi-pencil-square"></i> New Post
                </a>
            @endif
        </div>

    </div>
</main>

@endsection