@php use Illuminate\Support\Facades\Auth; @endphp

<x-layout.app page_title="User Profile">
    <x-layout.page-section-container>
        <x-layout.page-section first>
            <x-slot:section_name>User Information</x-slot:section_name>
            <x-slot:section_description>
                <p class="mb-6">Use a permanent address where you receive mail</p>
                <p>Changing your email address will require verification</p>
            </x-slot:section_description>
            <x-form.form method="PUT" action="user/profile-information" class="mt-4 mb-5">
                <x-form.body-grid columns="6" class="!max-w-full">
                    <x-form.field name="first_name" label_text="First Name" value="{{ Auth::user()->first_name }}" colspan="3" required />
                    <x-form.field name="last_name" label_text="Last Name" value="{{ Auth::user()->last_name }}" colspan="3" required />
                    <x-form.field name="email" label_text="Email" type="email" value="{{ Auth::user()->email }}" colspan="3" required />
                    <x-form.field name="cell_phone" label_text="Cell Phone" type="text" value="{{ Auth::user()->cell_phone }}" colspan="3" required />
                    <x-form.field name="judging_preference" label_text="Judging Preference" type="text" value="{{ Auth::user()->judging_preference }}" colspan="6" required />
                </x-form.body-grid>
                <x-form.footer submit-button-text="Update Profile"/>
            </x-form.form>
        </x-layout.page-section>

        <x-layout.page-section>
            <x-slot:section_name>Change Password</x-slot:section_name>
            <x-form.form method="PUT" action="user/password" class="mt-4 mb-5">
                <x-form.body-grid columns="12" class="!max-w-full">
                    <x-form.field colspan="4" name="current_password" type="password" label_text="Current Password" requried />
                    <x-form.field colspan="4" name="password" type="password" label_text="New Password" requried />
                    <x-form.field colspan="4" name="password_confirmation" type="password" label_text="Conform New Password" requried />
                </x-form.body-grid>
                <x-form.footer submit-button-text="Change Password" />
            </x-form.form>
        </x-layout.page-section>
    </x-layout.page-section-container>
</x-layout.app>