@extends('layouts.admin.app')

@section('title', __('pages/admin/components.nav.badges'))

@section('content')
<x-layouts.admin.component-demo :title="__('pages/admin/components.nav.badges')">
    <x-utility.card :title="__('pages/admin/components.badges.variants')">
        <div class="flex flex-wrap items-center gap-3">
            <x-utility.badge>{{ __('ui.variant.default') }}</x-utility.badge>
            <x-utility.badge variant="primary">{{ __('ui.variant.primary') }}</x-utility.badge>
            <x-utility.badge variant="success">{{ __('ui.variant.success') }}</x-utility.badge>
            <x-utility.badge variant="warning">{{ __('ui.variant.warning') }}</x-utility.badge>
            <x-utility.badge variant="danger">{{ __('ui.variant.danger') }}</x-utility.badge>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.badges.with_status_dot')">
        <div class="flex flex-wrap items-center gap-3">
            <x-utility.badge variant="success" :dot="true">{{ __('statuses.active') }}</x-utility.badge>
            <x-utility.badge variant="warning" :dot="true">{{ __('statuses.pending') }}</x-utility.badge>
            <x-utility.badge variant="danger" :dot="true">{{ __('statuses.inactive') }}</x-utility.badge>
            <x-utility.badge variant="primary" :dot="true">{{ __('pages/admin/components.badges.labels.new') }}</x-utility.badge>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.badges.small_badges')">
        <div class="flex flex-wrap items-center gap-3">
            <x-utility.badge size="sm" variant="primary">{{ __('pages/admin/components.badges.labels.pro') }}</x-utility.badge>
            <x-utility.badge size="sm" variant="success">{{ __('pages/admin/components.badges.labels.verified') }}</x-utility.badge>
            <x-utility.badge size="sm" variant="warning">{{ __('statuses.draft') }}</x-utility.badge>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.badges.tags')">
        <div class="flex flex-wrap gap-2">
            <x-utility.badge variant="primary">Laravel</x-utility.badge>
            <x-utility.badge variant="primary">Tailwind</x-utility.badge>
            <x-utility.badge variant="primary">Alpine.js</x-utility.badge>
            <x-utility.badge variant="surface">{{ __('pages/admin/components.badges.labels.documentation') }}</x-utility.badge>
            <x-utility.badge variant="surface">{{ __('pages/admin/components.badges.labels.api') }}</x-utility.badge>
        </div>
    </x-utility.card>
</x-layouts.admin.component-demo>
@endsection