{% extends "dashboard/base_dashboard.html" %}
{% load humanize %}

{% block dashboard_section_content %}
<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Students</h4>
        <h3 style="margin-bottom: 4px;">{{ total_students_active|intcomma }}</h3>
        <p class="text-muted">Active</p>
        <p style="margin-bottom: 0;">Inactive: {{ total_students_inactive|intcomma }}</p>
        {% with total_students=total_students_active|add:total_students_inactive %}
        {% widthratio total_students_active total_students 100 as students_active_rate %}
        <div class="kpi-mini-chart">
          <div class="kpi-mini-track">
            <span class="kpi-mini-fill success" style="width: {{ students_active_rate }}%;"></span>
          </div>
          <div class="kpi-mini-caption">Active share: {{ students_active_rate }}%</div>
        </div>
        {% endwith %}
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Teachers</h4>
        <h3 style="margin-bottom: 4px;">{{ total_teachers|intcomma }}</h3>
        <p class="text-muted">Academic staff</p>
        <p style="margin-bottom: 0;">Classes: {{ total_classes|intcomma }} | Streams: {{ total_streams|intcomma }}</p>
        {% with teaching_units=total_classes|add:total_streams %}
        {% widthratio total_classes teaching_units 100 as class_share %}
        {% widthratio total_streams teaching_units 100 as stream_share %}
        <div class="kpi-mini-chart">
          <div class="kpi-mini-twin">
            <span class="left" style="height: {{ class_share }}%;"></span>
            <span class="right" style="height: {{ stream_share }}%;"></span>
          </div>
          <div class="kpi-mini-caption">Class vs stream footprint</div>
        </div>
        {% endwith %}
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Fees Collected</h4>
        <h3 style="margin-bottom: 4px;">UGX {{ total_fees_collected|floatformat:0|intcomma }}</h3>
        <p class="text-muted">Expected: UGX {{ total_fees_expected|floatformat:0|intcomma }}</p>
        <p style="margin-bottom: 0;">Rate: {{ collection_rate|floatformat:1 }}%</p>
        <div class="kpi-mini-chart">
          <div class="kpi-mini-track">
            <span class="kpi-mini-fill success" style="width: {{ collection_rate|floatformat:0 }}%;"></span>
          </div>
          <div class="kpi-mini-caption">Collection progress</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Outstanding</h4>
        <h3 style="margin-bottom: 4px;">UGX {{ outstanding_fees|floatformat:0|intcomma }}</h3>
        <p class="text-muted">Pending balances</p>
        <p style="margin-bottom: 0;">Attendance today: {{ attendance_today_rate|floatformat:1 }}%</p>
        {% widthratio outstanding_fees total_fees_expected 100 as outstanding_rate %}
        <div class="kpi-mini-chart">
          <div class="kpi-mini-track">
            <span class="kpi-mini-fill danger" style="width: {{ outstanding_rate }}%;"></span>
          </div>
          <div class="kpi-mini-caption">Outstanding load: {{ outstanding_rate }}%</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-exclamation-triangle"></i> Alerts</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Alert</th>
              <th>Count</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% for alert in overview_alerts %}
            <tr>
              <td>{{ alert.label }}</td>
              <td>{{ alert.count|floatformat:0|intcomma }}</td>
              <td><a href="{{ alert.url }}" class="btn btn-xs btn-primary">Open</a></td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="3" class="text-center text-muted">No active alerts.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-bolt"></i> Quick Actions</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <div class="row">
          {% for action in overview_quick_actions %}
          <div class="col-sm-6" style="margin-bottom: 10px;">
            <a href="{{ action.url }}" class="btn btn-default btn-block">
              <i class="fa {{ action.icon }}"></i> {{ action.label }}
            </a>
          </div>
          {% endfor %}
        </div>
        <hr>
        <p class="text-muted" style="margin-bottom: 0;">Attendance this week: <strong>{{ attendance_week_rate|floatformat:1 }}%</strong></p>
      </div>
    </div>
  </div>
</div>
{% endblock %}