{% extends "dashboard_base.html" %}
{% block title %}Invite Links — calrs{% endblock %}
{% block dashboard_content %}
<div class="card">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
    <h1 style="margin-bottom: 0;">Invite Links</h1>
    <a href="/dashboard/event-types/new?preset=internal" class="slot-btn" style="text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--accent); border-color: var(--accent);">+ New internal event</a>
  </div>
  <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem;">
    Generate single-use booking links for internal event types. Any authenticated colleague can create and share links here.
  </p>

  {% if event_types %}
    {% for et in event_types %}
    <div class="et-row" {% if not loop.last %}style="border-bottom: 1px solid var(--border);"{% endif %}>
      <div class="et-info">
        <strong>{{ et.title }}</strong>
        <span style="color: var(--text-muted); font-size: 0.85rem;">&middot; {{ et.duration_min }}min</span>
        {% if et.team_name %}<span class="badge badge-info">{{ et.team_name }}</span>{% endif %}
        <div style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.125rem;">
          Hosted by {{ et.host_name }}
        </div>
      </div>
      <div class="et-actions" style="display: flex; gap: 0.375rem; align-items: center;">
        <button type="button" class="slot-btn quick-link-btn" data-et-id="{{ et.id }}" style="font-size: 0.8rem; cursor: pointer; color: var(--accent); border-color: var(--accent);">Get link</button>
        <a href="/dashboard/invites/{{ et.id }}" class="slot-btn" style="text-decoration: none; font-size: 0.8rem;">Invites</a>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <div class="empty" style="padding: 2rem 1rem;">
      <div class="empty-icon">&#127970;</div>
      <div class="empty-text">No internal event types yet.<br><a href="/dashboard/event-types/new?preset=internal" style="color: var(--accent); text-decoration: none;">Create an event type</a> with "Internal" visibility to let any colleague generate booking links.</div>
    </div>
  {% endif %}
</div>

<script>
(function() {
  function getCsrfToken() {
    var match = document.cookie.match(/(?:^|;\s*)__Host-calrs_csrf=([^;]+)/);
    return match ? match[1] : '';
  }

  document.querySelectorAll('.quick-link-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var etId = btn.dataset.etId;
      var csrf = getCsrfToken();
      btn.disabled = true;
      btn.textContent = 'Generating...';

      fetch('/dashboard/invites/' + etId + '/quick-link', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: '_csrf=' + encodeURIComponent(csrf)
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.url) {
          navigator.clipboard.writeText(data.url).then(function() {
            btn.textContent = 'Copied!';
            btn.style.color = 'var(--success)';
            btn.style.borderColor = 'var(--success)';
            setTimeout(function() {
              btn.textContent = 'Get link';
              btn.style.color = 'var(--accent)';
              btn.style.borderColor = 'var(--accent)';
              btn.disabled = false;
            }, 2000);
          });
        }
      })
      .catch(function() {
        btn.textContent = 'Error';
        btn.disabled = false;
        setTimeout(function() { btn.textContent = 'Get link'; }, 1500);
      });
    });
  });
})();
</script>
{% endblock %}