{% extends 'base/layout.html' %}
{% load render_table from django_tables2 %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="row mb-3">
  <div class="col">
    <h1 class="page-header">{{ page_title }}</h1>
  </div>
</div>

{# Combined filter + search form #}
<div class="card mb-3">
  <div class="card-header"><strong>Search Leases</strong></div>
  <div class="card-body">
    <form method="get" class="row g-3 align-items-end">
      {# Search fields #}
      {% for field in search_form %}
      {% if not field.is_hidden %}
      <div class="col-auto">
        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
        {{ field }}
        {% if field.errors %}<div class="invalid-feedback d-block">{{ field.errors }}</div>{% endif %}
      </div>
      {% endif %}
      {% endfor %}
      {# Server selector #}
      <div class="col-auto">
        <label class="form-label">Servers</label>
        {% for choice in filter_form.server %}
        <div class="form-check">
          {{ choice.tag }}
          <label class="form-check-label" for="{{ choice.id_for_label }}">
            {{ choice.choice_label }}
          </label>
        </div>
        {% endfor %}
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary">
          <i class="mdi mdi-magnify"></i> Search
        </button>
        <a href="?" class="btn btn-outline-secondary">Reset</a>
      </div>
    </form>
  </div>
</div>

{# Per-server errors #}
{% if errors %}
<div class="alert alert-warning">
  <strong>Some servers could not be reached:</strong>
  <ul class="mb-0 mt-1">
    {% for name, msg in errors %}
    <li><strong>{{ name }}</strong>: {{ msg }}</li>
    {% endfor %}
  </ul>
</div>
{% endif %}

{# Results table #}
{% if request.GET.q %}
{% render_table table %}
<div class="mt-2 text-muted small">
  Showing leases from
  {% if request.GET.server %}selected{% else %}all DHCPv{{ dhcp_version }}-enabled{% endif %} servers.
</div>
{% else %}
<div class="alert alert-info">
  Enter a search query above to find leases across all selected servers.
</div>
{% endif %}
{% endblock %}