<div class="card shadow-sm p-3 mb-4">

    <h6 class="mb-3">
        <i class="bi bi-tools"></i> Maintenance Summary
    </h6>

    <div class="row">

        <div class="col-md-3">
            <div class="border p-2 rounded">
                <small>Total Requests</small>
                <h5>{{ summary.total_requests }}</h5>
            </div>
        </div>

        <div class="col-md-3">
            <div class="border p-2 rounded">
                <small>Pending</small>
                <h5 class="text-warning">{{ summary.pending }}</h5>
            </div>
        </div>

        <div class="col-md-3">
            <div class="border p-2 rounded">
                <small>In Progress</small>
                <h5 class="text-info">{{ summary.in_progress }}</h5>
            </div>
        </div>

        <div class="col-md-3">
            <div class="border p-2 rounded">
                <small>Completed</small>
                <h5 class="text-success">{{ summary.completed }}</h5>
            </div>
        </div>

    </div>

    <hr>

    <div class="row mt-3">

        <div class="col-md-4">
            <strong>Avg Resolution Time:</strong><br>
            {{ summary.avg_resolution_days }} days
        </div>

        <div class="col-md-4">
            <strong>Total Maintenance Cost:</strong><br>
            KES {{ summary.total_cost }}
        </div>

        <div class="col-md-4">
            <strong>Most Common Issue:</strong><br>
            {{ summary.top_issue }}
        </div>

    </div>

</div>