{% if allowlist_entries or pending_invites or owner_email %}
<ul class="space-y-1.5 text-sm">
  <!-- Owner entries (always allowed) -->
  {% if owner_email %}
  <li class="flex items-center justify-between p-2 bg-blue-50 rounded border border-blue-200">
    <div class="flex items-center gap-2">
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
        Email
      </span>
      <span class="text-gray-700">{{ owner_email }}</span>
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 border border-blue-300">
        Owner
      </span>
    </div>
    <span class="text-xs text-gray-500 italic">Always allowed</span>
  </li>
  {% endif %}
  
  {% if owner_phone %}
  <li class="flex items-center justify-between p-2 bg-blue-50 rounded border border-blue-200">
    <div class="flex items-center gap-2">
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
        SMS
      </span>
      <span class="text-gray-700">{{ owner_phone }}</span>
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 border border-blue-300">
        Owner
      </span>
    </div>
    <span class="text-xs text-gray-500 italic">Always allowed</span>
  </li>
  {% endif %}
  
  <!-- Active allowlist entries -->
  {% for entry in allowlist_entries %}
  <li class="p-2 bg-white rounded border border-gray-200">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium 
               {% if entry.channel == 'email' %}bg-green-100 text-green-800{% else %}bg-green-100 text-green-800{% endif %}">
          {{ entry.get_channel_display }}
        </span>
        <span class="text-gray-700 font-medium">{{ entry.address }}</span>
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700 border border-green-200">
          Active
        </span>
      </div>
      <button type="button" 
              onclick="removeAllowlistEntry('{{ entry.id }}')"
              class="text-red-600 hover:text-red-800 text-xs font-medium">
        Remove
      </button>
    </div>
    <!-- Direction indicators -->
    <div class="flex gap-3 mt-2 ml-2">
      <div class="flex items-center gap-1">
        {% if entry.allow_inbound %}
          <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Can receive messages from this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
          </svg>
          <span class="text-xs text-green-700 font-medium">Receives from contact</span>
        {% else %}
          <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Cannot receive messages from this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
          </svg>
          <span class="text-xs text-gray-400 line-through">Receives from contact</span>
        {% endif %}
      </div>
      <div class="flex items-center gap-1">
        {% if entry.allow_outbound %}
          <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Can send messages to this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
          </svg>
          <span class="text-xs text-blue-700 font-medium">Sends to contact</span>
        {% else %}
          <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Cannot send messages to this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
          </svg>
          <span class="text-xs text-gray-400 line-through">Sends to contact</span>
        {% endif %}
      </div>
    </div>
  </li>
  {% endfor %}
  
  <!-- Pending invitations -->
  {% for invite in pending_invites %}
  <li class="p-2 bg-yellow-50 rounded border border-yellow-200">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium 
               {% if invite.channel == 'email' %}bg-blue-100 text-blue-800{% else %}bg-green-100 text-green-800{% endif %}">
          {{ invite.get_channel_display }}
        </span>
        <span class="text-gray-700 font-medium">{{ invite.address }}</span>
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-300">
          Pending
        </span>
      </div>
      <button type="button" 
              onclick="cancelInvite('{{ invite.id }}')"
              class="text-red-600 hover:text-red-800 text-xs font-medium">
        Cancel
      </button>
    </div>
    <!-- Direction indicators -->
    <div class="flex gap-3 mt-2 ml-2">
      <div class="flex items-center gap-1">
        {% if invite.allow_inbound %}
          <svg class="w-4 h-4 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Will receive messages from this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
          </svg>
          <span class="text-xs text-yellow-700">Will receive from contact</span>
        {% else %}
          <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Won't receive messages from this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
          </svg>
          <span class="text-xs text-gray-400 line-through">Won't receive</span>
        {% endif %}
      </div>
      <div class="flex items-center gap-1">
        {% if invite.allow_outbound %}
          <svg class="w-4 h-4 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Will send messages to this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
          </svg>
          <span class="text-xs text-yellow-700">Will send to contact</span>
        {% else %}
          <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="Won't send messages to this contact">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
          </svg>
          <span class="text-xs text-gray-400 line-through">Won't send</span>
        {% endif %}
      </div>
    </div>
  </li>
  {% endfor %}
</ul>
{% else %}
<p class="text-xs text-gray-500 italic">No entries added yet.</p>
{% endif %}