{% extends "dashboard/base.html" %}

{% block title %}Contacts - Cyborg Dashboard{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">
        <span class="neon-text-cyan">Contact</span> Trust
    </h1>
    <p class="text-text-secondary">Manage contacts and their trust level. Trusted contacts receive permissive email handling; untrusted contacts are treated cautiously.</p>
</div>

<!-- Stats Row -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
    <div class="glass-card neon-border-cyan rounded-xl p-5">
        <div class="text-3xl font-bold font-mono-data text-accent-cyan">{{ total }}</div>
        <div class="text-text-muted text-sm mt-1">Total Contacts</div>
    </div>
    <div class="glass-card rounded-xl p-5">
        <div class="text-3xl font-bold font-mono-data text-accent-green">{{ trusted_count }}</div>
        <div class="text-text-muted text-sm mt-1">Trusted</div>
    </div>
    <div class="glass-card rounded-xl p-5">
        <div class="text-3xl font-bold font-mono-data text-accent-orange">{{ untrusted_count }}</div>
        <div class="text-text-muted text-sm mt-1">Untrusted</div>
    </div>
</div>

<!-- Contact List -->
{% if contacts %}
<div class="space-y-4">
    {% for contact in contacts %}
    <div class="glass-card rounded-xl p-6 card-hover">
        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
            <!-- Contact Info -->
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-3 mb-2">
                    <h3 class="text-lg font-semibold">{{ contact.name }}</h3>
                    {% if contact.is_trusted %}
                    <span class="text-xs px-2 py-0.5 rounded bg-accent-green/20 text-accent-green border border-accent-green/30">Trusted</span>
                    {% else %}
                    <span class="text-xs px-2 py-0.5 rounded bg-accent-orange/20 text-accent-orange border border-accent-orange/30">Untrusted</span>
                    {% endif %}
                    {% if contact.is_default %}
                    <span class="text-xs px-2 py-0.5 rounded bg-accent-purple/20 text-accent-purple border border-accent-purple/30">Default</span>
                    {% endif %}
                </div>
                <div class="flex flex-wrap items-center gap-3 text-xs text-text-muted">
                    <span class="font-mono-data">{{ contact.id[:8] }}</span>
                    <span>{{ contact.phone_number }}</span>
                    {% if contact.email %}
                    <span class="text-text-secondary">{{ contact.email }}</span>
                    {% else %}
                    <span class="text-text-muted/50">no email</span>
                    {% endif %}
                    <span>Added {{ contact.created_at|relative_time }}</span>
                </div>
            </div>

            <!-- Trust Toggle -->
            <form method="POST" action="/dashboard/contacts/{{ contact.id }}/toggle-trust">
                {% if contact.is_trusted %}
                <button type="submit"
                        class="px-4 py-2 bg-accent-red/10 text-accent-red border border-accent-red/30 rounded-lg hover:bg-accent-red/20 transition-colors text-sm font-medium whitespace-nowrap">
                    Revoke Trust
                </button>
                {% else %}
                <button type="submit"
                        class="px-4 py-2 bg-accent-green/10 text-accent-green border border-accent-green/30 rounded-lg hover:bg-accent-green/20 transition-colors text-sm font-medium whitespace-nowrap">
                    Grant Trust
                </button>
                {% endif %}
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="glass-card rounded-xl p-12 text-center">
    <div class="text-4xl mb-4 opacity-50">&#9678;</div>
    <h3 class="text-xl font-semibold mb-2 text-text-secondary">No Contacts</h3>
    <p class="text-text-muted">Contacts will appear here once they are added via the API.</p>
</div>
{% endif %}
{% endblock %}