{{define "dashboard.html"}}
{{template "base" .}}
{{end}}

{{define "dashboard-title"}}License Management{{end}}

{{define "dashboard-content"}}
<div class="stats">
  <div class="stat">
    <div class="stat-value">{{.Total}}</div>
    <div class="stat-label">Total Licenses</div>
  </div>
  <div class="stat">
    <div class="stat-value" style="color:#4d99ff">{{.ActiveCount}}</div>
    <div class="stat-label">Active</div>
  </div>
  <div class="stat">
    <div class="stat-value" style="color:var(--danger)">{{.RevokedCount}}</div>
    <div class="stat-label">Revoked</div>
  </div>
</div>
 
<div class="card">
  <div class="card-header">
    <span class="card-title">All Licenses</span>
    <span id="results-count" style="font-size:11px;color:var(--muted);font-family:var(--mono)"></span>
  </div>
 
  <!-- Filter bar -->
  <div class="filter-bar">
    <div class="filter-search">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)">
        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
      </svg>
      <input type="text" id="search" placeholder="Search key, customer, product…" oninput="applyFilters()">
    </div>
    <div class="filter-chips">
      <button class="chip chip-active selected" data-filter="status" data-value="" onclick="setChip(this,'status')">All</button>
      <button class="chip" data-filter="status" data-value="active" onclick="setChip(this,'status')">Active</button>
      <button class="chip" data-filter="status" data-value="revoked" onclick="setChip(this,'status')">Revoked</button>
    </div>
    <div class="filter-chips">
      <button class="chip chip-active selected" data-filter="type" data-value="" onclick="setChip(this,'type')">All Types</button>
      <button class="chip" data-filter="type" data-value="expiry" onclick="setChip(this,'type')">Expiry</button>
      <button class="chip" data-filter="type" data-value="usage" onclick="setChip(this,'type')">Usage</button>
    </div>
    <button class="btn btn-ghost btn-sm" onclick="clearFilters()" id="clear-btn" style="display:none">✕ Clear</button>
  </div>
 
  <div class="table-wrap">
    <table id="license-table">
      <thead>
        <tr>
          <th class="sortable" data-col="0" onclick="sortTable(0)">Key <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="1" onclick="sortTable(1)">Customer <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="2" onclick="sortTable(2)">Product <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="3" onclick="sortTable(3)">Type <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="4" onclick="sortTable(4)">Status <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="5" onclick="sortTable(5)">Expires / Uses <span class="sort-icon">↕</span></th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody id="license-tbody">
        {{range .Licenses}}
        {{template "license_row.html" .}}
        {{else}}
        <tr id="empty-row"><td colspan="7" style="color:var(--muted);text-align:center;padding:32px">No licenses yet — issue your first one.</td></tr>
        {{end}}
      </tbody>
    </table>
    <div id="no-results" style="display:none;text-align:center;padding:40px;color:var(--muted);font-size:13px">
      No licenses match your filters.
    </div>
  </div>
</div>
 
<style>
  .filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .filter-search {
    position: relative;
    flex: 1;
    min-width: 200px;
  }
  .filter-search input {
    padding-left: 32px;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 8px 12px 8px 32px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
  }
  .filter-search input:focus { border-color: var(--accent); }
  .filter-chips { display: flex; gap: 6px; }
  .chip {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    transition: all 0.15s;
  }
  .chip:hover { color: var(--text); border-color: var(--muted); }
  .chip.selected { border-color: var(--accent); color: var(--accent); background: rgba(0,255,157,0.07); }
 
  th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  th.sortable:hover { color: var(--text); }
  th.sort-asc .sort-icon::after  { content: ' ↑'; }
  th.sort-desc .sort-icon::after { content: ' ↓'; }
  .sort-icon { color: var(--muted); font-size: 10px; }
  th.sort-asc  .sort-icon,
  th.sort-desc .sort-icon { color: var(--accent); }
</style>
 
<script>
  // --- State ---
  let sortCol = -1;
  let sortDir = 1; // 1 = asc, -1 = desc
  let filters = { status: '', type: '' };
 
  // --- Sort ---
  function sortTable(col) {
    if (sortCol === col) {
      sortDir *= -1;
    } else {
      sortCol = col;
      sortDir = 1;
    }
 
    // Update header icons
    document.querySelectorAll('th.sortable').forEach(th => {
      th.classList.remove('sort-asc', 'sort-desc');
    });
    const th = document.querySelector(`th[data-col="${col}"]`);
    th.classList.add(sortDir === 1 ? 'sort-asc' : 'sort-desc');
 
    const tbody = document.getElementById('license-tbody');
    const rows = Array.from(tbody.querySelectorAll('tr[data-key]'));
 
    rows.sort((a, b) => {
      const aVal = a.children[col]?.dataset?.sort || a.children[col]?.innerText.trim() || '';
      const bVal = b.children[col]?.dataset?.sort || b.children[col]?.innerText.trim() || '';
      return aVal.localeCompare(bVal, undefined, { numeric: true }) * sortDir;
    });
 
    rows.forEach(r => tbody.appendChild(r));
    applyFilters();
  }
 
  // --- Filter ---
  function setChip(el, filterKey) {
    document.querySelectorAll(`.chip[data-filter="${filterKey}"]`).forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
    filters[filterKey] = el.dataset.value;
    applyFilters();
  }
 
  function applyFilters() {
    const search = document.getElementById('search').value.toLowerCase().trim();
    const tbody  = document.getElementById('license-tbody');
    const rows   = Array.from(tbody.querySelectorAll('tr[data-key]'));
    let visible  = 0;
 
    rows.forEach(row => {
      const text   = row.dataset.search || '';
      const status = row.dataset.status || '';
      const type   = row.dataset.type   || '';
 
      const matchSearch = !search || text.includes(search); // text is pre-lowercased by server
      const matchStatus = !filters.status || status === filters.status;
      const matchType   = !filters.type   || type   === filters.type;
 
      const show = matchSearch && matchStatus && matchType;
      row.style.display = show ? '' : 'none';
      if (show) visible++;
    });
 
    // Update results count
    const total = rows.length;
    const countEl = document.getElementById('results-count');
    countEl.textContent = visible === total
      ? `${total} license${total !== 1 ? 's' : ''}`
      : `${visible} of ${total} licenses`;
 
    // Show/hide empty state
    document.getElementById('no-results').style.display = visible === 0 && total > 0 ? '' : 'none';
 
    // Show clear button if any filter active
    const anyFilter = search || filters.status || filters.type;
    document.getElementById('clear-btn').style.display = anyFilter ? '' : 'none';
  }
 
  function clearFilters() {
    document.getElementById('search').value = '';
    filters = { status: '', type: '' };
    document.querySelectorAll('.chip').forEach(c => {
      c.classList.toggle('selected', c.dataset.value === '');
    });
    applyFilters();
  }
 
  // Init count on load
  document.addEventListener('DOMContentLoaded', applyFilters);
</script>
{{end}}