{% extends "admin/base_site.html" %}
{% load static %}

{% block title %}{{ page_title }} | Django Admin{% endblock %}

{% block content %}
<div class="system-health-monitor">
    <h1>{{ page_title }}</h1>
    
    <div class="health-summary" style="margin: 20px 0; padding: 20px; border-radius: 8px; background: {% if overall_status == 'healthy' %}#d4edda{% elif overall_status == 'warning' %}#fff3cd{% else %}#f8d7da{% endif %}; border: 1px solid {% if overall_status == 'healthy' %}#c3e6cb{% elif overall_status == 'warning' %}#ffeaa7{% else %}#f5c6cb{% endif %};">
        <h2 style="margin: 0 0 10px 0; color: {% if overall_status == 'healthy' %}#155724{% elif overall_status == 'warning' %}#856404{% else %}#721c24{% endif %};">
            {% if overall_status == 'healthy' %}✓{% elif overall_status == 'warning' %}⚠{% else %}✗{% endif %} {{ overall_message }}
        </h2>
        <p style="margin: 0; color: #666;">Last checked: {{ checked_at|date:"Y-m-d H:i:s" }}</p>
    </div>
    
    <div class="health-checks" style="margin: 20px 0;">
        {% for check in checks %}
        <div class="health-check" style="margin: 15px 0; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff;">
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                <span style="font-size: 24px; margin-right: 10px;">
                    {% if check.status == 'healthy' %}✓{% elif check.status == 'warning' %}⚠{% else %}✗{% endif %}
                </span>
                <div style="flex: 1;">
                    <h3 style="margin: 0; font-size: 18px;">{{ check.name }}</h3>
                    <p style="margin: 5px 0 0 0; color: {% if check.status == 'healthy' %}#28a745{% elif check.status == 'warning' %}#ffc107{% else %}#dc3545{% endif %};">
                        {{ check.message }}
                    </p>
                </div>
                <span class="badge" style="padding: 5px 15px; border-radius: 12px; font-size: 12px; font-weight: bold; background: {% if check.status == 'healthy' %}#28a745{% elif check.status == 'warning' %}#ffc107{% else %}#dc3545{% endif %}; color: white;">
                    {{ check.status|upper }}
                </span>
            </div>
            
            {% if check.details %}
            <div class="details" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee;">
                <table style="width: 100%; font-size: 14px;">
                    {% for key, value in check.details.items %}
                    <tr>
                        <td style="padding: 5px 10px; color: #666; width: 200px;">{{ key|title }}:</td>
                        <td style="padding: 5px 10px; font-family: monospace;">{{ value }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    
    <div style="margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 8px;">
        <p style="margin: 0; color: #666; font-size: 14px;">
            <strong>Note:</strong> This page shows real-time system health. Refresh to get latest status.
            <a href="{% url 'admin:monitoring_system_health' %}" style="margin-left: 10px;">Refresh Now</a>
        </p>
    </div>
</div>

<style>
.system-health-monitor {
    max-width: 1200px;
    margin: 0 auto;
}
</style>
{% endblock %}
