<% @page_title = "Change your email" %>

<% content_for :header do %>
  <div class="header__title">
    <%= link_to edit_user_path(@membership.user, script_name: "/#{@membership.tenant}"), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
      <span class="overflow-ellipsis">&larr; <strong>My profile</strong></span>
    <% end %>
  </div>
<% end %>

<div class="panel shadow center flex flex-column gap" style="--panel-size: 45ch;">
  <header>
    <h1 class="txt-x-large font-weight-black margin-none">
      <%= @page_title %>
    </h1>
    <p class="margin-none">Enter your new email address. We'll send you a confirmation to verify it.</p>
  </header>

  <%= form_with url: email_addresses_path(membership_id: @membership.id), method: :post, class: "flex flex-column gap", data: { controller: "form", turbo: false } do |form| %>
    <div class="flex align-center gap">
      <label class="flex align-center gap input input--actor">
        <%= form.email_field :email_address, class: "input full-width", autocomplete: "email", placeholder: "New email address", autofocus: true, required: true %>
      </label>
    </div>

    <button type="submit" class="btn btn--reversed center" data-form-target="submit">
      <span>Next</span>
      <%= icon_tag "arrow-right" %>
    </button>
  <% end %>
</div>
