<x-jetstream.form-section submit="updateProfilePhone">
    <x-slot name="title">
        {{ __('Mobile phone number') }}
    </x-slot>

    <x-slot name="description">
        @if (getActiveProfileType() != 'Admin')
            @if (getActiveProfileType() == 'User')
                {{ __('Your mobile phone can be used to authorize lost access to your account.') }}
                 {{ trans_with_platform('Choose if @PLATFORM_NAME@ users can also see this phone number. Otherwise your number will be kept private.') }}
            @else
                {{ __('A mobile phone number can be used to authorize lost access to your account.') }}
                 {{ trans_with_platform('Choose if @PLATFORM_NAME@ users can also see this phone number. Otherwise your number will be kept private.') }}
            @endif
        @else
            {{ __('A mobile phone number can be used to authorize lost access to your account.') }}
        @endif
    </x-slot>

    <x-slot name="form">

        <!-- Phone -->
        <div class="col-span-6  -mb-6">
        <x-jetstream.label for="phone" value="{{ __('Mobile phone') }}" />
        </div>
            <div class="">
                <x-native-select
                    id="phonecode"
                    wire:model="phonecode"
                    :options="$phoneCodeOptions"
                    option-value="code"
                    option-label="label"
                    class="w-6 placeholder-gray-300"
                    >
                </x-native-select>
            </div>
            <div class="col-span-2 -ml-3">
                <x-input
                    id="phone"
                    placeholder="{{ __('Mobile phone number') }}"
                    wire:model="state.phone"
                    class="placeholder-gray-300"/>
            </div>

        @if (getActiveProfileType() != 'Admin')
            @if (isset($state['phone_public']))
                <div class="col-span-6 ">
                    <x-checkbox id="public-phone" label="{{ trans_with_platform('Visible for registered @PLATFORM_NAME@ users') }}" wire:model.live="state.phone_public"/>
                </div>
            @endif
        @endif
    </x-slot>

    @error('state.phone')
        <p class="col-span-6 -mt-6 text-sm text-red-500">{{$message}}</p>
    @enderror



    <x-slot name="actions">
        <x-jetstream.action-message class="mr-3" on="saved">
            {{ __('Saved') }}
        </x-jetstream.action-message>

        <x-jetstream.button wire:loading.attr="disabled">
            {{ __('Save') }}
        </x-jetstream.button>
    </x-slot>
</x-jetstream.form-section>
