{% extends "base.html" %}
{% block title %}Tickets — Organization{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-ticket-alt" aria-hidden="true"></i> Tickets</h1>
  <div class="app-page-header-actions">
    <a class="btn btn-primary btn-sm" href="{{ url_for('organization_ticket_new_page') }}"><i class="fas fa-plus"></i> New ticket</a>
    <a class="btn btn-secondary btn-sm" href="{{ url_for('organization_hub') }}">Overview</a>
  </div>
</div>
<div id="out" class="filters-section" style="padding:12px;"><div class="loading-state"><div class="spinner"></div><span>Loading…</span></div></div>
<script>
(async function(){
  const el = document.getElementById('out');
  try {
    const r = await fetch('/api/portal/organization/tickets');
    const j = await r.json();
    if (!j.success) { el.innerHTML = '<p class="form-hint">'+(j.error||'Failed')+'</p>'; return; }
    const rows = (j.tickets||[]).map(t => '<tr><td>'+t.id+'</td><td><a href="/organization/tickets/'+t.id+'">'+(t.title||'').replace(/</g,'&lt;')+'</a></td><td>'+(t.status||'')+'</td><td>'+(t.priority||'')+'</td></tr>').join('');
    el.innerHTML = '<div class="table-container"><table class="client-table-simple"><thead><tr><th>ID</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead><tbody>'+(rows||'<tr><td colspan="4">No tickets</td></tr>')+'</tbody></table></div>';
  } catch(e) { el.textContent = String(e); }
})();
</script>
{% endblock %}