{% extends "base.html" %}
{% block title %}Referenzen{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-5">
  <h1 class="page-title">Referenzen</h1>
  <a href="{% url 'bibliothek:referenz_neu' %}" class="btn-primary">+ Neu</a>
</div>

<div class="card mb-4">
  <form method="get" class="flex gap-3 items-end">
    <div class="flex-1">
      <label class="form-label">Suche (Titel, Branche, Leistung)</label>
      <input type="text" name="q" value="{{ q }}" class="form-input w-full" placeholder="Suchen...">
    </div>
    <button type="submit" class="btn-secondary">Suchen</button>
  </form>
</div>

<div class="card">
  {% if referenzen %}
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left border-b border-slate-200">
        <th class="pb-2 font-medium text-slate-600">Referenz</th>
        <th class="pb-2 font-medium text-slate-600">Kunde</th>
        <th class="pb-2 font-medium text-slate-600">Branche</th>
        <th class="pb-2 font-medium text-slate-600">Freigabe</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for ref in referenzen %}
      <tr class="border-b border-slate-100 hover:bg-slate-50">
        <td class="py-2 font-medium">
          <a href="{% url 'bibliothek:referenz_detail' pk=ref.pk %}" class="text-brand-600 hover:underline">{{ ref.referenztitel|truncatechars:60 }}</a>
        </td>
        <td class="py-2 text-slate-600">{{ ref.kunde }}</td>
        <td class="py-2 text-slate-600">{{ ref.branche|default:"—" }}</td>
        <td class="py-2">
          {% if ref.freigabestatus_verwendung == 'freigegeben' %}
          <span class="badge-green">Freigegeben</span>
          {% elif ref.freigabestatus_verwendung == 'eingeschraenkt' %}
          <span class="badge-orange">Eingeschränkt</span>
          {% else %}
          <span class="badge-red">Nicht freigegeben</span>
          {% endif %}
        </td>
        <td class="py-2 text-right">
          <a href="{% url 'bibliothek:referenz_bearbeiten' pk=ref.pk %}" class="text-slate-400 hover:text-slate-700 text-xs">Bearbeiten</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-slate-500 text-sm">Keine Referenzen gefunden.</p>
  {% endif %}
</div>
{% endblock %}