{% for i in data %}
<tr id="{{ i.id }}" style="background-color: #d0dee9;">
    <td id="tbl_td"></td>
    <td>{{ i.challan_date }}</td>
    <td>{{ i.vehicle_no }}</td>
    <td>{{ i.vehicle_owner }}</td>
    <td>{{ i.mobile_no }}</td>
    <td>{{ i.violation_type }}</td>
    <td>{{ i.total_fine }}</td>
    <!--<td>{{ i.img1_path }}</td>-->
    <td>   
        <a class="a-inside show_img_model" data-toggle="modal" data-target="#show_image_model" id="{{ i.img1_path}},{{i.img2_path}},{{i.img3_path}},{{i.img4_path }}">
            <i class="fa fa-images" title="View Image"> </i>
        </a>
    </td>

    {% if i.HQ_Approve =="1"  %}
    <td><span style="color: green"><b>APPROVE</b></span></td>
    {% elseif i.HQ_Approve =="0"  %}
    <td>
        <span style="color: red"><b>PENDING</b></span>
        <select id="challan_approve" name="{{ i.id }}">
            <option value="SELECT">SELECT</option>
            <option value="APPROVE">APPROVE</option>
            <option value="DECLINE">DECLINE</option>
        </select>
    </td>
    {% elseif i.HQ_Approve =="2" %}
    <td><span style="color: blueviolet"><b>DECLINE</b></span>
        <select id="challan_approve" name="{{ i.id }}">
            <option value="SELECT">SELECT</option>
            <option value="APPROVE">APPROVE</option>
        </select>
    </td>
    {% endif %}

    {% if i.Is_paid =="PAID"  %}
    <td><span style="color: green"><b>{{ i.Is_paid }}</b></span></td>
    {% else %}
    <td><span style="color: red"><b>{{ i.Is_paid }}</b></span></td>
    {% endif %}
</tr>
{% endfor %}