{% extends "dashboard_base.html" %}
{% block title %}{{ t("event-types-page-title") }} — calrs{% endblock %}
{% block dashboard_content %}
<style>
.action-menu { position: relative; }
.action-menu-dropdown { display: none; position: absolute; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 20; min-width: 160px; padding: 0.25rem 0; }
.action-menu-dropdown.open { display: block; }
.action-menu-dropdown a, .action-menu-dropdown button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--text); background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit; }
.action-menu-dropdown a:hover, .action-menu-dropdown button:hover { background: var(--surface-hover); }
.action-menu-dropdown .danger { color: var(--error-text); }
.et-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.copy-link-btn.copied { color: var(--success) !important; border-color: var(--success) !important; }
</style>
<div class="card">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
    <h1 style="margin-bottom: 0;">{{ t("event-types-heading") }}</h1>
    <a href="/dashboard/event-types/new" class="slot-btn" style="text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--accent); border-color: var(--accent);">+ {{ t("event-types-new") }}</a>
  </div>
  {% if has_any %}
    {% for et in all_event_types %}
    <div class="et-row" {% if not loop.last %}style="border-bottom: 1px solid var(--border);"{% endif %}>
      <div class="et-info">
        <div>
          <strong>{{ et.title }}</strong>
          {% if et.is_team %}<span class="badge badge-info" style="margin-left: 0.25rem;">{{ et.team_name }}</span>{% endif %}
          {% if not et.enabled %}<span class="badge badge-disabled">{{ t("event-types-badge-disabled") }}</span>{% endif %}
          {% if et.visibility == "internal" %}<span class="badge badge-info">{{ t("event-types-badge-internal") }}</span>{% endif %}
          {% if et.visibility == "private" %}<span class="badge badge-muted">{{ t("event-types-badge-private") }}</span>{% endif %}
          {% if et.resource_names %}<span class="badge badge-muted" title="{{ et.resource_names }}">{{ t("event-types-badge-resources") }}</span>{% endif %}
          {% if et.visibility == "private" or et.visibility == "internal" %}
            <a href="/dashboard/invites/{{ et.id }}" style="font-size: 0.75rem; color: var(--accent); text-decoration: none; margin-left: 0.25rem;">{{ t("event-types-send-invites") }} &rarr;</a>
          {% endif %}
        </div>
        <div class="et-meta">
          {{ t("event-types-duration", minutes=et.duration_min) }}
          {% if et.is_team %} &middot; {% if et.scheduling_mode == "collective" %}{{ t("event-types-mode-collective") }}{% else %}{{ t("event-types-mode-round-robin") }}{% endif %}{% endif %}
          &middot; /{% if et.is_team %}team/{{ et.team_slug }}{% else %}u/{{ username }}{% endif %}/{{ et.slug }}
        </div>
      </div>
      <div class="et-actions">
        {# Only where a public URL actually resolves. A private event type is
           reached through a tokenised invite, so copying its path would hand
           out a link that 404s; the row offers "Send invites" instead. #}
        {% if et.view_url %}
        <button type="button" class="slot-btn copy-link-btn" style="font-size: 0.8rem; cursor: pointer;" title="{{ t('dashboard-event-types-copy-title') }}" data-copy-label="{{ t('dashboard-event-types-copy') }}" data-copied-label="{{ t('dashboard-event-types-copied') }}" data-copy-failed-label="{{ t('dashboard-event-types-copy-failed') }}" data-path="{{ et.view_url }}">{{ t('dashboard-event-types-copy') }}</button>
        {% endif %}
        {% if et.can_manage %}
        <a href="{{ et.edit_url }}" class="slot-btn" style="text-decoration: none; font-size: 0.8rem;">{{ t("event-types-edit") }}</a>
        <form method="post" action="{{ et.toggle_url }}" style="margin: 0;">
          <button type="submit" class="slot-btn" style="font-size: 0.8rem; cursor: pointer;">{% if et.enabled %}{{ t("event-types-disable") }}{% else %}{{ t("event-types-enable") }}{% endif %}</button>
        </form>
        <a href="{{ et.embed_url }}" class="slot-btn" style="text-decoration: none; font-size: 0.8rem;">{{ t("event-types-embed") }}</a>
        {% endif %}
        <div class="action-menu">
          <button type="button" class="slot-btn action-menu-toggle" style="font-size: 0.8rem; cursor: pointer; padding: 0.375rem 0.5rem;">&ctdot;</button>
          <div class="action-menu-dropdown">
            {% if et.can_manage %}
            <a href="{{ et.overrides_url }}">{{ t("event-types-overrides") }}</a>
            {% endif %}
            {% if et.is_team and et.can_manage %}
            <a href="/dashboard/teams/{{ et.team_id }}/settings">{{ t("event-types-team-settings") }}</a>
            {% endif %}
            {% if (et.visibility == "private" or et.visibility == "internal") and et.can_manage %}
            <a href="/dashboard/invites/{{ et.id }}">{{ t("event-types-invites") }}</a>
            {% endif %}
            {% if et.view_url %}
            <a href="{{ et.view_url }}">{% if et.visibility == "public" %}{{ t("event-types-view-public") }}{% else %}{{ t("event-types-view-page") }}{% endif %}</a>
            {% endif %}
            {% if et.can_manage and et.active_bookings == 0 %}
            <button type="button" class="danger" data-confirm="{{ t('event-types-delete-confirm', title=et.title) }}" onclick="if(confirm(this.dataset.confirm)) this.nextElementSibling.submit();">{{ t("event-types-delete") }}</button>
            <form method="post" action="{{ et.delete_url }}" style="display: none;"></form>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <div class="empty" style="padding: 2rem 1rem;">
      <div class="empty-icon">&#128197;</div>
      <div class="empty-text">{{ t("event-types-empty", link='<a href="/dashboard/event-types/new" style="color: var(--accent); text-decoration: none;">' ~ (t("event-types-empty-link-label") | escape) ~ '</a>') | safe }}</div>
    </div>
  {% endif %}
</div>

<script>
document.addEventListener('click', function(e) {
  var copyBtn = e.target.closest('.copy-link-btn');
  if (copyBtn) {
    var url = window.location.origin + copyBtn.dataset.path;
    copyBtn._copyGen = (copyBtn._copyGen || 0) + 1;
    var gen = copyBtn._copyGen;
    if (copyBtn._copyTimer) {
      clearTimeout(copyBtn._copyTimer);
      copyBtn._copyTimer = null;
    }
    function stillCurrent() { return copyBtn._copyGen === gen; }
    function restoreLabel() {
      if (!stillCurrent()) return;
      copyBtn.textContent = copyBtn.dataset.copyLabel;
      copyBtn.classList.remove('copied');
      copyBtn._copyTimer = null;
    }
    function flashCopied() {
      if (!stillCurrent()) return;
      copyBtn.textContent = copyBtn.dataset.copiedLabel;
      copyBtn.classList.add('copied');
      copyBtn._copyTimer = setTimeout(restoreLabel, 1500);
    }
    function flashFailed() {
      if (!stillCurrent()) return;
      copyBtn.textContent = copyBtn.dataset.copyFailedLabel;
      copyBtn.classList.remove('copied');
      copyBtn._copyTimer = setTimeout(restoreLabel, 1500);
    }
    function fallbackCopy() {
      if (!stillCurrent()) return;
      var ta = document.createElement('textarea');
      ta.value = url;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      try {
        if (document.execCommand('copy')) flashCopied();
        else flashFailed();
      } catch (err) {
        flashFailed();
      }
      ta.remove();
    }
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(url).then(flashCopied, fallbackCopy);
    } else {
      fallbackCopy();
    }
    return;
  }
  var btn = e.target.closest('.action-menu-toggle');
  if (btn) {
    e.stopPropagation();
    var menu = btn.nextElementSibling;
    document.querySelectorAll('.action-menu-dropdown.open').forEach(function(m) { if (m !== menu) m.classList.remove('open'); });
    menu.classList.toggle('open');
    return;
  }
  document.querySelectorAll('.action-menu-dropdown.open').forEach(function(m) { m.classList.remove('open'); });
});
</script>
{% endblock %}