<div class="flex flex-column align-center fill-shade pad border-radius gap">
  <% url = join_url(Account.sole.join_code) %>

  <label class="flex flex-column gap full-width txt-align-center">
    <strong id="invite_label" class="invite-label">Share to invite more people</strong>
    <span class="flex align-center gap margin-inline">
      <input type="text" class="input fill-white" value="<%= url %>" aria-labelledby="invite_label" readonly>
    </span>
  </label>

  <div class="flex align-center gap">
    <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 class="for-screen-reader">Show join link QR code</span>
      <% end %>

      <dialog class="dialog panel shadow" data-dialog-target="dialog">
        <%= image_tag account_join_code_path, class: "qr-code center", alt: "QR Code", loading: "lazy" %>

        <form method="dialog" class="margin-block-start flex justify-center">
          <button class="btn">
            <%= icon_tag "remove" %>
            <span class="for-screen-reader">Close</span>
          </button>
        </form>
      </dialog>
    </div>

    <%= button_to_copy_to_clipboard(url) do %>
      <%= icon_tag "copy-paste" %>
      <span class="for-screen-reader">Copy join link</span>
    <% end %>

    <%= button_to account_join_code_path, method: :put, class: "btn btn--regenerate" do %>
      <%= icon_tag "refresh" %>
      <span class="for-screen-reader">Regenerate join link</span>
    <% end %>
  </div>
</div>
