@extends('layouts.admin')

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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">{{ $category->name }}</h1>

    <a
        href="{{ route('admin.categories.edit', $category) }}"
        class="btn btn-primary-custom"
    >
        Edit Category
    </a>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body">
        <img
            src="{{ $category->image_url }}"
            alt="{{ $category->name }}"
            class="img-fluid rounded mb-4 category-detail-image"
        >

        <dl class="row mb-0">
            <dt class="col-sm-3">Name</dt>
            <dd class="col-sm-9">{{ $category->name }}</dd>

            <dt class="col-sm-3">Slug</dt>
            <dd class="col-sm-9">{{ $category->slug }}</dd>

            <dt class="col-sm-3">Description</dt>
            <dd class="col-sm-9">
                {{ $category->description ?: 'No description provided.' }}
            </dd>

            <dt class="col-sm-3">Display Order</dt>
            <dd class="col-sm-9">{{ $category->display_order }}</dd>

            <dt class="col-sm-3">Status</dt>
            <dd class="col-sm-9">
                {{ $category->is_active ? 'Active' : 'Inactive' }}
            </dd>
        </dl>
    </div>
</div>
@endsection