{% extends "cms/base.html" %}
{% block title %}Partners{% endblock %}
{% block page_title %}Partner Logos{% endblock %}

{% block extra_head %}
<style>
  .search-inline { display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem 1.25rem;transition:all .15s; }
  .search-inline:focus-within { border-color:#033152; }
  .search-inline input { border:none;background:none;outline:none;font-size:.875rem;width:160px;color:var(--cms-text); }
  .search-inline button { background:none;border:none;padding:0;color:#94a3b8;cursor:pointer;line-height:1; }
  /* col1=drag, col2=Logo (center), col3=Name (left) */
  .cms-table th:nth-child(3), .cms-table td:nth-child(3) { text-align: left; }
</style>
{% endblock %}

{% block cms_content %}

<div class="cms-section-header">
  <h2>Partners <span style="font-size:.75em;font-weight:400;color:var(--cms-muted);">({{ partner_count }} partner{{ partner_count|pluralize }}, {{ client_count }} client{{ client_count|pluralize }})</span></h2>
  <div class="d-flex align-items-center gap-2">
    <form method="get" class="search-inline">
      {% if type_filter %}<input type="hidden" name="type" value="{{ type_filter }}">{% endif %}
      <i class="fa-solid fa-magnifying-glass" style="font-size:.75rem;color:#94a3b8;"></i>
      <input type="text" name="q" value="{{ q }}" placeholder="Search logos...">
      {% if q %}<a href="{% url 'cms_partners' %}{% if type_filter %}?type={{ type_filter }}{% endif %}" style="color:#94a3b8;text-decoration:none;font-size:.75rem;">✕</a>{% endif %}
    </form>
    <a href="{% url 'cms_partner_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Logo</a>
  </div>
</div>

<div class="cms-card mb-3">
  <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem">Filter by Type</div>
  <div class="d-flex flex-wrap gap-2">
    <a href="{% url 'cms_partners' %}{% if q %}?q={{ q }}{% endif %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if not type_filter %}rgba(22,81,123,.15){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,.2);border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text);">
      <span>All</span>
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent);">{{ partner_count|add:client_count }}</span>
    </a>
    <a href="?type=partner{% if q %}&q={{ q }}{% endif %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if type_filter == 'partner' %}rgba(22,81,123,.15){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,.2);border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text);">
      <span>Partners</span>
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent);">{{ partner_count }}</span>
    </a>
    <a href="?type=client{% if q %}&q={{ q }}{% endif %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if type_filter == 'client' %}rgba(22,81,123,.15){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,.2);border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text);">
      <span>Clients</span>
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent);">{{ client_count }}</span>
    </a>
  </div>
</div>

<div class="cms-card">
  {% if partners %}
  {% if q %}<p style="font-size:.78rem;color:var(--cms-muted);margin-bottom:.75rem;">{{ partners|length }} result{{ partners|length|pluralize }} for "{{ q }}"</p>{% endif %}
  <table class="cms-table">
    <thead>
      <tr>
        <th style="width:32px;"></th>
        <th style="width:80px;">Logo</th>
        <th>Name</th>
        <th>URL</th>
        <th>Type</th>
        <th style="width:90px;">Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="sort-tbody">
      {% for p in partners %}
      <tr data-id="{{ p.pk }}" {% if not p.is_active %}style="opacity:.45;"{% endif %}>
        <td class="drag-handle"><i class="fa-solid fa-grip-vertical" style="color:#cbd5e1;"></i></td>
        <td>
          {% if p.logo %}
            <img src="{{ p.logo.url }}" style="height:32px;max-width:90px;object-fit:contain;">
          {% else %}
            <span style="font-size:.75rem;color:var(--cms-muted);">No logo</span>
          {% endif %}
        </td>
        <td><div style="font-weight:500;">{{ p.name }}</div></td>
        <td style="font-size:.8rem;color:var(--cms-muted);">{{ p.url|default:"-" }}</td>
        <td>
          <span style="background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#16517b">{{ p.get_logo_type_display|default:p.logo_type }}</span>
        </td>
        <td>{% if p.is_active %}<span class="badge-resolved">Active</span>{% else %}<span class="badge-closed">Inactive</span>{% endif %}</td>
        <td>
          <a href="{% url 'cms_partner_toggle_visibility' p.pk %}"
             class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e;"
             title="{% if p.is_active %}Hide{% else %}Show{% endif %}">
            <i class="fa-solid {% if p.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
          </a>
          <a href="{% url 'cms_partner_edit' p.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;"><i class="fa-solid fa-pen"></i></a>
          <form method="post" action="{% url 'cms_partner_delete' p.pk %}" style="display:inline;" onsubmit="return confirm('Delete {{ p.name }}?')">
            {% csrf_token %}<button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem"><i class="fa-solid fa-trash"></i></button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% include 'cms/partials/pagination.html' %}
  {% else %}
  <p style="color:var(--cms-muted);text-align:center;padding:2rem 0;">
    {% if q %}No logos match "{{ q }}".{% else %}No logos yet. <a href="{% url 'cms_partner_add' %}">Add one.</a>{% endif %}
  </p>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>initDragSort('#sort-tbody','PartnerLogo','{% url "cms_sort_items" %}','{{ csrf_token }}');</script>
{% endblock %}