{% extends 'superuser/base_super_user.html' %}

{% block title %}SMS Usage Dashboard | Superadmin{% endblock %}
{% block page_title %}SMS Resource Usage{% endblock %}
{% block page_subtitle %}Multi-tenant communication audit dashboard for {{ current_month_name }}.{% endblock %}

{% block extra_css %}
<style>
    .school-card {
        padding: 25px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #f1f5f9;
        transition: 0.3s;
        text-decoration: none;
        display: block;
        position: relative;
        overflow: hidden;
    }
    .school-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        border-color: var(--primary);
    }
    .count-badge {
        font-size: 1.8rem;
        font-weight: 900;
        color: #0f172a;
    }
</style>
{% endblock %}

{% block content %}
<div style="display: flex; gap: 15px; margin-bottom: 35px; align-items: center; background: #fff; padding: 15px 25px; border-radius: 15px; border: 1px solid #f1f5f9;">
    <a href="?month_offset={{ prev_offset }}" class="btn" style="background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; font-size: 0.75rem;">
        <i class="fas fa-chevron-left"></i> PREV MONTH
    </a>
    <div style="font-weight: 850; color: #1e293b; flex: 1; text-align: center; font-size: 1.1rem; letter-spacing: -0.5px;">{{ current_month_name }}</div>
    <a href="?month_offset={{ next_offset }}" class="btn" style="background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; font-size: 0.75rem;">
        NEXT MONTH <i class="fas fa-chevron-right"></i>
    </a>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px;">
    {% for item in school_report %}
    <a href="{% url 'super_school_sms_details' item.school.id %}?month_offset={{ request.GET.month_offset|default:0 }}" class="school-card">
        <div style="font-weight: 850; color: #64748b; font-size: 0.7rem; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px;">{{ item.school.code }}</div>
        <div style="font-weight: 900; color: #0f172a; font-size: 1.15rem; margin-bottom: 20px;">{{ item.school.name }}</div>
        
        <div style="display: flex; align-items: flex-end; justify-content: space-between;">
            <div>
                <div class="count-badge">{{ item.count }}</div>
                <div style="font-size: 0.7rem; color: #94a3b8; font-weight: 800; text-transform: uppercase;">MESSAGES SENT</div>
            </div>
            <div style="background: rgba(79, 70, 229, 0.1); color: var(--primary); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                <i class="fas fa-paper-plane"></i>
            </div>
        </div>

        <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #f8fafc; display: flex; justify-content: space-between; align-items: center;">
            <span style="font-size: 0.72rem; color: #10b981; font-weight: 800;"><i class="fas fa-circle" style="font-size: 0.5rem; margin-right: 5px;"></i> Active Usage</span>
            <span style="font-size: 0.75rem; color: #6366f1; font-weight: 800;">View Details <i class="fas fa-arrow-right"></i></span>
        </div>
    </a>
    {% empty %}
    <div style="grid-column: 1 / -1; text-align: center; padding: 100px; color: #94a3b8;">
        <i class="fas fa-comment-slash" style="font-size: 4rem; opacity: 0.1; display: block; margin-bottom: 20px;"></i>
        No schools found in the system.
    </div>
    {% endfor %}
</div>
{% endblock %}