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

{% block title %}Daily Digest - Bitcoin Monitor{% endblock %}

{% block content %}
    <div class="alert-banner alert-digest">
        📊 DAILY DIGEST: {{ date|date:"F d, Y" }}
    </div>
    
    <div style="text-align: center; margin-bottom: 30px;">
        <h2 style="color: #343a40; margin-bottom: 5px;">24-Hour Summary</h2>
        <p style="color: #6c757d; margin-top: 0;">{{ summary_period }}</p>
    </div>
    
    <div class="metric-card">
        <div class="metric-label">Market Status</div>
        <div class="metric-value" style="color: 
            {% if market_status == 'dip' %}#dc3545
            {% elif market_status == 'peak' %}#ffc107
            {% else %}#28a745{% endif %};">
            {{ market_status|upper }}
        </div>
        <div style="color: #6c757d; font-size: 14px;">
            {% if market_status == 'dip' %}Price below yearly average
            {% elif market_status == 'peak' %}Price above yearly average
            {% else %}Price within normal range{% endif %}
        </div>
    </div>
    
    <div class="stats-grid">
        <div class="stat-item">
            <div class="stat-value">${{ current_price|floatformat:2 }}</div>
            <div class="stat-label">Current Price</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">${{ daily_high|floatformat:2 }}</div>
            <div class="stat-label">24h High</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">${{ daily_low|floatformat:2 }}</div>
            <div class="stat-label">24h Low</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ daily_change|floatformat:1 }}%</div>
            <div class="stat-label">24h Change</div>
        </div>
    </div>
    
    <div style="margin: 30px 0;">
        <h3 style="color: #343a40; margin-bottom: 15px;">📈 Market Activity</h3>
        
        <div style="background: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                <span style="color: #6c757d;">Events Today:</span>
                <span style="font-weight: bold;">{{ events_count }}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                <span style="color: #6c757d;">Price Fetches:</span>
                <span style="font-weight: bold;">{{ price_fetches }}</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
                <span style="color: #6c757d;">System Uptime:</span>
                <span style="font-weight: bold;">{{ uptime_percentage|floatformat:1 }}%</span>
            </div>
        </div>
        
        {% if events_today %}
        <div style="background: #e8f4fd; padding: 15px; border-radius: 6px; margin-top: 15px;">
            <h4 style="margin-top: 0; color: #004085;">⚠️ Events Today</h4>
            <ul style="margin-bottom: 0; padding-left: 20px;">
                {% for event in events_today %}
                <li>
                    <strong>{{ event.type|title }}</strong> at 
                    ${{ event.price|floatformat:2 }} ({{ event.time|time:"H:i" }})
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
    
    {% if market_insight %}
    <div class="recommendation">
        <h4 style="margin-top: 0; color: #004085;">📋 Market Insight</h4>
        <p style="margin-bottom: 0;">{{ market_insight }}</p>
    </div>
    {% endif %}
    
    <div style="margin-top: 30px; padding: 15px; background: #f8f9fa; border-radius: 8px; text-align: center;">
        <p style="margin: 0; color: #6c757d;">
            Next digest: Tomorrow at 08:00 UTC
        </p>
    </div>
    
    <div style="text-align: center; margin: 30px 0;">
        <a href="{{ dashboard_url }}" class="action-button">
            View Full Dashboard
        </a>
    </div>
{% endblock %}