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

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

{% block content %}
<!-- Page Header -->
<div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">
        <span class="neon-text">Phone</span> Calls
    </h1>
    <p class="text-text-secondary">Call history with transcript and audio recording</p>
</div>

<!-- Stats Row -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
    <div class="glass-card rounded-xl p-5 border border-accent-cyan/20">
        <div class="flex items-center justify-between mb-2">
            <span class="text-text-secondary text-sm">TOTAL CALLS</span>
            <span class="text-accent-cyan">&#9670;</span>
        </div>
        <div class="text-3xl font-bold font-mono-data text-accent-cyan">{{ total_calls }}</div>
    </div>
    <div class="glass-card rounded-xl p-5 border border-accent-purple/20">
        <div class="flex items-center justify-between mb-2">
            <span class="text-text-secondary text-sm">AVG DURATION</span>
            <span class="text-accent-purple">&#9671;</span>
        </div>
        <div class="text-3xl font-bold font-mono-data text-accent-purple">{{ avg_duration }}s</div>
    </div>
    <div class="glass-card rounded-xl p-5 border border-accent-green/20">
        <div class="flex items-center justify-between mb-2">
            <span class="text-text-secondary text-sm">RECORDED</span>
            <span class="text-accent-green">&#9733;</span>
        </div>
        <div class="text-3xl font-bold font-mono-data text-accent-green">{{ recorded_count }}</div>
    </div>
</div>

<!-- Call List -->
<div class="space-y-3">
{% for call in calls %}
    <a href="/dashboard/calls/{{ call.id }}"
       class="glass-card block rounded-xl p-5 border border-accent-cyan/10 hover:border-accent-cyan/30 transition-colors">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center
                    {% if call.direction == 'outbound' %}bg-accent-cyan/10 text-accent-cyan{% else %}bg-accent-purple/10 text-accent-purple{% endif %}">
                    {% if call.direction == 'outbound' %}&#8599;{% else %}&#8601;{% endif %}
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-text-primary font-medium">{{ call.phone_number or "Unknown" }}</span>
                        <span class="px-2 py-0.5 text-xs rounded-full
                            {% if call.status == 'completed' %}bg-accent-green/10 text-accent-green
                            {% elif call.status == 'active' %}bg-accent-cyan/10 text-accent-cyan
                            {% else %}bg-accent-red/10 text-accent-red{% endif %}">
                            {{ call.status }}
                        </span>
                    </div>
                    <div class="text-text-muted text-sm mt-1">
                        {{ call.started_at|relative_time }}
                        &middot; {{ call.exchange_count }} exchange{{ "s" if call.exchange_count != 1 else "" }}
                        {% if call.duration_seconds %}
                        &middot; {{ "%.0f"|format(call.duration_seconds) }}s
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="text-text-muted">
                {% if call.recording_path %}
                <span class="text-accent-green text-sm">&#9835;</span>
                {% endif %}
                <span class="text-sm">&#8594;</span>
            </div>
        </div>
    </a>
{% endfor %}

{% if not calls %}
    <div class="glass-card rounded-xl p-12 text-center">
        <p class="text-text-muted text-lg">No calls yet</p>
        <p class="text-text-muted text-sm mt-2">Make an outbound call to see it logged here</p>
    </div>
{% endif %}
</div>
{% endblock %}