{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col-12">
    <h2 class="mb-1">{{ title }}</h2>
    <p class="text-muted">{{ subtitle or "Преглед на податоци" }}</p>
  </div>
</div>

{% if rows and headers %}
  <!-- Toolbar -->
  <div class="row align-items-center mb-3 g-2">
    <div class="col-md-6">
      <div class="input-group">
        <span class="input-group-text"><i class="bi bi-search"></i></span>
        <input id="rep-search" class="form-control" placeholder="Пребарај во табелата...">
      </div>
    </div>
    <div class="col-md-6 text-md-end">
      <button id="rep-export" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-download"></i> CSV
      </button>
    </div>
  </div>

  <!-- Table -->
  <div class="table-responsive">
    <table class="table table-striped table-hover" id="rep-table">
      <thead class="table-info">
        <tr>
          {% for h in headers %}
            <th>{{ h.replace('_',' ')|title }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
          <tr>
            {% for h in headers %}
              {% set v = r[h] %}
              {% set key = h|lower %}
              <td>
                {# badge за ID полиња #}
                {% if key.endswith('id') and v is not none %}
                  <span class="badge bg-primary">#{{ v }}</span>
                {% elif 'status' in key and v %}
                  {% set vs = v|string|lower %}
                  {% set cls = 'secondary' %}
                  {% if 'успеш' in vs or 'done' in vs or 'complete' in vs %}{% set cls = 'success' %}{% endif %}
                  {% if 'warn' in vs or 'pending' in vs or 'очек' in vs %}{% set cls = 'warning' %}{% endif %}
                  {% if 'fail' in vs or 'error' in vs or 'греш' in vs %}{% set cls = 'danger' %}{% endif %}
                  <span class="badge bg-{{ cls }}">{{ v }}</span>
                {% else %}
                  {% if v is string and v|length > 80 %}
                    <span title="{{ v }}">{{ v[:80] }}…</span>
                  {% else %}
                    {{ v if v is not none and v != '' else '—' }}
                  {% endif %}
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Мали статистики (генерички) -->
{% else %}
  <div class="alert alert-info mt-3">Нема податоци за прикажување.</div>
{% endif %}

<div class="mt-3">
  <a href="/reports" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Назад кон извештаи</a>
</div>

<script>
(() => {
  const table = document.getElementById('rep-table');
  if(!table) return;

  // Live search
  const search = document.getElementById('rep-search');
  search.addEventListener('input', () => {
    const q = (search.value || '').toLowerCase().trim();
    [...table.tBodies[0].rows].forEach(tr => {
      tr.style.display = tr.innerText.toLowerCase().includes(q) ? '' : 'none';
    });
  });

  // CSV export (почитува активен филтер)
  document.getElementById('rep-export').addEventListener('click', () => {
    const head = [...table.tHead.rows[0].cells].map(th => th.innerText.trim());
    const lines = [];
    lines.push(head.map(csvEscape).join(','));
    [...table.tBodies[0].rows].forEach(tr => {
      if(tr.style.display==='none') return;
      const row = [...tr.cells].map(td => csvEscape(td.innerText.trim()));
      lines.push(row.join(','));
    });
    const blob = new Blob([lines.join('\n')], {type: 'text/csv;charset=utf-8;'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = (('{{ title|replace(" ", "_") }}' || 'report') + '.csv').toLowerCase();
    a.click();
  });

  function csvEscape(s){
    s = (s||'').replace(/\r?\n|\r/g,' ');
    if (s.includes(',') || s.includes('"')) s = '"' + s.replace(/"/g,'""') + '"';
    return s;
  }
})();
</script>
{% endblock %}