@php
    $svg1 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="fill-current w-8 h-8  ">
  <path fill-rule="evenodd" d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd"></path>
</svg>';
    $svg2 = '
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="fill-current w-8 h-8  ">
  <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z" clip-rule="evenodd"></path>
</svg>
    ';
    $svg3 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="fill-current w-6 h-6  ">
  <path d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"></path>
</svg>';
@endphp

<x-moonshine.tabs :tabs="[
    'general' => ['icon' => $svg1, 'label' => __('panel/includes/nav.profile.0')],
    'password' => ['icon' => $svg2, 'label' => __('panel/includes/nav.profile.1')],
    ... (config('tg-logger_copy.auth') ? ['auth' => ['icon' => $svg3, 'label' => __('panel/general/telegram-auth.main.12')]] : [])
]">

    @slot('general')
        <x-moonshine::form enctype="multipart/form-data" action="{{ route('user-profile-information.update') }}">
            <x-moonshine::form.input name="_method" value="PUT" type="hidden"/>
            <x-moonshine::form.input-wrapper>
                <x-moonshine::divider label="{{ __('panel/includes/nav.profile.6') }}" style="margin: 5px 0;"/>
                <x-moonshine::form.input name="name"
                                         value="{{ $user->name }}" readonly=""/>
                <x-moonshine::divider label="{{ __('panel/includes/nav.profile.7') }}" style="margin: 5px 0;"/>
                {!! \MoonShine\Fields\Image::make(__('panel/includes/nav.profile.7'),'image')->required()
                                    ->onAfterApply(fn ($image) => $image->image ? image()->createWebp($image->image, $image, 'assets/panel/images/avatars/') : '')
                                    ->disk('public')
                                    ->dir('assets/panel/images/avatars/')
                                    ->removable()->nullable() !!}
            </x-moonshine::form.input-wrapper>
            <x-recaptcha.recaptcha class="mt-4"/>
            <x-slot:buttons>
                <x-moonshine::form.button type="submit" class="btn-close w-full">
                    {{ __('panel/includes/nav.profile.2') }}
                </x-moonshine::form.button>
            </x-slot:buttons>
        </x-moonshine::form>
    @endslot
    @slot('password')
        <x-moonshine::form action="{{ route('user-password.update') }}">
            <x-moonshine::form.input name="_method" value="PUT" type="hidden"/>
            <x-moonshine::form.input-wrapper>
                <x-moonshine::divider label="{{ __('panel/includes/nav.profile.3') }}" style="margin: 5px 0;"/>
                {!! \MoonShine\Fields\Text::make('current_password')->eye()->required() !!}
                <x-moonshine::divider label="{{ __('panel/includes/nav.profile.4') }}" style="margin: 5px 0;"/>
                {!! \MoonShine\Fields\Text::make('password')->eye()->required() !!}
                <x-moonshine::divider label="{{ __('panel/includes/nav.profile.5') }}" style="margin: 5px 0;"/>
                {!! \MoonShine\Fields\Text::make('password_confirmation')->eye()->required() !!}
            </x-moonshine::form.input-wrapper>
            <x-recaptcha.recaptcha class="mt-4"/>
            <x-slot:buttons>
                <x-moonshine::form.button type="submit" class="btn-close w-full">
                    {{ __('panel/includes/nav.profile.2') }}
                </x-moonshine::form.button>
            </x-slot:buttons>

        </x-moonshine::form>
    @endslot
    @slot('auth')
        <div>
            <div>
                <p class="text-center">{{ __('panel/general/telegram-auth.main.13') }}</p>
                <span class="text-xs text-gray-400">{{ __('panel/general/telegram-auth.main.14') }}</span>
            </div>
            <hr>
            <div>
                @if(config('tg-logger_copy.auth') && !$user->telegram_id)
                    <div class="flex items-center mb-2 justify-center w-full">
                        <script async src="https://telegram.org/js/telegram-widget.js?22"
                                data-telegram-login="{{ config('tg-logger_copy.bot_name') }}"
                                data-size="medium" data-auth-url="{{ route('telegram.connect') }}"
                                data-request-access="write"></script>
                    </div>
                    {!! \MoonShine\Decorations\Divider::make() !!}

                @else
                    <div class="flex items-center mb-2 justify-center w-full">
                        <p class="font-semibold">{{ __('panel/general/telegram-auth.main.15') }}</p>
                    </div>
                    {!! \MoonShine\Decorations\Divider::make() !!}
                @endif
            </div>
        </div>
    @endslot
</x-moonshine.tabs>