{% load helpers %}

<div class="card">
    <h5 class="card-header">Active / Upcoming Maintenance</h5>
    <div class="card-body p-0">
        {% if active_maintenance %}
        <div class="table-responsive">
            <table class="table table-hover object-list mb-0">
                <thead>
                <tr>
                    <th>Maintenance ID</th>
                    <th>Start</th>
                    <th>End</th>
                    <th>Status</th>
                    <th>Impact</th>
                </tr>
                </thead>
                <tbody>
                {% for maintenance in active_maintenance %}
                <tr>
                    <td>{{ maintenance.circuitmaintenance|linkify }}</td>
                    <td>{{ maintenance.circuitmaintenance.start }}</td>
                    <td>{{ maintenance.circuitmaintenance.end }}</td>
                    <td>{% badge maintenance.circuitmaintenance.get_status_display bg_color=maintenance.circuitmaintenance.get_status_color %}</td>
                    <td>{% badge maintenance.get_impact_display bg_color=maintenance.get_impact_color %}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-muted p-3">None</div>
        {% endif %}
    </div>
</div>