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

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

{% block content %}
    <div class="alert-banner alert-system">
        ⚠️ SYSTEM ALERT: {{ alert_title }}
    </div>
    
    <div style="margin: 25px 0;">
        <h3 style="color: #343a40; margin-top: 0;">Issue Details</h3>
        <div style="background: #f8f9fa; padding: 15px; border-radius: 6px; border-left: 4px solid #dc3545;">
            <p style="margin: 0; white-space: pre-wrap; font-family: monospace; font-size: 13px;">
                {{ alert_message }}
            </p>
        </div>
    </div>
    
    <div class="stats-grid">
        <div class="stat-item">
            <div class="stat-value">{{ affected_component }}</div>
            <div class="stat-label">Affected Component</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ severity|upper }}</div>
            <div class="stat-label">Severity</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ occurred_at|date:"H:i" }}</div>
            <div class="stat-label">Time (UTC)</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ error_code|default:"N/A" }}</div>
            <div class="stat-label">Error Code</div>
        </div>
    </div>
    
    <div style="margin: 25px 0; padding: 20px; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107;">
        <h4 style="margin-top: 0; color: #856404;">🛠️ Troubleshooting Steps</h4>
        <ul style="margin-bottom: 0; padding-left: 20px;">
            {% for step in troubleshooting_steps %}
            <li>{{ step }}</li>
            {% endfor %}
        </ul>
    </div>
    
    <div style="text-align: center; margin: 30px 0;">
        <a href="{{ admin_url }}" class="action-button" style="background: #6c757d;">
            Go to Admin Panel
        </a>
    </div>
{% endblock %}