{% extends 'base.html' %}
{% block title %}RadMac{% endblock %}

{% block content %}
<h1 class="page-title">RadMac</h1>

<div class="stats-cards">
  <div class="card neutral">
    <strong>Total MAC Addresses</strong>
    <p>{{ total_users }}</p>
  </div>
  <div class="card neutral">
    <strong>Total VLAN Groups</strong>
    <p>{{ total_groups }}</p>
  </div>
</div>

<h2>Recent Access-Accept</h2>
<ul class="event-list green">
  {% for entry in latest_accept %}
    <li>
      <strong>{{ entry.mac_address }}</strong>
      {% if entry.description %} ({{ entry.description }}){% endif %}
      — {{ entry.ago }}
    </li>
  {% endfor %}
</ul>

<h2>Recent Access-Reject</h2>
<ul class="event-list red">
  {% for entry in latest_reject %}
    <li>
      <strong>{{ entry.mac_address }}</strong>
      {% if entry.description %} ({{ entry.description }}){% endif %}
      — {{ entry.ago }}
    </li>
  {% endfor %}
</ul>

<hr>

<h2>MAC Vendor Lookup</h2>
<form id="mac-lookup-form" method="POST" action="/lookup_mac">
  <input type="text" name="mac" id="mac-input" placeholder="Enter MAC address" required>
  <button type="submit">🔍 Lookup</button>
</form>

<pre id="mac-result" class="debug-output" style="margin-top: 1em;"></pre>

<script>
document.getElementById('mac-lookup-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const form = e.target;
  const data = new URLSearchParams(new FormData(form));
  const resultBox = document.getElementById('mac-result');
  resultBox.textContent = "Querying...";

  fetch(form.action, {
    method: 'POST',
    body: data,
  })
  .then(r => r.json())
  .then(data => {
    resultBox.textContent = JSON.stringify(data, null, 2);
  })
  .catch(err => {
    resultBox.textContent = `Error: ${err}`;
  });
});
</script>

<style>
.page-title {
  margin-bottom: 1rem;
  color: var(--fg);
}
.stats-cards {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.card {
  background: var(--cell-bg);
  border: 1px solid #666;
  padding: 1rem;
  border-radius: 8px;
  flex: 1;
  text-align: center;
}
.card.neutral {
  background-color: #444;
}
.event-list {
  list-style: none;
  padding: 0;
}
.event-list li {
  padding: 4px 0;
  border-bottom: 1px dashed #666;
}
.event-list.green li { color: #4caf50; }
.event-list.red li { color: #ff4d4d; }
#mac-lookup-form input {
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #999;
  width: 250px;
}
#mac-lookup-form button {
  padding: 6px 12px;
  margin-left: 10px;
  cursor: pointer;
}
.debug-output {
  background-color: #222;
  color: #b6fcd5;
  border: 1px solid #333;
  padding: 1em;
  font-size: 0.9rem;
  white-space: pre-wrap;
}
</style>
{% endblock %}