{% extends 'base.html' %}
{% block title %}MAC Address List{% endblock %}

{% block content %}
<h1 class="page-title">MAC Address List</h1>

<form id="add-user-form" method="POST" action="{{ url_for('user.add') }}">
  <input type="text" name="mac_address" placeholder="MAC address (12 hex)" required maxlength="12">
  <input type="text" name="description" placeholder="Description (optional)">
  <select name="group_id" required>
    <option value="">Assign to VLAN</option>
    {% for group in available_groups %}
    <option value="{{ group.vlan_id }}">VLAN {{ group.vlan_id }}{% if group.description %} - {{ group.description }}{% endif %}</option>
    {% endfor %}
  </select>
  <button type="submit">➕ Add</button>
</form>

<table class="styled-table">
  <thead>
    <tr>
      <th>MAC Address</th>
      <th>Description</th>
      <th>Vendor <button id="refresh-vendors" title="Refresh unknown vendors">🔄</button></th>
      <th>VLAN</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for entry in users %}
    <tr>
      <td>{{ entry.mac_address }}</td>

      <form method="POST" action="{{ url_for('user.update_user_route') }}">
        <input type="hidden" name="mac_address" value="{{ entry.mac_address }}">

        <td>
          <input type="text" name="description" value="{{ entry.description or '' }}">
        </td>

        <td>{{ entry.vendor or "..." }}</td>

        <td>
          <select name="group_id">
            {% for group in available_groups %}
            <option value="{{ group.vlan_id }}" {% if group.vlan_id == entry.vlan_id %}selected{% endif %}>
              VLAN {{ group.vlan_id }}{% if group.description %} - {{ group.description }}{% endif %}
            </option>
            {% endfor %}
          </select>
        </td>

        <td>
          <button type="submit" title="Save">💾</button>
      </form>

          <form method="POST" action="{{ url_for('user.delete') }}" style="display:inline;">
            <input type="hidden" name="mac_address" value="{{ entry.mac_address }}">
            <button type="submit" onclick="return confirm('Delete this MAC address?')">❌</button>
          </form>
        </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script>
  document.getElementById('refresh-vendors').addEventListener('click', function () {
    fetch("{{ url_for('user.refresh') }}", { method: "POST" })
      .then(res => res.json())
      .then(data => {
        window.showToast("Vendor refresh complete.");
        window.location.reload();
      })
      .catch(err => alert("Error: " + err));
  });
</script>
{% endblock %}