@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Profile $profile */
  @endphp

  <div class="min-h-screen safe-bottom bg-background animate-sheet-up">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-10 md:pb-10 space-y-7">
      <x-sheet-handle />

      <x-page-header title="{{ __('Edit profile') }}" back />

      <div class="apple-card p-5 space-y-4">
        <form method="POST" action="{{ route('app.account.profile.update') }}" class="space-y-4">
          @csrf

          <div>
            <p class="text-[12px] mb-2 px-0.5 text-muted-foreground">{{ __('Display name') }}</p>
            <input
              type="text"
              name="display_name"
              value="{{ old('display_name', $profile->display_name) }}"
              placeholder="{{ __('Your name') }}"
              class="w-full apple-card-inset px-4 py-3.5 text-[15px] text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
              required
              autofocus
            />
            @error('display_name')
              <p class="mt-2 text-[12px] text-destructive">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <x-emoji-picker name="avatar" label="{{ __('Avatar') }}" :value="$profile->avatar" />
            @error('avatar')
              <p class="mt-2 text-[12px] text-destructive">{{ $message }}</p>
            @enderror
          </div>

          <x-primary-button variant="sheet">{{ __('Save') }}</x-primary-button>
        </form>
      </div>
    </div>
  </div>
@endsection