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

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

{% block content %}
<div class="api-monitor">
    <h1>{{ page_title }}</h1>
    
    <div class="api-summary" style="margin: 20px 0; padding: 20px; border-radius: 8px; background: #f8f9fa; border: 1px solid #dee2e6;">
        <h2 style="margin: 0 0 15px 0;">API Health Overview</h2>
        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;">
            <div style="padding: 15px; background: white; border-radius: 8px; border: 1px solid #dee2e6; text-align: center;">
                <div style="font-size: 32px; font-weight: bold; color: #333;">{{ stats.total }}</div>
                <div style="color: #666; margin-top: 5px;">Total Endpoints</div>
            </div>
            <div style="padding: 15px; background: white; border-radius: 8px; border: 1px solid #28a745; text-align: center;">
                <div style="font-size: 32px; font-weight: bold; color: #28a745;">{{ stats.healthy }}</div>
                <div style="color: #666; margin-top: 5px;">Healthy</div>
            </div>
            <div style="padding: 15px; background: white; border-radius: 8px; border: 1px solid #ffc107; text-align: center;">
                <div style="font-size: 32px; font-weight: bold; color: #ffc107;">{{ stats.warnings }}</div>
                <div style="color: #666; margin-top: 5px;">Warnings</div>
            </div>
            <div style="padding: 15px; background: white; border-radius: 8px; border: 1px solid #dc3545; text-align: center;">
                <div style="font-size: 32px; font-weight: bold; color: #dc3545;">{{ stats.errors }}</div>
                <div style="color: #666; margin-top: 5px;">Errors</div>
            </div>
        </div>
        <p style="margin: 15px 0 0 0; color: #666;">Last checked: {{ checked_at|date:"Y-m-d H:i:s" }}</p>
    </div>
    
    {% for group in endpoint_groups %}
    <div class="endpoint-group" style="margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff;">
        <h3 style="margin: 0 0 15px 0; font-size: 18px; color: #333;">{{ group.name }}</h3>
        
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                    <th style="padding: 10px; text-align: left; font-weight: 600;">Endpoint</th>
                    <th style="padding: 10px; text-align: center; font-weight: 600; width: 100px;">Method</th>
                    <th style="padding: 10px; text-align: center; font-weight: 600; width: 100px;">Status</th>
                    <th style="padding: 10px; text-align: center; font-weight: 600; width: 120px;">Response Time</th>
                    <th style="padding: 10px; text-align: left; font-weight: 600; width: 150px;">Message</th>
                </tr>
            </thead>
            <tbody>
                {% for endpoint in group.endpoints %}
                <tr style="border-bottom: 1px solid #eee;">
                    <td style="padding: 10px; font-family: monospace; font-size: 13px;">{{ endpoint.path }}</td>
                    <td style="padding: 10px; text-align: center;">
                        <span style="padding: 3px 8px; background: #6c757d; color: white; border-radius: 4px; font-size: 11px; font-weight: bold;">
                            {{ endpoint.method }}
                        </span>
                    </td>
                    <td style="padding: 10px; text-align: center;">
                        <span style="padding: 3px 12px; background: {% if endpoint.status == 'healthy' %}#28a745{% elif endpoint.status == 'warning' %}#ffc107{% else %}#dc3545{% endif %}; color: white; border-radius: 4px; font-size: 11px; font-weight: bold;">
                            {% if endpoint.status_code %}{{ endpoint.status_code }}{% else %}ERR{% endif %}
                        </span>
                    </td>
                    <td style="padding: 10px; text-align: center; font-family: monospace; color: #666;">
                        {{ endpoint.response_time|default:"—" }}
                    </td>
                    <td style="padding: 10px; color: #666; font-size: 13px;">
                        {{ endpoint.message }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endfor %}
    
    <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 tests API endpoints from the server. Authentication-required endpoints may show 401 (expected).
            <a href="{% url 'admin:monitoring_api_monitor' %}" style="margin-left: 10px;">Refresh Now</a>
        </p>
    </div>
</div>

<style>
.api-monitor {
    max-width: 1400px;
    margin: 0 auto;
}
</style>
{% endblock %}
