{% 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 %}