<!-- Allowed Contacts List -->
<div class="space-y-2">
  <!-- Owner's Contact Information (Always Allowed in Default Mode) -->
  {% if owner_email or owner_phone %}
  <div class="text-xs text-gray-500 mb-2">
    <div class="font-medium">Owner (always allowed in Default mode):</div>
    {% if owner_email %}
    <div class="flex items-center justify-between py-1 px-2">
      <span class="flex items-center gap-1">
        <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
        </svg>
        {{ owner_email }}
      </span>
    </div>
    {% endif %}
    {% if owner_phone %}
    <div class="flex items-center justify-between py-1 px-2">
      <span class="flex items-center gap-1">
        <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
        </svg>
        {{ owner_phone }}
      </span>
    </div>
    {% endif %}
  </div>
  <div class="border-t border-gray-200 my-2"></div>
  {% endif %}
  
  <!-- Pending Invitations -->
  {% if pending_invites %}
  <div class="text-xs text-gray-500 mb-2 font-medium">Pending Invitations:</div>
  {% for invite in pending_invites %}
  <div class="py-2 px-3 bg-yellow-50 rounded-lg border border-yellow-200 mb-2">
    <div class="flex items-center justify-between">
      <span class="text-sm flex items-center gap-2">
        {% if invite.channel == "email" %}
          <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">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
        {% 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">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
        {% endif %}
        <span class="font-medium">{{ invite.address }}</span>
      </span>
      <div class="flex items-center gap-2">
        <span class="text-xs text-yellow-700 font-medium">Pending</span>
        <button type="button" 
                onclick="cancelInvite('{{ invite.id }}')"
                class="text-red-600 hover:text-red-800 text-xs font-medium">
          Cancel
        </button>
      </div>
    </div>
    <div class="flex gap-3 mt-1 ml-6">
      <!-- Inbound permission indicator -->
      <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>
      <!-- Outbound permission indicator -->
      <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>
  </div>
  {% endfor %}
  <div class="border-t border-gray-200 my-2"></div>
  {% endif %}
  
  <!-- Manual Allowlist Entries -->
  {% if allowlist_entries %}
  <div class="text-xs text-gray-500 mb-2 font-medium">Allowed Contacts:</div>
  {% for entry in allowlist_entries %}
  <div class="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg group hover:bg-gray-100 border border-gray-200 mb-2">
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <span class="text-sm flex items-center gap-2">
          {% if entry.channel == "email" %}
            <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">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
          {% 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">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
            </svg>
          {% endif %}
          <span class="font-medium">{{ entry.address }}</span>
        </span>
        <button type="button"
                onclick="removeAllowlistEntry('{{ entry.id }}')"
                class="text-xs text-red-600 hover:text-red-800 opacity-0 group-hover:opacity-100 transition-opacity ml-2">
          Remove
        </button>
      </div>
      <div class="flex gap-3 mt-1 ml-6">
        <!-- Inbound permission indicator -->
        <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>
        <!-- Outbound permission indicator -->
        <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>
    </div>
  </div>
  {% endfor %}
  {% endif %}
  
  {% if not allowlist_entries and not pending_invites %}
  <div class="text-sm text-gray-500 py-2">
    No additional contacts configured yet.
  </div>
  {% endif %}
</div>