{% extends "contacts_base.html" %}

{% block title %}Pending Contacts - mc-webui{% endblock %}

{% block navbar_content %}
<span class="navbar-brand mb-0 h1">
    <i class="bi bi-hourglass-split"></i> Pending Contacts
    <span class="badge bg-light text-dark rounded-pill" id="pendingCountBadge" style="display: none;">0</span>
</span>
<div class="d-flex align-items-center gap-2">
    <button class="btn btn-outline-light btn-sm" id="refreshPendingBtn" title="Refresh">
        <i class="bi bi-arrow-clockwise"></i>
    </button>
</div>
{% endblock %}

{% block page_content %}
<div id="pendingPageContent">
    <!-- Back Buttons -->
    <div class="back-buttons">
        <button class="btn btn-outline-secondary" onclick="window.location.href='/contacts/manage';">
            <i class="bi bi-arrow-left"></i> Contact Management
        </button>
        <button class="btn btn-outline-secondary" onclick="window.location.href='/';">
            <i class="bi bi-house"></i> Home
        </button>
    </div>

    <!-- Page Description -->
    <div class="mb-3">
        <p class="text-muted small mb-0">
            <i class="bi bi-info-circle"></i>
            Approve or reject contacts waiting for manual approval.
        </p>
    </div>

    <!-- Loading State -->
    <div id="pendingLoading" class="text-center py-5" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-3 text-muted">Loading pending contacts...</p>
    </div>

    <!-- Empty State -->
    <div id="pendingEmpty" class="empty-state" style="display: none;">
        <i class="bi bi-check-circle"></i>
        <p class="mb-0">No pending requests</p>
        <small class="text-muted">New contact requests will appear here when manual approval is enabled</small>
    </div>

    <!-- Pending Contacts List (Full-screen) -->
    <div id="pendingList" class="contacts-list-fullscreen">
        <!-- Dynamically populated by contacts.js -->
    </div>

    <!-- Error State -->
    <div id="pendingError" class="alert alert-danger" style="display: none;" role="alert">
        <i class="bi bi-exclamation-triangle"></i>
        <span id="pendingErrorMessage">Failed to load pending contacts</span>
    </div>
</div>
{% endblock %}