@extends('layout.layout')
@php
    $title='Badges';
    $subTitle = 'Components / Badges';
@endphp

@section('content')

    <div class="row gy-4">
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <span class="badge text-sm fw-semibold bg-primary-600 px-20 py-9 radius-4 text-white">Primary</span>
                        <span class="badge text-sm fw-semibold bg-lilac-600 px-20 py-9 radius-4 text-white">Secondary</span>
                        <span class="badge text-sm fw-semibold bg-success-600 px-20 py-9 radius-4 text-white">Success</span>
                        <span class="badge text-sm fw-semibold bg-info-600 px-20 py-9 radius-4 text-white">Info</span>
                        <span class="badge text-sm fw-semibold bg-warning-600 px-20 py-9 radius-4 text-white">Warning</span>
                        <span class="badge text-sm fw-semibold bg-danger-600 px-20 py-9 radius-4 text-white">Danger</span>
                        <span class="badge text-sm fw-semibold bg-neutral-800 px-20 py-9 radius-4 text-base">Dark</span>
                        <span class="badge text-sm fw-semibold bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
                        <span class="badge text-sm fw-semibold bg-light-600 px-20 py-9 radius-4 text-dark">Light</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Outline Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <span class="badge text-sm fw-semibold border border-primary-600 text-primary-600 bg-transparent px-20 py-9 radius-4 text-white">Primary</span>
                        <span class="badge text-sm fw-semibold border border-lilac-600 text-lilac-600 bg-transparent px-20 py-9 radius-4 text-white">Secondary</span>
                        <span class="badge text-sm fw-semibold border border-success-600 text-success-600 bg-transparent px-20 py-9 radius-4 text-white">Success</span>
                        <span class="badge text-sm fw-semibold border border-info-600 text-info-600 bg-transparent px-20 py-9 radius-4 text-white">Info</span>
                        <span class="badge text-sm fw-semibold border border-warning-600 text-warning-600 bg-transparent px-20 py-9 radius-4 text-white">Warning</span>
                        <span class="badge text-sm fw-semibold border border-danger-600 text-danger-600 bg-transparent px-20 py-9 radius-4 text-white">Danger</span>
                        <span class="badge text-sm fw-semibold border border-neutral-800 text-neutral-800 bg-transparent px-20 py-9 radius-4 text-white">Dark</span>
                        <span class="badge text-sm fw-semibold bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
                        <span class="badge text-sm fw-semibold border border bg-transparent px-20 py-9 radius-4 text-secondary-light">Light</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Soft Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <span class="badge text-sm fw-semibold text-primary-600 bg-primary-100 px-20 py-9 radius-4 text-white">Primary</span>
                        <span class="badge text-sm fw-semibold text-lilac-600 bg-lilac-100 px-20 py-9 radius-4 text-white">Secondary</span>
                        <span class="badge text-sm fw-semibold text-success-600 bg-success-100 px-20 py-9 radius-4 text-white">Success</span>
                        <span class="badge text-sm fw-semibold text-info-600 bg-info-100 px-20 py-9 radius-4 text-white">Info</span>
                        <span class="badge text-sm fw-semibold text-warning-600 bg-warning-100 px-20 py-9 radius-4 text-white">Warning</span>
                        <span class="badge text-sm fw-semibold text-danger-600 bg-danger-100 px-20 py-9 radius-4 text-white">Danger</span>
                        <span class="badge text-sm fw-semibold text-neutral-800 bg-neutral-300 px-20 py-9 radius-4 text-white">Dark</span>
                        <span class="badge text-sm fw-semibold bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
                        <span class="badge text-sm fw-semibold bg-light-100 px-20 py-9 radius-4 text-secondary-light">Light</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <span class="badge text-sm fw-semibold rounded-pill bg-primary-600 px-20 py-9 radius-4 text-white">Primary</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-lilac-600 px-20 py-9 radius-4 text-white">Secondary</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-success-600 px-20 py-9 radius-4 text-white">Success</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-info-600 px-20 py-9 radius-4 text-white">Info</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-warning-600 px-20 py-9 radius-4 text-white">Warning</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-danger-600 px-20 py-9 radius-4 text-white">Danger</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-neutral-800 px-20 py-9 radius-4 text-base">Dark</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
                        <span class="badge text-sm fw-semibold rounded-pill bg-light-600 px-20 py-9 radius-4 text-dark">Light</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Gradient Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <span class="badge text-sm fw-semibold bg-dark-primary-gradient px-20 py-9 radius-4 text-white">Primary</span>
                        <span class="badge text-sm fw-semibold bg-dark-lilac-gradient px-20 py-9 radius-4 text-white">Secondary</span>
                        <span class="badge text-sm fw-semibold bg-dark-success-gradient px-20 py-9 radius-4 text-white">Success</span>
                        <span class="badge text-sm fw-semibold bg-dark-info-gradient px-20 py-9 radius-4 text-white">Info</span>
                        <span class="badge text-sm fw-semibold bg-dark-warning-gradient px-20 py-9 radius-4 text-white">Warning</span>
                        <span class="badge text-sm fw-semibold bg-dark-danger-gradient px-20 py-9 radius-4 text-white">Danger</span>
                        <span class="badge text-sm fw-semibold bg-dark-dark-gradient px-20 py-9 radius-4 text-white">Dark</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Badges With Button</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="badge text-sm fw-semibold bg-primary-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
                            Primary
                            <span class="badge bg-white text-dark radius-5 text-xs">4</span>
                        </button>
                        <button type="button" class="badge text-sm fw-semibold bg-lilac-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
                            Secondary
                            <span class="badge bg-white text-dark radius-5 text-xs">4</span>
                        </button>
                        <button type="button" class="badge text-sm fw-semibold bg-success-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
                            Success
                            <span class="badge bg-white text-dark radius-5 text-xs">4</span>
                        </button>
                        <button type="button" class="badge text-sm fw-semibold bg-info-600 px-20 16-9 radius-4 text-white d-flex align-items-center gap-2">
                            Info
                            <span class="badge bg-white text-dark radius-5 text-xs">4</span>
                        </button>
                        <button type="button" class="badge text-sm fw-semibold bg-warning-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
                            Warning
                            <span class="badge bg-white text-dark radius-5 text-xs">4</span>
                        </button>
                        <button type="button" class="badge text-sm fw-semibold bg-danger-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
                            Danger
                            <span class="badge bg-white text-dark radius-5 text-xs">4</span>
                        </button>
                        <button type="button" class="badge text-sm fw-semibold bg-neutral-800 px-16 py-9 radius-4 text-base d-flex align-items-center gap-2">
                            Dark
                            <span class="badge bg-white text-dark radius-5 text-xs">4</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-primary-600  text-white">1</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-lilac-600  text-white">2</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-success-600  text-white">3</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-warning-600  text-white">4</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-danger-600  text-white">5</span>

                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-primary-600 bg-primary-50 radius-4 text-white">1</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-lilac-600 bg-lilac-100 radius-4 text-white">2</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-success-600 bg-success-100 radius-4 text-white">3</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-warning-600 bg-warning-100 radius-4 text-white">4</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-danger-600 bg-danger-100 radius-4 text-white">5</span>

                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-primary-600 text-primary-600 radius-4 text-white">1</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-lilac-600 text-lilac-600 radius-4 text-white">2</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-success-600 text-success-600 radius-4 text-white">3</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-warning-600 text-warning-600 radius-4 text-white">4</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-danger-600 text-danger-600 radius-4 text-white">5</span>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-primary-600  text-white">1</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-lilac-600  text-white">2</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-success-600  text-white">3</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-warning-600  text-white">4</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-danger-600  text-white">5</span>

                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-primary-600 bg-primary-50 radius-4 text-white">1</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-lilac-600 bg-lilac-100 radius-4 text-white">2</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-success-600 bg-success-100 radius-4 text-white">3</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-warning-600 bg-warning-100 radius-4 text-white">4</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-danger-600 bg-danger-100 radius-4 text-white">5</span>

                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-primary-600 text-primary-600 radius-4 text-white">1</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-lilac-600 text-lilac-600 radius-4 text-white">2</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-success-600 text-success-600 radius-4 text-white">3</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-warning-600 text-warning-600 radius-4 text-white">4</span>
                        <span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-danger-600 text-danger-600 radius-4 text-white">5</span>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-4">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <button type="button" class="btn btn-primary-600 position-relative px-20 py-8 text-sm line-height-1 d-flex align-items-center">
                                Inbox
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary-600 border border-white">2</span>
                            </button>
                        </div>
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <button type="button" class="btn btn-warning-600 position-relative px-20 py-8 text-sm line-height-1 d-flex align-items-center">
                                Inbox
                                <span class="position-absolute top-0 end-0 translate-middle-y badge rounded-pill bg-danger-600">99+</span>
                            </button>
                        </div>

                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <button type="button" class="position-relative">
                                <img src="{{ asset('assets/images/lang-flag.png') }}" alt="image" class="w-32-px h-32-px object-fit-cover rounded-circle">
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger-600 border border-white">2</span>
                            </button>
                        </div>

                        <button class="position-relative rounded-circle d-flex justify-content-center align-items-center" type="button">
                            <iconify-icon icon="mage:email" class="text-primary-light text-2xxl"></iconify-icon>
                            <span class="position-absolute top-0 start-50 translate-middle-y badge rounded-pill bg-danger-600 border-0">2</span>
                        </button>

                        <button class="position-relative rounded-circle d-flex justify-content-center align-items-center" type="button">
                            <iconify-icon icon="iconoir:bell" class="text-primary-light text-2xxl"></iconify-icon>
                            <span class="position-absolute top-0 start-50 translate-middle-y badge rounded-pill bg-danger-600 border-0">2</span>
                        </button>
                        <button class="position-relative rounded-circle d-flex justify-content-center align-items-center" type="button">
                            <iconify-icon icon="iconoir:bell" class="text-primary-light text-2xxl"></iconify-icon>
                            <span class="position-absolute top-0 start-50 translate-middle-y rounded-pill bg-danger-600 border-0 w-8-px h-8-px"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Badge Dots Style </h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-4">
                        <div class="d-flex align-items-center gap-2">
                            <span class="w-8-px h-8-px bg-primary-600 rounded-circle"></span>
                            <span class="text-primary-600 fw-medium">Primary</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="w-8-px h-8-px bg-lilac-600 rounded-circle"></span>
                            <span class="text-lilac-600 fw-medium">Secondary</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="w-8-px h-8-px bg-success-600 rounded-circle"></span>
                            <span class="text-success-600 fw-medium">Success</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="w-8-px h-8-px bg-info-600 rounded-circle"></span>
                            <span class="text-info-600 fw-medium">Info</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="w-8-px h-8-px bg-warning-600 rounded-circle"></span>
                            <span class="text-warning-600 fw-medium">Warning</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="w-8-px h-8-px bg-danger-600 rounded-circle"></span>
                            <span class="text-danger-600 fw-medium">Danger</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection