{{ define "content" }}
<div class="card">
    <div class="card-header">
        <h1 class="card-title">Dashboard</h1>
        <p class="card-subtitle">Welcome back, {{ .UserEmail }}</p>
    </div>

    {{ if eq .TotalProcessed 0 }}
    <div class="alert alert-info mt-3" style="background: #e0f2fe; border: 1px solid #7dd3fc; border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-md);">
        <strong>Getting Started:</strong> You haven't processed any emails yet.
        Go to <a href="/settings" style="color: var(--primary);">Email Settings</a> to configure your IMAP account,
        then click <strong>"Process Now"</strong> to start classifying your inbox.
    </div>
    {{ end }}
    
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">{{ .TotalProcessed }}</div>
            <div class="stat-label">Emails Processed</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ .Stats.Important }}</div>
            <div class="stat-label">Important</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ .Stats.Ecommerce }}</div>
            <div class="stat-label">eCommerce</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ .Stats.Other }}</div>
            <div class="stat-label">Other</div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Processing Status</h2>
        </div>
        
        <div class="form-group">
            <label class="form-label">Worker Status</label>
            <div class="form-input" style="background-color: {{ if .WorkerRunning }}#d1fae5{{ else }}#fee2e2{{ end }};">
                {{ if .WorkerRunning }}🟢 Running{{ else }}🔴 Stopped{{ end }}
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">Last Processed</label>
            <div class="form-input">
                {{ if .LastProcessed }}
                    {{ .LastProcessed.Format "2006-01-02 15:04:05" }}
                {{ else }}
                    Never
                {{ end }}
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">Test Mode</label>
            <form method="POST" action="/toggle-test-mode" class="mt-2">
                <button type="submit" class="btn {{ if .TestMode }}btn-warning{{ else }}btn-secondary{{ end }}">
                    {{ if .TestMode }}Disable{{ else }}Enable{{ end }} Test Mode
                </button>
                <p class="text-light mt-1">
                    {{ if .TestMode }}
                    Test mode is ON - AI decisions are logged but emails are not moved.
                    {{ else }}
                    Test mode is OFF - Emails will be automatically moved to folders.
                    {{ end }}
                </p>
            </form>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Quick Actions</h2>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md);">
            <a href="/settings" class="btn btn-secondary">Email Settings</a>
            <a href="/process-now" class="btn btn-primary">Process Now</a>
            <a href="/logs" class="btn btn-secondary">View Logs</a>
            <a href="/logout" class="btn btn-danger">Logout</a>
        </div>
    </div>
</div>
{{ end }}

{{ template "base" . }}