{% load humanize %}
<div class="row">
    <div class="col-5">
        <div class="row"><h5>Car Location History</h5></div>
        <div class="row no-gutters">
            <div class="col font-weight-bolder">Posted</div>
            <div class="col font-weight-bolder">By</div>
            <div class="col font-weight-bolder">CP Date</div>
            <div class="col font-weight-bolder">OS Date</div>
            <div class="col font-weight-bolder">Location</div>
        </div>
        {% for carloc in carloc_history %}
        <div class="row no-gutters">
            <div class="col">{{ carloc.posted_ts | date }}</div>
            <div class="col">{{ carloc.posted_by.get_username }}</div>
            <div class="col">{{ carloc.cp_date}}</div>
            <div class="col">{% if carloc.os_date %}{{ carloc.os_date}}{% endif %}</div>
            <div class="col">{{ carloc.cloc_id}}</div>
        </div>
        {% endfor %}
    </div>
    <div class="col-7">
        <div class="row"><h5>Car Information History</h5></div>
        <div class="row no-gutters">
            <div class="col font-weight-bolder">Posted</div>
            <div class="col font-weight-bolder ml-4 pl-1">By</div>
            <div class="col-3 font-weight-bolder pl-1">Receiver</div>
            <div class="col font-weight-bolder pl-1">C1</div>
            <div class="col font-weight-bolder">Fill</div>
            <div class="col font-weight-bolder">C2</div>
            <div class="col font-weight-bolder">Fill</div>
            <div class="col font-weight-bolder">C3</div>
            <div class="col font-weight-bolder">Fill</div>
            <div class="col font-weight-bolder">C4</div>
            <div class="col font-weight-bolder">Fill</div>
        </div>
        {% for carinfo in carinfo_history %}
        <div class="row no-gutters">
            <div class="col">{{ carinfo.posted_ts | date }}</div>
            <div class="col pl-1">{{ carinfo.posted_by.get_username }}</div>
            <div class="col-3 pl-1">{% if carinfo.receiver_id %}{{ carinfo.receiver_id}}{% endif %}</div>
            <div class="col">{% if carinfo.c1 %}{{ carinfo.c1}}{% endif %}</div>
            <div class="col text-right pr-3">{% if carinfo.c1fill %}{{ carinfo.c1fill}}{% endif %}</div>
            <div class="col">{% if carinfo.c2 %}{{ carinfo.c2}}{% endif %}</div>
            <div class="col text-right pr-3">{% if carinfo.c2fill %}{{ carinfo.c2fill}}{% endif %}</div>
            <div class="col">{% if carinfo.c3 %}{{ carinfo.c3}}{% endif %}</div>
            <div class="col text-right pr-3">{% if carinfo.c3fill %}{{ carinfo.c3fill}}{% endif %}</div>
            <div class="col">{% if carinfo.c4 %}{{ carinfo.c4}}{% endif %}</div>
            <div class="col text-right pr-3">{% if carinfo.c4fill %}{{ carinfo.c4fill}}{% endif %}</div>
        </div>
        {% endfor %}
    </div>
</div>