{% load static %}

<div class="card border-0 card-timeline h-100">
    <div class="card-header border-0">
        <h6>Timeline</h6>
        <div class="card-extra">
            <div class="dropdown dropleft">
                <a href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src="{% static 'img/svg/more-horizontal.svg' %}" alt="more-horizontal" class="svg">
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
        </div>
    </div>
    <!-- ends: .card-header -->
    <div class="card-body pb-15 mt-n15 pt-0">
        <div class="card-timeline-body">
            <ul>
                <li>
                    <div class="card-timeline-body__left">
                        <div class="card-timeline-body__title">
                            <span class="timeline-line"></span>
                            <span class="badge-dot badge-dot--big dot-primary"></span>
                            <p>Create a services site<span>2015-09-01</span></p>
                        </div>
                    </div>
                    <div class="card-timeline-body__right">
                        <div class="card-timeline-body__time">
                            <span>10 mins ago</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-timeline-body__left">
                        <div class="card-timeline-body__title">
                            <span class="timeline-line"></span>
                            <span class="badge-dot badge-dot--big dot-secondary"></span>
                            <p>Solve initial network problems<span>2015-09-01</span></p>
                        </div>
                    </div>
                    <div class="card-timeline-body__right">
                        <div class="card-timeline-body__time">
                            <span>10 mins ago</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-timeline-body__left">
                        <div class="card-timeline-body__title">
                            <span class="timeline-line"></span>
                            <span class="badge-dot badge-dot--big dot-success"></span>
                            <p>Technical testing<span>2015-09-01</span></p>
                        </div>
                    </div>
                    <div class="card-timeline-body__right">
                        <div class="card-timeline-body__time">
                            <span>10 mins ago</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-timeline-body__left">
                        <div class="card-timeline-body__title">
                            <span class="timeline-line"></span>
                            <span class="badge-dot badge-dot--big dot-info"></span>
                            <p>Network problems being solved<span>2015-09-01</span></p>
                        </div>
                    </div>
                    <div class="card-timeline-body__right">
                        <div class="card-timeline-body__time">
                            <span>10 mins ago</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-timeline-body__left">
                        <div class="card-timeline-body__title">
                            <span class="timeline-line"></span>
                            <span class="badge-dot badge-dot--big dot-warning"></span>
                            <p>Technical testing<span>2015-09-01</span></p>
                        </div>
                    </div>
                    <div class="card-timeline-body__right">
                        <div class="card-timeline-body__time">
                            <span>10 mins ago</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card-timeline-body__left">
                        <div class="card-timeline-body__title">
                            <span class="timeline-line"></span>
                            <span class="badge-dot badge-dot--big dot-danger"></span>
                            <p>Network problems being solved<span>2015-09-01</span></p>
                        </div>
                    </div>
                    <div class="card-timeline-body__right">
                        <div class="card-timeline-body__time">
                            <span>10 mins ago</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- ends: .card-body -->
</div>