@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp

@extends('layout.index')
@section('title', setting('site.title') . ' | Panel | ' . auth()->user()->name)

@section('content')

    <x-customers::panel>
        <div class="px-2 grid grid-cols-12">

            <div class="col-span-10 col-start-2">

                <div class="h-8"></div>

                <h1 class="text-[#f39b00] font-bold text-2xl text-center">{{ auth()->user()->name }}</h1>
                <h1 class="text-black font-bold text-2xl text-center">{{ auth()->user()->email }}</h1>


                <h1 class="text-lg font-semibold py-8 text-[#545454] text-center">
                    {{ __('Elige una de las siguientes opciones') }}:
                </h1>

                <section class="container md:grid grid-cols-6 px-4 md:p-0">


                    <div
                        class="md:col-span-4 md:col-start-2
            grid grid-cols-2 md:grid-cols-3 gap-4
        [&>a]:bg-gradient-to-t [&>a]:from-primario [&>a]:to-[#e53e2fb5]
        [&>a]:text-white [&>a]:flex [&>a]:flex-col [&>a]:items-center [&>a]:justify-center
        [&>a]:aspect-square
        [&_span]:text-center [&_span]:lg:text-xl [&_span]:xl:text-2xl [&_svg]:h-[100px]">

                        <a href="{{ route('customers.panel.profile') }}">
                            <x-svg.profile class="max-h-[80px] lg:max-h-max" />
                            <span>Perfil</span>
                        </a>

                        <a href="{{ route('customers.panel.addresses') }}">
                            <x-heroicon-s-home class="max-h-[80px] lg:max-h-max" />
                            <span>Direcciones</span>
                        </a>

                        <a href="{{ route('customers.panel.orders') }}">
                            <x-svg.cart class="max-h-[80px] lg:max-h-max" />
                            <span>Pedidos</span>
                        </a>

                        <x-form.logout action="{{ route('logout') }}"
                            class="w-full bg-gradient-to-t from-primario to-[#e53e2fb5] text-white flex flex-col items-center justify-center aspect-square">
                            <x-vaadin-exit-o class="max-h-[80px] lg:max-h-max" />
                            <span>
                                Cerrar Sesión
                            </span>
                        </x-form.logout>

                    </div>
                </section>
                <div class="h-10"></div>
            </div>

        </div>

    </x-customers::panel>
@endsection