@extends('layouts.store')

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

@section('content')
    <section class="dashboard-head">
        <div>
            <span class="eyebrow">Category</span>
            <h1>{{ $category->name }}</h1>
            @if ($category->description)
                <p>{{ $category->description }}</p>
            @endif
        </div>
        <a class="button ghost" href="{{ route('storefront.home') }}">All products</a>
    </section>

    <section class="product-grid">
        @forelse ($products as $product)
            <article class="product-card">
                <div class="product-media">
                    <a href="{{ $product['url'] }}" aria-label="View {{ $product['name'] }}">
                        <img src="{{ $product['image'] }}" alt="{{ $product['name'] }}" loading="lazy">
                    </a>
                    <span class="badge">{{ $product['category'] }}</span>
                </div>
                <div class="product-body">
                    <div class="product-meta">
                        <small>{{ $product['stock'] }} in stock</small>
                        <small>{{ $product['rating'] }} rating</small>
                    </div>
                    <h3><a class="product-title-link" href="{{ $product['url'] }}">{{ $product['name'] }}</a></h3>
                    <div class="price-row">
                        <div class="price-stack">
                            <span class="price">{{ $product['price_display'] }}</span>
                            @if ($product['compare_price_display'])
                                <small><s>{{ $product['compare_price_display'] }}</s></small>
                            @endif
                        </div>
                        @if ($product['discount_percent'] > 0)
                            <small class="discount-badge">{{ rtrim(rtrim(number_format($product['discount_percent'], 2), '0'), '.') }}% off</small>
                        @endif
                    </div>
                </div>
            </article>
        @empty
            <p class="empty-state">No active products in this category.</p>
        @endforelse
    </section>
@endsection