<% @page_title = "Add people" %>

<% content_for :header do %>
  <%= render "my/menus/menu" %>
  <div class="header__actions header__actions--start">
    <%= link_to account_settings_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
      <span class="overflow-ellipsis">&larr; <strong>Account Settings</strong></span>
    <% end %>
  </div>
<% end %>

<div class="panel shadow center flex flex-column gap" style="view-transition-name: <%= dom_id(@join_code) %>">
  <header>
    <h2 class="txt-large margin-none font-weight-black"><%= @page_title %></h2>
    <p class="txt-medium margin-none">Share the link below to invite people to this account</p>
  </header>

  <% url = join_url(code: @join_code.code, tenant: @join_code.tenant, script_name: nil) %>
  <div class="flex align-center gap-half">
    <input type="text" class="input flex-item-grow" value="<%= url %>" readonly>
    <%= button_to account_join_code_path, method: :delete, class: "btn btn--circle txt-small",
          data: { turbo_confirm: "Are you sure you want to generate a new link? The previous code will stop working." } do %>
      <%= icon_tag "refresh" %>
      <span class="for-screen-reader">Generate a new code</span>
    <% end %>
  </div>

  <div class="center flex align-center gap">
    <%= tag.button class: "btn btn--link", data: {
        controller: "copy-to-clipboard", action: "copy-to-clipboard#copy",
        copy_to_clipboard_success_class: "btn--success", copy_to_clipboard_content_value: url } do %>

      <%= icon_tag "copy-paste" %>
      <span class="txt-nowrap">Copy invite link</span>
    <% end %>

    <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
      <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
        <%= icon_tag "qr-code" %>
        <span>Get QR code</span>
      <% end %>

      <dialog class="dialog panel shadow" data-dialog-target="dialog">
        <p class="margin-none-block-start"><strong>Scan this code with the camera on your mobile device</strong></p>

        <%= qr_code_image(url) %>

        <form method="dialog" class="margin-block-start flex justify-center">
          <button class="btn">
            <span>Done</span>
          </button>
        </form>
      </dialog>
    </div>
  </div>

  <footer class="txt-small">
    <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">

    <p class="margin-none <%= "txt-negative" if !@join_code.active? %>">
      This code has been used <%= @join_code.usage_count %>/<%= @join_code.usage_limit %> times
      (<%= @join_code.active? ? @join_code.usage_limit - @join_code.usage_count : "none" %> remaining)
      <%= link_to edit_account_join_code_path, class: @join_code.active? ? "txt-link" : "txt-negative txt-underline" do %>
        <span>Change limit</span>
      <% end %>
    </p>
  </footer>
</div>
