@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\SharedList $list */
  @endphp

  <div class="min-h-screen safe-bottom animate-in-up">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-6 md:pb-8 space-y-5">
      <x-page-header title="{{ __('Members') }}" back />

      <section>
        <p class="section-header mb-3 px-1">{{ __('On this list') }}</p>
        <div class="flex gap-4 overflow-x-auto pb-1 px-1">
          @foreach ($list->members as $m)
            <div class="flex flex-col items-center gap-1.5 min-w-[52px]">
              <div class="w-12 h-12 rounded-full bg-secondary flex items-center justify-center text-xl">
                {{ $m->avatar }}
              </div>
              <span class="text-[12px] font-medium text-foreground">{{ $m->name }}</span>
            </div>
          @endforeach
        </div>
      </section>

      <section class="space-y-3">
        <p class="section-header mb-1 px-1">{{ __('Add someone') }}</p>

        <div class="apple-card p-5 space-y-4">
          <form method="POST" action="{{ route('app.shared-lists.members.add', ['id' => $list->id]) }}" class="space-y-4">
            @csrf

            <div>
              <p class="text-[12px] text-muted-foreground mb-2 px-0.5">{{ __('Choose an existing person') }}</p>
              <select
                name="person_id"
                class="w-full apple-card-inset px-4 py-3.5 rounded-2xl text-[15px] text-foreground bg-transparent outline-none focus:ring-2 focus:ring-primary/15"
              >
                <option value="">{{ __('Select') }}</option>
                @foreach ($notInList as $p)
                  <option value="{{ $p->id }}">{{ $p->avatar }} {{ $p->name }}</option>
                @endforeach
              </select>
            </div>

            <div class="flex items-center gap-3">
              <div class="h-px bg-border flex-1"></div>
              <span class="text-[12px] text-muted-foreground">or</span>
              <div class="h-px bg-border flex-1"></div>
            </div>

            <div>
              <p class="text-[12px] text-muted-foreground mb-2 px-0.5">{{ __('Invite by email') }}</p>
              <input
                type="email"
                name="invite_email"
                placeholder="{{ __('name@email.com') }}"
                class="w-full apple-card-inset px-4 py-3.5 rounded-2xl text-[15px] text-foreground outline-none focus:ring-2 focus:ring-primary/15"
              />
            </div>

            <x-emoji-picker name="invite_avatar" label="{{ __('Their avatar (optional)') }}" value="🙂" :required="false" />

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