@extends('admin.layouts.admin')

@section('title', 'Blog · Categorías')

@php $catColors = ['teal' => '#3E7C77', 'amber' => '#D0A03A', 'purple' => '#8A5BB0', 'blue' => '#3F6FB0', 'coral' => '#B5503A', 'gray' => '#79847B']; @endphp

@section('content')

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div>
        <div class="admin-page-title">Categorías del blog</div>
        <p class="admin-page-sub mb-0">Agrupan los artículos.</p>
    </div>
    <a href="{{ route('admin.blog.categories.create') }}" class="btn btn-fermenty-primary btn-sm">+ Nueva</a>
</div>

<div class="row g-3">
    @foreach($categories as $cat)
        <div class="col-12 col-md-6">
            <div class="admin-card">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="d-flex align-items-center gap-2">
                        <span style="width:14px;height:14px;border-radius:50%;background:{{ $catColors[$cat->color_key] ?? '#79847B' }};display:inline-block;"></span>
                        <div>
                            <div class="admin-user-name">{{ $cat->name }}</div>
                            <div class="admin-user-email">{{ $cat->slug }}</div>
                        </div>
                    </div>
                    <span class="fermenty-badge badge-active">{{ $cat->posts_count }} artículos</span>
                </div>
                @if($cat->description)<p class="step-desc mt-2 mb-2">{{ $cat->description }}</p>@endif
                <div class="d-flex gap-2 mt-2">
                    <a href="{{ route('admin.blog.categories.edit', $cat) }}" class="btn-xs-admin">Editar</a>
                    <form method="POST" action="{{ route('admin.blog.categories.destroy', $cat) }}" onsubmit="return confirm('¿Eliminar categoría?')">
                        @csrf @method('DELETE')
                        <button class="btn-xs-admin" style="color:#7A1A1A;">Eliminar</button>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
</div>

@endsection