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

{% block title %}{{ alert_type }} Alert - Bitcoin Monitor{% endblock %}

{% block content %}
    <div class="alert-banner alert-{{ alert_type }}">
        {% if alert_type == 'dip' %}
            🚨 DIP DETECTED: Price is {{ percent_change|floatformat:1 }}% below average
        {% elif alert_type == 'peak' %}
            ⚡ PEAK DETECTED: Price is {{ percent_change|floatformat:1 }}% above average
        {% else %}
            ℹ️ MARKET EVENT DETECTED
        {% endif %}
    </div>
    
    <div class="metric-card">
        <div class="metric-label">Current Bitcoin Price</div>
        <div class="metric-value">${{ current_price|floatformat:2 }}</div>
        <div style="color: #6c757d; font-size: 14px;">
            {% if alert_type == 'dip' %}📉 Below threshold{% else %}📈 Above threshold{% endif %}
        </div>
    </div>
    
    <div class="stats-grid">
        <div class="stat-item">
            <div class="stat-value">{{ threshold_percent }}%</div>
            <div class="stat-label">Threshold</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">${{ yearly_average|floatformat:2 }}</div>
            <div class="stat-label">Yearly Average</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">${{ lower_threshold|floatformat:2 }}</div>
            <div class="stat-label">Lower Bound</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">${{ upper_threshold|floatformat:2 }}</div>
            <div class="stat-label">Upper Bound</div>
        </div>
    </div>
    
    <div style="margin: 25px 0; padding: 20px; background: #f8f9fa; border-radius: 8px;">
        <h3 style="margin-top: 0; color: #343a40;">Event Details</h3>
        <table style="width: 100%; border-collapse: collapse;">
            <tr>
                <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6; color: #6c757d;">Event Type:</td>
                <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6; font-weight: bold; text-align: right;">
                    {{ alert_type|upper }}
                </td>
            </tr>
            <tr>
                <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6; color: #6c757d;">Detected At:</td>
                <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6; text-align: right;">
                    {{ detected_at|date:"M d, Y H:i" }} UTC
                </td>
            </tr>
            <tr>
                <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6; color: #6c757d;">Price Deviation:</td>
                <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6; text-align: right; font-weight: bold;">
                    {{ percent_change|floatformat:1 }}%
                </td>
            </tr>
            <tr>
                <td style="padding: 8px 0; color: #6c757d;">Previous Status:</td>
                <td style="padding: 8px 0; text-align: right;">{{ previous_status|default:"N/A"|title }}</td>
            </tr>
        </table>
    </div>
    
    {% if recommendation %}
    <div class="recommendation">
        <h4 style="margin-top: 0; color: #004085;">💡 Recommendation</h4>
        <p style="margin-bottom: 0;">{{ recommendation }}</p>
    </div>
    {% endif %}
    
    <div style="text-align: center; margin: 30px 0;">
        <a href="{{ dashboard_url }}" class="action-button">
            View Live Dashboard
        </a>
    </div>
{% endblock %}