@extends('layouts.app')

@section('title', 'Guides')

@push('styles')
<style>
    .guide-filter-card .card-body { padding: 1.5rem; }
    .guide-filter-card .form-control,
    .guide-filter-card .form-select { min-height: 48px; }
    .guide-card-title { font-size: 1.1rem; line-height: 1.35; }
</style>
@endpush

@section('content')
<div class="container">
    <h1 class="mb-2">Shrimp care guides</h1>
    <p class="text-muted mb-4">Browse setup, feeding, water, compatibility, troubleshooting, and shrimp-specific care guides written to support real shrimp keeping decisions and long-term husbandry.</p>
    <div class="card section-card guide-filter-card mb-4">
        <div class="card-body">
            <form class="row g-3">
                <div class="col-md-6">
                    <label class="form-label" for="guide_search">Search guides</label>
                    <input id="guide_search" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search guides">
                </div>
                <div class="col-md-4">
                    <label class="form-label" for="guide_category">Category</label>
                    <select id="guide_category" name="category" class="form-select"><option value="">All categories</option>@foreach($categories as $category)<option value="{{ $category }}" @selected(request('category')===$category)>{{ $category }}</option>@endforeach</select>
                </div>
                <div class="col-md-2"><button class="btn btn-primary w-100">Filter</button></div>
            </form>
        </div>
    </div>
    <div class="row g-3">
        @foreach ($articles as $article)
            <div class="col-md-6 col-lg-4">
                <div class="card section-card h-100">
                    @if($article->imageUrl())
                        <img src="{{ $article->imageUrl() }}" alt="{{ $article->title }}" class="product-media">
                    @endif
                    <div class="card-body d-flex flex-column">
                        <span class="badge badge-soft mb-2">{{ $article->category }}</span>
                        <h5 class="guide-card-title">{{ $article->title }}</h5>
                        <p class="small text-muted">{{ $article->excerpt }}</p>
                        <div class="btn-row">
                            <a href="{{ route('guides.show', $article) }}" class="btn btn-outline-primary btn-sm">Read guide</a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="mt-4">{{ $articles->links() }}</div>
</div>
@endsection