<div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
  <%= render 'shared/settings_nav' %>
  <div class="flex-grow max-w-xl mx-auto">
    <h1 class="text-4xl font-bold mb-4">
      <%= t('profile') %>
    </h1>
    <%= form_for current_user, url: update_contact_settings_profile_index_path, method: :patch, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
      <div class="grid md:grid-cols-2 gap-4">
        <div class="form-control">
          <%= f.label :first_name, t('first_name'), class: 'label' %>
          <%= f.text_field :first_name, required: true, class: 'base-input', dir: 'auto' %>
        </div>
        <div class="form-control">
          <%= f.label :last_name, t('last_name'), class: 'label' %>
          <%= f.text_field :last_name, required: false, class: 'base-input', dir: 'auto' %>
        </div>
      </div>
      <div class="form-control">
        <%= f.label :email, t('email'), class: 'label' %>
        <%= f.email_field :email, autocomplete: 'off', class: 'base-input' %>
        <% if current_user.try(:pending_reconfirmation?) %>
          <label class="label">
            <span class="label-text-alt"><%= t('email_address_is_awaiting_confirmation_follow_the_link_in_the_email_to_confirm', email: f.object.unconfirmed_email) %></span>
          </label>
        <% end %>
      </div>
      <div class="form-control pt-2">
        <%= f.button button_title(title: t('update'), disabled_with: t('updating')), class: 'base-button' %>
      </div>
    <% end %>
    <%= render 'email_configs' %>
    <p class="text-2xl font-bold mt-8 mb-4">
      <%= t('signature') %>
    </p>
    <% signature = UserConfigs.load_signature(current_user) %>
    <% if signature %>
      <div class="flex justify-center mb-4 relative">
        <%= button_to button_title(title: t('remove'), disabled_with: t('removing')), user_signature_path, method: :delete, class: 'right-0 top-0 absolute link' %>
        <img src="<%= signature.url(time: ActiveStorage::Attachment.service_url_time) %>" style="height: 130px; width: 100%; object-fit: contain;">
      </div>
    <% end %>
    <a href="<%= edit_user_signature_path %>" data-turbo-frame="modal" class="base-button w-full">
      <%= t('update_signature') %>
    </a>
    <p class="text-2xl font-bold mt-8 mb-4">
      <%= t('initials') %>
    </p>
    <% initials = UserConfigs.load_initials(current_user) %>
    <% if initials %>
      <div class="flex justify-center mb-4 relative">
        <%= button_to button_title(title: t('remove'), disabled_with: t('removing')), user_initials_path, method: :delete, class: 'right-0 top-0 absolute link' %>
        <img src="<%= initials.url(time: ActiveStorage::Attachment.service_url_time) %>" style="height: 130px; width: 100%; object-fit: contain;">
      </div>
    <% end %>
    <a href="<%= edit_user_initials_path %>" data-turbo-frame="modal" class="base-button w-full">
      <%= t('update_initials') %>
    </a>
    <% if true_user == current_user && !current_account.testing? %>
      <p class="text-2xl font-bold mt-8 mb-4">
        <%= t('change_password') %>
      </p>
      <%= form_for current_user, url: update_password_settings_profile_index_path, method: :patch, html: { autocomplete: 'off' } do |f| %>
        <%= f.label :password, t('new_password'), class: 'label' %>
        <%= f.password_field :password, autocomplete: 'off', class: 'base-input peer w-full', required: true %>
        <div class="<%= 'peer-invalid:hidden' if current_user.errors.blank? %> space-y-4 mt-4">
          <div class="form-control">
            <%= f.label :password_confirmation, t('confirm_password'), class: 'label' %>
            <%= f.password_field :password_confirmation, autocomplete: 'off', class: 'base-input' %>
          </div>
          <div class="form-control">
            <%= f.label :current_password, t('current_password'), class: 'label' %>
            <%= f.password_field :current_password, autocomplete: 'current-password', class: 'base-input' %>
            <% if Accounts.can_send_emails?(current_account) %>
              <span class="label-text-alt mt-1">
                <%= t('dont_remember_your_current_password_click_here_to_reset_it_html') %>
              </span>
            <% end %>
          </div>
          <div class="form-control">
            <%= f.button button_title(title: t('update'), disabled_with: t('updating')), class: 'base-button' %>
          </div>
        </div>
      <% end %>
      <%= button_to nil, user_send_reset_password_path(current_user), id: 'resend_password_button', method: :put, class: 'hidden', data: { turbo_confirm: t('are_you_sure_') } %>
      <p class="text-2xl font-bold mt-8 mb-4">
        <%= t('two_factor_authentication') %>
      </p>
      <div class="space-y-4">
        <% if current_user.otp_required_for_login %>
          <p class="flex items-center space-x-1">
            <%= svg_icon('circle_check', class: 'stroke-success inline flex-none w-5 h-5') %>
            <span>
              <%= t('2fa_has_been_configured') %>
            </span>
          </p>
          <a href="<%= edit_mfa_setup_path %>" data-turbo-frame="modal" class="white-button w-full !px-8">🔓 <%= t('remove_2fa') %></a>
        <% else %>
          <p class="flex items-center space-x-1">
            <%= svg_icon('info_circle', class: 'stroke-warning inline flex-none w-5 h-5') %>
            <span>
              <%= t('2fa_is_not_configured') %>
            </span>
          </p>
          <a href="<%= new_mfa_setup_path %>" data-turbo-frame="modal" class="base-button w-full !px-8">🔒 <%= t('set_up_2fa') %></a>
        <% end %>
      </div>
    <% end %>
  </div>
  <div class="w-0 md:w-52"></div>
</div>
