<div data-controller="emails" class="-mt-2">
  <% if !@emails.any? %>
    <div class="card bg-neutral p-4 mt-4 mb-3 flex flex-col gap-2">
      <span class="font-bold flex items-center gap-4">
        <%= lucide_icon("mail-question", class: "stroke-warning") %>
        <%= t(".no_emails", count: @emails.length) %>
      </span>
      <div class="text-sm">
        <%= t(".no_emails_detail") %>
      </div>
    </div>
  <% else %>
    <div class="mt-4 flex flex-col gap-2">
      <span class="font-bold flex items-center gap-4">
        <%= t(".heading_new", count: @emails.length) %>
      </span>
    </div>
  <% end %>
  <% if @emails.any? %>
    <div class="flex flex-col gap-1">
      <% @emails.each do |email| %>
        <div class="divider my-1"></div>
        <div class="flex items-center gap-4">
          <%= lucide_icon(
            email.verified? ? "mail-check" : "mail-question",
            class: email.verified? ? "stroke-success" : "",
          ) %>
          <span class="flex-grow flex flex-col">
            <span class="flex-grow font-mono">
              <%= email.email %>
            </span>
            <span class="text-xs mb-1 flex items-center gap-1">
              <% if email.verified? %>
                <%= t(".email_verified", ago: time_ago_in_words(email.verified_at)) %>
              <% elsif email.taken? %>
                <%= t(".email_taken") %>
              <% elsif email.expired? %>
                <%= t(".expired_verification") %>
                <%= form_with url: emails_path, method: :patch do |form| %>
                  <input type="hidden" name="email[value]" value="<%= email.email %>">
                  <button type="submit" class="underline">
                    <%= t(".resend") %>
                  </button>
                <% end %>
              <% else %>
                <%= t(".pending_verification") %>
              <% end %>
            </span>
          </span>
          <%= form_with url: emails_path, method: :delete, class: 'flex items-center gap-4' do |form| %>
            <input type="hidden" name="email[value]" value="<%= email.email %>">
            <button type="submit">
              <%= lucide_icon("x", class: "stroke-error") %>
            </button>
          <% end %>
        </div>
      <% end %>
    </div>
  <% end %>
  <div class='divider my-2 text-xs'><%= t(".add") %></div>
  <% if flash[:errors]&.any? %>
    <div role="alert" class="alert mb-2">
      <div class="flex items-center gap-4">
        <%= lucide_icon("mail-x", class: "stroke-error") %>
        <span><%= flash[:errors][0] %></span>
      </div>
    </div>
  <% end %>
  <div class=" <%= @emails.empty? ? 'mt-2' : '' %>">
    <%= form_with url: emails_path, method: :post, class: 'pt-2 flex flex-col gap-2', data: { emails_target: 'add' } do |form| %>
      <label class="flex gap-4 items-center input input-bordered">
        <%= lucide_icon("mail-plus") %>
        <input
          type="text"
          data-emails-target="email"
          data-action="emails#updateEmail"
          placeholder="<%= t('.placeholder.email', count: @emails.length) %>"
          name="email[value]"
          class="w-full">
      </label>
      <div class="flex items-center gap-2">
        <label class="flex gap-3 items-center w-full flex-grow input input-bordered" data-controller="password-visibility">
          <%= lucide_icon("shield-check") %>

          <input
            type="password"
            data-emails-target="password"
            data-action="emails#updatePassword"
            data-password-visibility-target="input"
            spellcheck="false"
            placeholder="<%= t('.placeholder.password') %>"
            name="session[password]"
            class="w-full flex-grow">

          <button data-action="password-visibility#toggle" type="button" class="btn btn-sm btn-ghost -mr-2">
            <span data-password-visibility-target="icon"><%= lucide_icon('eye') %></span>
            <span data-password-visibility-target="icon" class="hidden"><%= lucide_icon('eye-off') %></span>
          </button>
        </label>
        <%= form.submit t(".submit"),
                    class: "btn btn-info",
                    data: {
                      emails_target: "submit",
                    },
                    disabled: true %>
      </div>
    <% end %>
  </div>
</div>