@extends('layouts.admin.app')

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

@section('content')
<x-layouts.admin.component-demo :title="__('pages/admin/components.nav.tooltips')">
    <x-utility.card :title="__('pages/admin/components.tooltips.positions')">
        <div class="flex flex-wrap items-center justify-center gap-8 py-8">
            <x-utility.tooltip :text="__('pages/admin/components.tooltips.text.top')" position="top">
                <x-buttons.secondary>{{ __('ui.position.top') }}</x-buttons.secondary>
            </x-utility.tooltip>

            <x-utility.tooltip :text="__('pages/admin/components.tooltips.text.bottom')" position="bottom">
                <x-buttons.secondary>{{ __('ui.position.bottom') }}</x-buttons.secondary>
            </x-utility.tooltip>

            <x-utility.tooltip :text="__('pages/admin/components.tooltips.text.left')" position="left">
                <x-buttons.secondary>{{ __('ui.position.left') }}</x-buttons.secondary>
            </x-utility.tooltip>

            <x-utility.tooltip :text="__('pages/admin/components.tooltips.text.right')" position="right">
                <x-buttons.secondary>{{ __('ui.position.right') }}</x-buttons.secondary>
            </x-utility.tooltip>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.tooltips.on_icon_button')">
        <div class="flex items-center gap-4">
            <x-utility.tooltip :text="__('pages/admin/components.tooltips.text.edit_record')" position="top">
                <x-buttons.icon variant="ghost" :title="__('buttons.edit')">
                    <x-heroicon-o-pencil class="h-5 w-5" />
                </x-buttons.icon>
            </x-utility.tooltip>

            <x-utility.tooltip :text="__('pages/admin/components.tooltips.text.delete_record')" position="top">
                <x-buttons.icon variant="ghost" :title="__('buttons.delete')">
                    <x-heroicon-o-trash class="h-5 w-5 text-destructive" />
                </x-buttons.icon>
            </x-utility.tooltip>

            <x-utility.tooltip :text="__('pages/admin/components.tooltips.text.download_pdf')" position="top">
                <x-buttons.icon variant="ghost" :title="__('pages/admin/components.tooltips.text.download')">
                    <x-heroicon-o-arrow-down-tray class="h-5 w-5" />
                </x-buttons.icon>
            </x-utility.tooltip>
        </div>
    </x-utility.card>
</x-layouts.admin.component-demo>
@endsection