@extends('layouts.app')
@include('partials.back', ['fallback' => route('admin.menu.index')])

@section('title', 'Categories')

@push('head')
<style>
    .cat-wrap { max-width:720px; margin:0 auto; padding:24px; }
    .cat-row { display:flex; gap:8px; align-items:center; background:#fff; border-radius:12px; padding:14px 16px; margin-bottom:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .cat-row strong { flex:1; }
    .cat-row span { font-size:12px; color:#666; }
</style>
@endpush

@section('content')
<div class="cat-wrap">
    <h1 style="font-size:24px;font-weight:700;margin-bottom:16px">Categories</h1>
    <p style="font-size:13px;color:#666;margin-bottom:16px">Loaded from the API. Edit them in the system behind the API.</p>

    @forelse ($categories as $cat)
        <div class="cat-row">
            <strong>{{ $cat->name }}</strong>
            <span>Order {{ $cat->sort_order }}</span>
        </div>
    @empty
        <p>No categories returned from the API.</p>
    @endforelse
</div>
@endsection