@extends('layouts.app')
@section('title', $category->name . ' - ' . $settings->site_name)

@section('content')
<div class="be-hero py-5">
    <div class="container">
        <div class="d-flex align-items-center gap-3">
            <span class="be-cat-icon">
                @if ($category->imageUrl())
                <img src="{{ $category->imageUrl() }}" alt="{{ $category->name }}" style="width:100%;height:100%;object-fit:cover;border-radius:inherit;">
                @else
                <i class="bi {{ $category->icon ?? 'bi-grid' }}"></i>
                @endif
            </span>
            <div>
                <h1 class="be-section-title mb-1">{{ $category->name }}</h1>
                <p class="text-muted mb-0">{{ $category->description }}</p>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row g-4">
        @forelse ($services as $service)
        <div class="col-md-6 col-lg-4">
            @include('partials.service-card', ['service' => $service])
        </div>
        @empty
        <p class="text-muted">{{__('No services in this category yet')}}</p>
        @endforelse
    </div>
    <div class="mt-5">{{ $services->links() }}</div>
</div>
@endsection