@props([
  'mePerson',
  'people' => collect(),
  'name' => 'member_ids[]',
  'title' => null,
  'description' => null,
])

@php
  $others = collect($people)->where('id', '!=', $mePerson->id);
@endphp

<div>
  @if ($title)
    <p class="section-header mb-2.5 px-1">{{ $title }}</p>
  @endif
  @if ($description)
    <p class="text-[13px] text-muted-foreground px-1 mb-3">{{ $description }}</p>
  @endif

  <div class="space-y-2">
    <div class="apple-card px-4 py-3 flex items-center gap-3 opacity-80">
      <span class="text-xl">{{ $mePerson->avatar }}</span>
      <span class="font-medium text-[15px] text-foreground">{{ $mePerson->name }}</span>
      <span class="ml-auto rounded-full bg-secondary px-2.5 py-1 text-[11px] font-semibold text-muted-foreground">{{ __('You') }}</span>
    </div>

    @foreach ($others as $person)
      <label
        class="w-full apple-card px-4 py-3 flex items-center gap-3 text-left transition-colors cursor-pointer select-none"
        data-member-row
        tabindex="0"
        role="checkbox"
        aria-checked="false"
      >
        <input type="checkbox" name="{{ $name }}" value="{{ $person->id }}" class="sr-only" data-member />
        <span class="text-xl">{{ $person->avatar }}</span>
        <span class="min-w-0 flex-1">
          <span class="block font-medium text-[15px] text-foreground truncate">{{ $person->name }}</span>
          @if ($person->email)
            <span class="block text-[12px] text-muted-foreground truncate">{{ $person->email }}</span>
          @endif
        </span>
        <span
          class="ml-auto shrink-0 rounded-full bg-secondary px-2.5 py-1 text-[12px] font-medium text-muted-foreground transition-colors"
          data-member-hint
          data-idle-label="{{ __('Tap to add') }}"
          data-added-label="{{ __('Added') }}"
        >{{ __('Tap to add') }}</span>
      </label>
    @endforeach
  </div>
</div>