{% extends "base.html" %}
{% block title %}DNS Latency Tester{% endblock %}

{% block extra_head %}
<style>
.dns-hero { text-align:center; padding:2rem 1rem; }
.dns-hero h1 { font-family:'Orbitron'; font-size:2rem; color:var(--neon); margin-bottom:.4rem; }
.dns-hero p { color:var(--text-dim); font-size:.85rem; max-width:640px; margin:0 auto; }
.dns-cta { text-align:center; margin:1.5rem 0; }
.dns-cta button { background:var(--neon); color:#000; border:none; padding:.7rem 1.6rem; border-radius:8px; font-family:'Orbitron'; font-weight:700; cursor:pointer; transition:var(--t); }
.dns-cta button:hover { background:var(--neon-dim); box-shadow:0 0 16px var(--neon-glow); }
.dns-results { margin-top:2rem; }
.dns-results table { width:100%; border-collapse:collapse; background:rgba(22,18,31,.55); border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.dns-results th { background:rgba(166,120,232,.1); color:var(--neon); font-family:'Orbitron'; font-size:.75rem; padding:.6rem .8rem; text-align:left; text-transform:uppercase; }
.dns-results td { padding:.5rem .8rem; border-top:1px solid var(--border); font-size:.8rem; }
.dns-results .status-ok { color:var(--neon); }
.dns-results .status-fail { color:#ef4444; }
.dns-results .status-timeout { color:#f59e0b; }
.dns-meta { color:var(--text-dim); font-size:.7rem; margin-top:.6rem; }
</style>
{% endblock %}

{% block content %}
<div class="dns-hero">
  <h1>DNS Latency Tester</h1>
  <p>Test DNS resolver latency + ping to find the fastest public DNS for gaming.</p>
</div>
<div class="dns-cta">
  <button id="runTestBtn">Run Test</button>
</div>
<div id="dnsResults" class="dns-results" style="display:none">
  <table id="dnsTable">
    <thead>
      <tr>
        <th>#</th>
        <th>DNS Provider</th>
        <th>Primary IP</th>
        <th>DNS Lookup (ms)</th>
        <th>Avg Ping (ms)</th>
        <th>Jitter (ms)</th>
        <th>Packet Loss %</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div class="dns-meta" id="dnsMeta"></div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
let testRunning = false;
document.getElementById('runTestBtn').addEventListener('click', async () => {
  if (testRunning) return;
  testRunning = true;
  const btn = document.getElementById('runTestBtn');
  btn.textContent = 'Testing...';
  btn.disabled = true;
  try {
    const res = await fetch('/dns/test');
    const data = await res.json();
    const tbody = document.querySelector('#dnsTable tbody');
    tbody.innerHTML = '';
    data.results.forEach((r,i) => {
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${i+1}</td>
        <td>${r.name}</td>
        <td>${r.primary_ip}</td>
        <td>${r.dns_lookup_ms}</td>
        <td>${r.avg_ping_ms}</td>
        <td>${r.jitter_ms}</td>
        <td>${r.packet_loss_pct}</td>
        <td class="status-${r.status}">${r.status}</td>`;
      tbody.appendChild(tr);
    });
    document.getElementById('dnsMeta').textContent = `Tested at: ${data.tested_at} — ${data.count} DNS servers`;
    document.getElementById('dnsResults').style.display = 'block';
  } catch (e) {
    alert('Test failed: ' + e);
  } finally {
    testRunning = false;
    btn.textContent = 'Run Test';
    btn.disabled = false;
  }
});
</script>
{% endblock %}