Grouping within matrix

Folllowing: Transpose and pivot data in a Django project - Martin Noah

Trying to achieve having grouping within the matrix as shown in the pic down (just rough idea of presentation).

Facing 2 issues.

  1. I need the grouping of ‘area’ as shown. But For each ‘Avl’ value the ‘area’ value is repeated. How to group as shown or show distinct value?

  2. I am displaying 2 diff icons as per value of ‘Yes’ or ‘No’. But only 1 icon is getting reflected irrespective of the values.

Need assistance to solve the issues. - Thank you!

def AvailabilityMatrix(request):

    Occupied = Area.objects.annotate(
        till=Cast(Concat('to_date', Value(" "),'to_time', output_field=DateTimeField()),output_field=DateTimeField()),

    TotalAvl = Avls.objects.annotate(
            When(Avl_id__in=Occupied, then=Value('No')),

    TotalAvl_transpose = defaultdict(list)
    for avl in TotalAvls:
        TotalAvls_transpose[Avl["monId"]].append((Avl["AvlId"], Avl["is_available"]))

    cols = max(TotalAvls_transpose.values())

    context = {
    return render(request,'Area/Avl_availability_matrix.html',context)


<table  class="table table-hover">
    {% for monId, TotalAvls in TotalAvls_transpose.items %}
            <td>{{ monId }}</td>
            {% for area in TotalAvls %} 
                <td> area {{area.0}}                          
                    {% if area.1 == 'Yes' %}
                    <i class="fa fa-solid fa-chart-area"></i>
                    {% else %}                        
                    <i class="fa fa-regular fa-chart-area"></i>
                    {% endif %} 
            {% endfor %}
    {% endfor %}