{% from "partials/_macros.html" import card_header, pagination_bar %}
{% from "partials/_persistence.html" import verdict_pill, subhead %}

{% set auth_cls = {
  'allowed': 'text-emerald-400',
  'denied':  'text-red-400',
  'limited': 'text-amber-400',
  'unknown': 'text-slate-500',
} %}

<div class="bg-slate-900 border border-slate-800 rounded-lg p-5">
  {{ card_header("privacy permissions (TCC)") }}

  {% if data %}
  {# ----- filter bar ----- #}
  <form id="tcc-filters"
        class="mb-4 flex flex-wrap items-center gap-2 text-xs"
        onsubmit="return false;">
    <input type="hidden" name="page" value="{{ data.page }}">

    <input type="search"
           name="q"
           value="{{ data.q }}"
           placeholder="search permission / app"
           autocomplete="off"
           class="bg-slate-800 border border-slate-700 rounded px-2 py-1 w-48 focus:outline-none focus:border-slate-500 placeholder:text-slate-600"
           hx-get="/fragments/tcc"
           hx-target="#tcc"
           hx-include="#tcc-filters"
           hx-trigger="keyup changed delay:300ms, search"
           hx-vals='{"page": 1}'>

    <select name="verdict"
            class="bg-slate-800 border border-slate-700 rounded px-2 py-1 focus:outline-none focus:border-slate-500"
            hx-get="/fragments/tcc"
            hx-target="#tcc"
            hx-include="#tcc-filters"
            hx-trigger="change"
            hx-vals='{"page": 1}'>
      <option value=""           {% if data.verdict == "" %}selected{% endif %}>all non-benign</option>
      <option value="malicious"  {% if data.verdict == "malicious" %}selected{% endif %}>malicious</option>
      <option value="suspicious" {% if data.verdict == "suspicious" %}selected{% endif %}>suspicious</option>
      <option value="unknown"    {% if data.verdict == "unknown" %}selected{% endif %}>unknown</option>
      <option value="benign"     {% if data.verdict == "benign" %}selected{% endif %}>benign (all)</option>
    </select>

    <select name="auth"
            class="bg-slate-800 border border-slate-700 rounded px-2 py-1 focus:outline-none focus:border-slate-500"
            hx-get="/fragments/tcc"
            hx-target="#tcc"
            hx-include="#tcc-filters"
            hx-trigger="change"
            hx-vals='{"page": 1}'>
      <option value=""        {% if data.auth == "" %}selected{% endif %}>all statuses</option>
      <option value="allowed" {% if data.auth == "allowed" %}selected{% endif %}>allowed</option>
      <option value="denied"  {% if data.auth == "denied" %}selected{% endif %}>denied</option>
      <option value="limited" {% if data.auth == "limited" %}selected{% endif %}>limited</option>
    </select>

    <select name="per_page"
            class="bg-slate-800 border border-slate-700 rounded px-2 py-1 focus:outline-none focus:border-slate-500"
            hx-get="/fragments/tcc"
            hx-target="#tcc"
            hx-include="#tcc-filters"
            hx-trigger="change"
            hx-vals='{"page": 1}'>
      {% for n in per_page_options %}
        <option value="{{ n }}" {% if n == data.per_page %}selected{% endif %}>{{ n }} / page</option>
      {% endfor %}
    </select>
  </form>
  {% endif %}

  {% if data and data.rows %}
    <div class="flex items-center gap-3 mb-3 text-[11px] text-slate-400">
      <span>{{ data.counts.total }} entries</span>
      <span class="text-emerald-400">{{ data.counts.allowed }} allowed</span>
      {% if data.counts.denied %}
        <span class="text-red-400">{{ data.counts.denied }} denied</span>
      {% endif %}
      {% if data.counts.malicious %}
        <span class="px-1.5 rounded bg-red-900/40 text-red-300">{{ data.counts.malicious }} malicious</span>
      {% endif %}
      {% if data.counts.suspicious %}
        <span class="px-1.5 rounded bg-amber-900/40 text-amber-300">{{ data.counts.suspicious }} suspicious</span>
      {% endif %}
    </div>

    <table class="w-full text-xs">
      <thead>
        <tr class="text-slate-500 uppercase tracking-wider text-[10px]">
          <th class="text-left font-semibold pb-2">verdict</th>
          <th class="text-left font-semibold pb-2">permission</th>
          <th class="text-left font-semibold pb-2">app</th>
          <th class="text-left font-semibold pb-2">status</th>
          <th class="text-left font-semibold pb-2">scope</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-800/80">
        {% for r in data.rows %}
          <tr class="hover:bg-slate-800/40 transition-colors" title="{{ r.reasoning or '' }}">
            <td class="py-2">{{ verdict_pill(r) }}</td>
            <td class="py-2 text-slate-200 font-semibold">{{ r.service_short }}</td>
            <td class="py-2 text-slate-400 font-mono break-all">{{ r.client or "—" }}</td>
            <td class="py-2 font-semibold {{ auth_cls.get(r.auth_label, 'text-slate-500') }}">
              {{ r.auth_label }}
            </td>
            <td class="py-2 text-slate-500 text-[10px] uppercase tracking-wider">{{ r.scope }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    {{ pagination_bar("tcc", data.page, data.total_pages, data.total, data.rows|length, data.per_page, per_page_options) }}

  {% elif data is not none %}
    <div class="text-slate-600 text-xs italic">no TCC permission rows in latest run — run the monitor with Full Disk Access for full visibility</div>
  {% else %}
    <div class="text-slate-500 italic">no data yet</div>
  {% endif %}
</div>