{% extends "base.html" %}

{% block content %}

<div class="flex justify-end my-6">
  <a href="{{ url_for('users.invite_create') }}"
    class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 transition-colors duration-150 ease-in-out">{{_('Create an invite')}}</a>
</div>


{% if invites %}

{% for invite in invites %}
<div class="flex flex-wrap -mx-3 mb-6">
  <div class="w-full px-3">
    <div class="flex items

        -center justify-between bg-white border border-gray-300 rounded-lg p-4">
      <div>
        <h3 class="text-lg font-semibold leading-6 text-gray-900">{{ invite.email }}</h3>
        <p class="text-sm leading-5 text-gray-500">{{ invite.created_at.strftime('%b %d, %Y') }}</p>
      </div>
      <div>

        <button onclick="copyToClipboardWithPath('{{invite.url}}')"
          class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 transition-colors duration-150 ease-in-out">Copy
          URL</button>


      </div>

    </div>
  </div>
</div>
{% endfor %}

<script>
  function copyToClipboardWithPath(path) {
    // Construct the full URL by combining the current base URL with the provided path
    const fullUrl = window.location.origin + path;

    // Use the Clipboard API to copy the full URL
    navigator.clipboard.writeText(fullUrl).then(function () {
      console.log('Copying to clipboard was successful!');
      alert('Full URL copied to clipboard!'); // Optional: Inform the user
    }, function (err) {
      console.error('Could not copy text: ', err);
    });
  }
</script>

{% else %}
<div class="flex flex-wrap items-center justify-center my-10">
  <div class="w-full px-3 text-center">
    <p class="text-3xl md:text-4xl text-slate-400 py-10">{{_('No invites for now')}}.</p>
  </div>
</div>

{% endif %}

{% endblock %}