<%= render HeaderCompactComponent.new(title: "New E-Mail Password") %>

<%= render MainCompactComponent.new do %>
  <section data-controller="modal" data-action="keydown.esc->modal#close">
    <p class="font-bold">
      Your email password has been updated.
    </p>
    <p class="mb-8">
      Please store the new one in a password manager or write it down somewhere:
    </p>
    <p data-controller="clipboard" class="flex gap-1 w-full mb-10">
      <%= label_tag :new_password, 'New password', class: 'hidden' %>
      <%= text_field_tag :new_password, @new_password, disabled: true, class: 'text-xl grow',
            data: { "clipboard-target": "source"} %>
      <button id="copy-new-password" class="btn-md btn-icon btn-outline shrink-0"
              data-clipboard-target="trigger" data-action="clipboard#copy"
              title="Copy to clipboard">
        <span class="content-initial">
          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
        </span>
        <span class="content-active hidden">
          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
        </span>
      </button>
      <button class="btn-md btn-icon btn-outline shrink-0 w-auto"
              data-action="click->modal#open" title="Show QR code">
          <%= render partial: "icons/qr_code", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
      </button>
    </p>
    <p class="mb-0">
      <%= link_to "Done", services_email_path, class: "btn-md btn-blue w-full" %>
    </p>
    <%= render QrCodeModalComponent.new(qr_content: @new_password) %>
  </section>
<% end %>
