<%
  header_title t(".title")
  header_description t(".description")
%>

<% content_for :sidebar do %>
  <%= render "settings/settings_nav" %>
<% end %>

<div class="space-y-4">
  <h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
  <%= settings_section title: t(".scan_title"), subtitle: t(".scan_description") do %>
    <div class="space-y-6">
      <div class="qrcode">
        <%= generate_mfa_qr_code(Current.user.provisioning_uri) %>
      </div>

      <div class="mt-6">
        <h3 class="text-sm font-medium text-primary"><%= t(".secret_title") %></h3>
        <div class="mt-2 text-sm text-secondary">
          <p><%= t(".secret_description") %></p>
        </div>
        <div class="mt-2 flex items-center gap-2" data-controller="clipboard">
          <span data-clipboard-target="source" class="hidden"><%= Current.user.otp_secret %></span>
          <input type="text"
                 readonly
                 autocomplete="off"
                 value="<%= Current.user.otp_secret %>"
                 class="text-sm bg-container px-2 py-1 rounded border border-secondary w-96 font-mono">
          <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
            <span data-clipboard-target="iconDefault">
              <%= icon "copy" %>
            </span>
            <span class="hidden" data-clipboard-target="iconSuccess">
              <%= icon "check" %>
            </span>
          </button>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-medium leading-6 text-primary"><%= t(".verify_title") %></h3>
        <div class="mt-2 text-sm text-secondary">
          <p><%= t(".verify_description") %></p>
        </div>
      </div>

      <%= styled_form_with url: mfa_path, method: :post, class: "mt-5", data: { turbo: false } do |f| %>
        <div>
          <%= f.text_field :code,
            required: true,
            autofocus: true,
            autocomplete: "one-time-code",
            inputmode: "numeric",
            pattern: "[0-9]*",
            label: t(".code_label"),
            placeholder: t(".code_placeholder") %>

          <div class="flex justify-end mt-4">
            <%= f.submit t(".verify_button") %>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>

  <%= settings_nav_footer %>
</div>
