{% extends "admin/layout.html" %}
{% block title %}{{ client.full_name }} — Access{% endblock %}
{% block page_title %}{{ client.full_name }} — Report Access{% endblock %}

{% block topbar_actions %}
  <a href="/admin/clients/{{ client.id }}/bulk-access" class="btn btn-primary">⚡ Manage Access</a>
  <a href="/admin/clients" class="btn btn-ghost">← All Clients</a>
{% endblock %}
{% block content %}

<!-- Client strip -->
<div style="background:var(--navy2);border:1px solid var(--border);border-radius:14px;
            padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:20px;
            box-shadow:var(--shadow);">
  <div>
    <div style="font-size:15px;font-weight:600;color:var(--ink);">{{ client.full_name }}</div>
    <div style="font-size:12px;color:var(--muted);margin-top:2px;">
      {% if client.ssrs_folder %}· <span style="color:var(--gold);">📁 {{ client.ssrs_folder }}</span>{% endif %}
    </div>
  </div>
  <div style="margin-left:auto;">
    <span class="badge {{ 'badge-green' if client.is_active else 'badge-red' }}">
      {{ 'Active' if client.is_active else 'Inactive' }}
    </span>
  </div>
</div>

<!-- Access Table -->
<div class="card">
  <div class="card-header">
    <span class="card-title">
      Granted Reports
      <span style="margin-left:6px;padding:2px 8px;background:var(--gold-dim);color:var(--gold);border-radius:4px;font-size:11px;">
        {{ access_list | selectattr('is_active') | list | length }} active
      </span>
    </span>
    <input class="search-inline" type="text" placeholder="🔍  Filter…" id="filterInput"
           oninput="filterRows(this.value)" style="width:180px;">
  </div>
  <div class="table-wrap">
    <table id="accessTable">
      <thead>
        <tr>
          <th>Report Name</th><th>Path</th><th>Category</th>
          <th>Status</th><th>Granted At</th><th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for a in access_list %}
        <tr>
          <td><strong style="color:var(--ink);">{{ a.report_name }}</strong></td>
          <td style="color:var(--muted);font-size:11px;">{{ a.report_path }}</td>
          <td><span class="badge badge-gold">{{ a.category }}</span></td>
          <td>
            <span class="badge {{ 'badge-green' if a.is_active else 'badge-red' }}">
              {{ 'Active' if a.is_active else 'Revoked' }}
            </span>
          </td>
          <td style="color:var(--muted);font-size:11px;">
            {{ a.granted_at.strftime('%d %b %Y') if a.granted_at else '—' }}
          </td>
          <td>
            {% if a.is_active %}
            <form method="POST" action="/admin/access/revoke/{{ a.id }}"
                  onsubmit="return confirm('Revoke access to {{ a.report_name }}?')">
              <button type="submit" class="btn btn-danger btn-sm">Revoke</button>
            </form>
            {% else %}
            <span style="color:var(--muted);font-size:11px;">—</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7">
          <div class="empty">
            <div class="empty-icon">📄</div>
            <h3>No reports assigned yet</h3>
            <p>Click <a href="/admin/clients/{{ client.id }}/bulk-access"
               style="color:var(--gold);font-weight:600;text-decoration:none;">⚡ Manage Access</a> to grant reports from this client's SSRS folder.</p>
          </div>
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function filterRows(q){
  q=q.toLowerCase();
  document.querySelectorAll('#accessTable tbody tr').forEach(tr=>{
    tr.style.display=tr.textContent.toLowerCase().includes(q)?'':'none';
  });
}
</script>
{% endblock %}