{% extends 'base.html' %}
{% load i18n static custom_filters %}
{% block title %}
  {{ _('Car Details') }}
{% endblock %}

{% block content %}
  <div class="row">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade active show" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">        
         <div class="row gx-xl-8 gx-xxl-11">
          <div class="col-xl-5 p-xxl-7">
            <div class="ms-xxl-3 d-none d-xl-block position-sticky" style="top: 30%"><img class="d-dark-none img-fluid" src="../assets/img/spot-illustrations/timeline.png" alt="" /><img class="d-light-none img-fluid" src="../assets/img/spot-illustrations/timeline-dark.png" alt="" /></div>
          </div>
          <div class="col-xl-12 scrollbar">
            <div>
              <h4 class="py-3 border-y mb-5 ms-8">{{_('History')}}</h4>
              <div class="timeline-basic mb-9">
                {% for activity in activities %}
                  <div class="timeline-item">
                    <div class="row g-3">
                      <div class="col-auto">
                        <div class="timeline-item-bar position-relative">
                          <div class="icon-item icon-item-md rounded-7 border border-translucent"><span class="fa-solid fa-clipboard text-success fs-9"></span></div><span class="timeline-bar border-end border-dashed"></span>
                        </div>
                      </div>
                      <div class="col">
                        <div class="d-flex justify-content-between">
                          <div class="d-flex mb-2">
                            <h6 class="lh-sm mb-0 me-2 text-body-secondary timeline-item-title">{{activity.content_object}}</h6>
                          </div>
                          <p class="text-body-quaternary fs-9 mb-0 text-nowrap timeline-time"><span class="fa-regular fa-clock me-1"></span>{{activity.created}}</p>
                        </div>
                        <h6 class="fs-10 fw-normal mb-3">by <a class="fw-semibold" href="#!">{{activity.created_by}}</a></h6>
                        <p class="fs-9 text-body-secondary w-sm-60 mb-5">{{activity.notes}}.</p>
                      </div>
                    </div>
                  </div>                              
                {% endfor %}
              </div>                                                   
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}