{% if profiles %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
  {% for p in profiles %}
  <div class="card bg-base-100 shadow-sm" id="sender-profile-{{ p.id }}">
    <div class="card-body p-4">
      <div class="flex items-start justify-between gap-2">
        <div class="min-w-0">
          <div class="font-mono text-sm font-semibold truncate">{{ p.email_address }}</div>
          {% if p.display_name %}
          <div class="text-sm text-base-content/60 truncate">{{ p.display_name }}</div>
          {% endif %}
        </div>
        <span class="badge badge-sm shrink-0 {% if p.sender_type == 'customer' %}badge-info{% elif p.sender_type == 'vendor' %}badge-warning{% elif p.sender_type == 'whitelist' %}badge-success{% else %}badge-ghost{% endif %}">
          {{ sender_type_labels.get(p.sender_type, p.sender_type) }}
        </span>
      </div>

      {% if p.email_types %}
      <div class="flex flex-wrap gap-1 mt-1">
        {% for t in p.email_types %}
          {% set label = dict(email_type_options).get(t, t) %}
          <span class="badge badge-sm badge-outline">{{ label }}</span>
        {% endfor %}
      </div>
      {% endif %}

      {% if p.processing_instructions %}
      <p class="text-xs text-base-content/70 mt-1 line-clamp-2">{{ p.processing_instructions }}</p>
      {% endif %}

      <div class="card-actions justify-end mt-2">
        <button class="btn btn-ghost btn-xs"
                hx-get="/senders/form?profile_id={{ p.id }}"
                hx-target="#profile-modal-body"
                hx-on::after-request="document.getElementById('profile-modal').showModal()">
          Edit
        </button>
        <button class="btn btn-ghost btn-xs text-error"
                hx-delete="/senders/{{ p.id }}"
                hx-confirm="Remove profile for {{ p.email_address }}?">
          Remove
        </button>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
<div class="text-xs text-base-content/40 mt-2">{{ profiles | length }} profile{{ 's' if profiles | length != 1 else '' }}</div>
{% else %}
<div class="card bg-base-100 shadow-sm">
  <div class="card-body text-center py-12 text-base-content/40">
    <p>No sender profiles yet.</p>
    <p class="text-sm mt-1">Click <strong>+ New Profile</strong> or use the <strong>Profile Sender</strong> button on any email log entry.</p>
  </div>
</div>
{% endif %}