<%= render HeaderComponent.new(title: "Invitations") %>

<%= render MainSimpleComponent.new do %>
  <section>
    <% if @invitations_unused.any? %>
      <p class="mb-8">
        Invite your friends to a Kosmos account by sharing an invitation URL with them:
      </p>
      <ul class="md:w-3/4">
        <% @invitations_unused.each do |invitation| %>
          <li class="mb-3 flex gap-1"
              data-controller="clipboard modal"
              data-action="keydown.esc->modal#close">
            <input type="text" disabled class="relative grow font-mono"
                   value="<%= invitation_url(invitation.token) %>"
                   data-clipboard-target="source" />
            <button class="btn-md btn-icon btn-outline shrink-0 w-auto"
                    data-clipboard-target="trigger" data-action="clipboard#copy"
                    title="Copy to clipboard">
              <span class="content-initial">
                <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
              </span>
              <span class="content-active hidden">
                <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
              </span>
            </button>
            <button class="btn-md btn-icon btn-outline shrink-0 w-auto"
                    data-action="click->modal#open" title="Show QR code">
                <%= render partial: "icons/qr_code", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
            </button>
            <%= render QrCodeModalComponent.new(qr_content: invitation_url(invitation.token)) %>
          </li>
        <% end %>
      </ul>
    <% else %>
      <div class="text-center">
        <p class="my-12 inline-flex align-center items-center">
          <%= image_tag("/img/illustrations/undraw_loading_re_5axr.svg", class: 'h-48') %>
        </p>
        <h3>
          No invitations available yet
        </h3>
        <p class="text-gray-500">
          We will notify you, as soon as you can invite others.
        </p>
      </div>
    <% end %>
  </section>

  <% if @invitations_used.any? %>
    <section>
      <h3>Accepted Invitations</h3>
      <table>
        <thead>
          <tr>
            <th class="hidden md:block">ID</th>
            <th>Accepted</th>
            <th>Invited user</th>
          </tr>
        </thead>
        <tbody>
          <% @invitations_used.each do |invitation| %>
            <tr>
              <td class="hidden md:block font-mono"><%= invitation.token %></td>
              <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
              <td><%= User.find(invitation.invited_user_id).address %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </section>
  <% end %>
<% end %>
