{% extends "shared/frontend/base.html" %}

{% block title %}Krydsfelter - BMC Hub{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-4">
  <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap mb-4">
    <div>
      <div class="small text-uppercase text-muted fw-semibold mb-1">Lokaliteter</div>
      <h1 class="h3 mb-1"><i class="bi bi-diagram-3 me-2"></i>Krydsfelter</h1>
      <p class="text-muted mb-0">Én række pr. X-felt med samlet kapacitet og tilknyttede lokationer.</p>
    </div>
    <a href="/app/locations" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Lokaliteter</a>
  </div>

  <div class="card border-0 shadow-sm mb-4"><div class="card-body">
    <form class="row g-3 align-items-end" method="get">
      <div class="col-md-9"><label class="form-label" for="cross-field-search">Søg</label><input id="cross-field-search" class="form-control" name="q" value="{{ query }}" placeholder="X-felt, underfelt eller lokation"></div>
      <div class="col-md-3 d-grid"><button class="btn btn-primary"><i class="bi bi-search me-1"></i>Søg</button></div>
    </form>
  </div></div>

  <div class="card border-0 shadow-sm"><div class="table-responsive"><table class="table align-middle mb-0">
    <thead><tr><th>X-felt</th><th>Lokation</th><th>Felter</th><th>Porte</th><th>Ledige</th><th></th></tr></thead>
    <tbody>
      {% for field in cross_fields %}
      <tr>
        <td><strong>{{ field.location_name }}</strong></td>
        <td><a href="/app/locations/{{ field.location_id }}?tab=cross-field" class="text-decoration-none">{{ field.hierarchy_path or field.location_name }}</a></td>
        <td>{{ field.field_count }}<div class="small text-muted text-truncate" style="max-width: 280px;">{{ field.field_names }}</div></td>
        <td><strong>{{ field.assigned_ports }}</strong> / {{ field.total_ports }}{% if field.port_label_format == 'paired' %}<div class="small text-muted">A/B-par</div>{% endif %}</td>
        <td><span class="badge {% if field.total_ports - field.assigned_ports > 0 %}bg-success{% else %}bg-secondary{% endif %}">{{ field.total_ports - field.assigned_ports }}</span></td>
        <td class="text-end"><a href="/app/locations/{{ field.location_id }}?tab=cross-field" class="btn btn-outline-primary btn-sm"><i class="bi bi-pencil-square me-1"></i>Åbn og rediger</a></td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="text-center text-muted py-5">Ingen X-felter matcher søgningen.</td></tr>
      {% endfor %}
    </tbody>
  </table></div></div>
</div>
{% endblock %}