{{ define "user/settings/fragments/emailListing" }}
  {{ $root := index . 0 }}
  {{ $email := index . 1 }}
  <div id="email-{{$email.Address}}" class="flex items-center justify-between p-2">
    <div class="hover:no-underline flex flex-col gap-1 min-w-0 max-w-[80%]">
      <div class="flex items-center gap-2">
        {{ i "mail" "w-4 h-4 text-gray-500 dark:text-gray-400" }}
        <span class="font-bold">
          {{ $email.Address }}
        </span>
        <div class="inline-flex items-center gap-1">
          {{ if $email.Verified }}
          <span class="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded">verified</span>
          {{ else }}
          <span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">unverified</span>
          {{ end }}
          {{ if $email.Primary }}
          <span class="text-xs bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded">primary</span>
          {{ end }}
        </div>
      </div>
      <div class="flex text-sm flex-wrap text items-center gap-1 text-gray-500 dark:text-gray-400">
        <span>added {{ template "repo/fragments/time" $email.CreatedAt }}</span>
      </div>
    </div>
    <div class="flex gap-2 items-center">
      {{ if not $email.Verified }}
      <button
        class="btn flex gap-2 text-sm px-2 py-1"
        hx-post="/settings/emails/verify/resend"
        hx-swap="none"
        hx-vals='{"email": "{{ $email.Address }}"}'>
        {{ i "rotate-cw" "w-4 h-4" }}
        <span class="hidden md:inline">resend</span>
      </button>
      {{ end }}
      {{ if and (not $email.Primary) $email.Verified }}
      <button
        class="btn text-sm px-2 py-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
        hx-post="/settings/emails/primary"
        hx-swap="none"
        hx-vals='{"email": "{{ $email.Address }}"}'>
        set as primary
      </button>
      {{ end }}
      {{ if not $email.Primary }}
      <button
        class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
        title="Delete email"
        hx-delete="/settings/emails"
        hx-swap="none"
        hx-vals='{"email": "{{ $email.Address }}"}'
        hx-confirm="Are you sure you want to delete the email {{ $email.Address }}?"
      >
        {{ i "trash-2" "w-5 h-5" }}
        <span class="hidden md:inline">delete</span>
        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
      </button>
      {{ end }}
    </div>
  </div>
{{ end }}