{% 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 Logs</h2>
<ul class="event-list">
  <li><strong>Access-Accept Logs</strong></li>
  {% for log in latest_accept %}
    <li>
      <strong>{{ log.mac_address }}</strong> - {{ log.reply }}
      <br>
      <small>{{ log.timestamp }} - {{ log.result }}</small>
    </li>
  {% endfor %}
  
  <li><strong>Access-Reject Logs</strong></li>
  {% for log in latest_reject %}
    <li>
      <strong>{{ log.mac_address }}</strong> - {{ log.reply }}
      <br>
      <small>{{ log.timestamp }} - {{ log.result }}</small>
    </li>
  {% endfor %}
</ul>

<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"></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 => {
        // Update: Use 'output' from the API response
        resultBox.textContent = data.output || "No data returned.";
      })
      .catch(err => {
        resultBox.textContent = `Error: ${err}`;
      });
    });
</script>

{% endblock %}