<div class="page-actions"><a href="/member/events/create" class="btn btn-primary"><i class="bi bi-plus-circle-fill"></i> Create Event</a><a href="/member/events" class="btn btn-outline-primary">Browse Events</a></div>

<div class="profile-tabs" style="max-width:100%">
  <button class="ptab active" data-tab="created">Events I Created</button>
  <button class="ptab" data-tab="registered">Events I Registered For</button>
</div>

<div class="ptab-content active" id="tab-created">
  <% if (created && created.length) { %>
  <div class="admin-card">
    <table style="width:100%;border-collapse:collapse;font-size:.85rem">
      <thead><tr style="border-bottom:1px solid #e5e7eb"><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Event</th><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Date</th><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Type</th><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Registrations</th><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Status</th></tr></thead>
      <tbody>
        <% created.forEach(e => { %>
        <tr style="border-bottom:1px solid #f3f4f6">
          <td style="padding:12px 16px"><strong><a href="/member/events/<%= e.id %>" style="color:#0f172a"><%= e.title %></a></strong></td>
          <td style="padding:12px 16px"><%= moment(e.start_date).format('MMM D, YYYY') %></td>
          <td style="padding:12px 16px"><span class="badge badge-secondary"><%= e.event_type %></span></td>
          <td style="padding:12px 16px"><%= e.reg_count || 0 %><% if(e.capacity) { %>/<%= e.capacity %><% } %></td>
          <td style="padding:12px 16px"><span class="badge badge-<%= e.status === 'published' ? 'success' : e.status === 'cancelled' ? 'danger' : 'secondary' %>"><%= e.status %></span></td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
  <% } else { %><div class="empty-state"><i class="bi bi-calendar-plus"></i><h3>No events created yet</h3><p>Host your first chamber event!</p><a href="/member/events/create" class="btn btn-primary">Create Event</a></div><% } %>
</div>

<div class="ptab-content" id="tab-registered">
  <% if (registered && registered.length) { %>
  <div class="admin-card">
    <table style="width:100%;border-collapse:collapse;font-size:.85rem">
      <thead><tr style="border-bottom:1px solid #e5e7eb"><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Event</th><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Date</th><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Confirmation</th><th style="padding:10px 16px;text-align:left;color:#9ca3af;font-size:.7rem;text-transform:uppercase">Status</th></tr></thead>
      <tbody>
        <% registered.forEach(e => { %>
        <tr style="border-bottom:1px solid #f3f4f6">
          <td style="padding:12px 16px"><strong><a href="/member/events/<%= e.id %>" style="color:#0f172a"><%= e.title %></a></strong></td>
          <td style="padding:12px 16px"><%= moment(e.start_date).format('MMM D, YYYY') %></td>
          <td style="padding:12px 16px;font-family:monospace;font-size:.8rem"><%= e.confirmation_number || '—' %></td>
          <td style="padding:12px 16px"><span class="badge badge-<%= e.reg_status === 'checked_in' ? 'success' : e.reg_status === 'registered' ? 'info' : 'secondary' %>"><%= e.reg_status %></span></td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
  <% } else { %><div class="empty-state"><i class="bi bi-calendar-check"></i><h3>No event registrations</h3><p>Browse and register for upcoming events.</p><a href="/member/events" class="btn btn-primary">Browse Events</a></div><% } %>
</div>

<script>
document.querySelectorAll('.ptab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.ptab,.ptab-content').forEach(el => el.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
  });
});
</script>
