<%= tag.section data: {
      controller: "settings--account--email",
      "settings--account--email-validation-failed-value": @validation_errors.present?
    } do %>
  <h3>E-Mail</h3>
  <%= form_for(@user, url: update_email_settings_path, method: "post") do |f| %>
    <%= hidden_field_tag :section, "account" %>
    <p class="mb-2">
      <%= f.label :email, 'Address', class: 'font-bold' %>
    </p>
    <p class="mb-2 flex gap-1 sm:w-3/5">
      <%= f.email_field :email, class: "grow", data: {
            'settings--account--email-target': 'emailField'
          }, required: true %>
      <button type="button" id="edit-email"
              class="btn-md btn-icon btn-outline shrink-0 hidden initial-visible"
              data-settings--account--email-target="editEmailButton"
              data-action="settings--account--email#editEmail"
              title="Edit email address">
        <span class="">
          <%= render partial: "icons/edit-3", locals: {
                custom_class: "text-blue-600 h-4 w-4 inline" } %>
        </span>
      </button>
    </p>
    <% if @validation_errors.present? && @validation_errors[:email].present? %>
      <p class="error-msg"><%= @validation_errors[:email].first %></p>
    <% end %>
    <div class="initial-hidden">
      <p class="mt-4 mb-2">
        <%= f.label :current_password, 'Current password', class: 'font-bold' %>
      </p>
      <p class="sm:w-3/5">
        <%= f.password_field :current_password, class: "w-full", required: true %>
      </p>
      <p class="mt-6">
        <%= f.submit "Update", class: "btn-md btn-blue w-full md:w-auto" %>
      </p>
    </div>
  <% end %>
<% end %>
<section>
  <h3>Password</h3>
  <p class="mb-8">Use the following button to request an email with a password reset link:</p>
  <%= form_with(url: reset_password_settings_path, method: :post) do %>
    <p>
      <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray w-full sm:w-auto') %>
    </p>
  <% end %>
</section>
