{% extends "dashboard_base.html" %}
{% block title %}{{ t("invite-links-page-title") }} — 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;">{{ t("invite-links-heading") }}</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);">+ {{ t("invite-links-new") }}</a>
  </div>
  <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem;">
    {{ t("invite-links-help") }}
  </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; {{ t("invite-links-duration", minutes=et.duration_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;">
          {{ t("invite-links-hosted-by", host=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);">{{ t("invite-links-get-link") }}</button>
        <a href="/dashboard/invites/{{ et.id }}" class="slot-btn" style="text-decoration: none; font-size: 0.8rem;">{{ t("invite-links-invites") }}</a>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <div class="empty" style="padding: 2rem 1rem;">
      <div class="empty-icon">&#127970;</div>
      <div class="empty-text">{{ t("invite-links-empty", link='<a href="/dashboard/event-types/new?preset=internal" style="color: var(--accent); text-decoration: none;">' ~ (t("invite-links-empty-link-label") | escape) ~ '</a>') | safe }}</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 = {{ t('invite-links-js-generating') | tojson }};

      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 = {{ t('invite-links-js-copied') | tojson }};
            btn.style.color = 'var(--success)';
            btn.style.borderColor = 'var(--success)';
            setTimeout(function() {
              btn.textContent = {{ t('invite-links-get-link') | tojson }};
              btn.style.color = 'var(--accent)';
              btn.style.borderColor = 'var(--accent)';
              btn.disabled = false;
            }, 2000);
          });
        }
      })
      .catch(function() {
        btn.textContent = {{ t('invite-links-js-error') | tojson }};
        btn.disabled = false;
        setTimeout(function() { btn.textContent = {{ t('invite-links-get-link') | tojson }}; }, 1500);
      });
    });
  });
})();
</script>
{% endblock %}