{% extends "base.html" %}
{% block title %}Dashboard — Willhaben Tracker{% endblock %}
{% block content %}
<div class="page-header">
    <h2>Dashboard</h2>
</div>

{% if data %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">Total Keywords</div>
        <div style="font-size: 32px; font-weight: 700; margin-top: 8px;">{{ data.total_keywords }}</div>
        <div style="font-size: 12px; color: #0f9b58; margin-top: 4px;">{{ data.active_keywords }} active</div>
    </div>
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">Total Ads</div>
        <div style="font-size: 32px; font-weight: 700; margin-top: 8px;">{{ data.total_ads }}</div>
    </div>
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">Active Users</div>
        <div style="font-size: 32px; font-weight: 700; margin-top: 8px;">{{ data.total_users }}</div>
    </div>
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">Notifications Sent</div>
        <div style="font-size: 32px; font-weight: 700; margin-top: 8px;">{{ data.notifications_sent }}</div>
    </div>
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">Queue Pending</div>
        <div style="font-size: 32px; font-weight: 700; margin-top: 8px;">{{ data.queue_pending }}</div>
    </div>
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">Queue Dead</div>
        <div style="font-size: 32px; font-weight: 700; margin-top: 8px; color: #e94560;">{{ data.queue_dead }}</div>
    </div>
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">Last Scheduler Run</div>
        <div style="font-size: 16px; font-weight: 700; margin-top: 8px;">
            {{ data.last_scheduler.strftime('%Y-%m-%d %H:%M:%S') if data.last_scheduler else 'Never' }}
        </div>
    </div>
    <div class="card">
        <div style="font-size: 12px; color: #a0a0b0; text-transform: uppercase;">HTTP Proxy</div>
        <div style="font-size: 32px; font-weight: 700; margin-top: 8px; color: {{ '#0f9b58' if data.proxy_enabled else '#e94560' }};">
            {{ 'Enabled' if data.proxy_enabled else 'Disabled' }}
        </div>
        <div style="font-size: 12px; color: #a0a0b0; margin-top: 4px;">
            {{ 'Outbound scraping uses the proxy' if data.proxy_enabled else 'Outbound scraping goes direct' }}
        </div>
    </div>
</div>
{% endif %}
{% endblock %}