{% load static %}

<div class="card border-0 h-100">
    <div class="card-header border-0">
        <h6>Team Members </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-30 pt-1">
        <div class="team-members">
            <ul>
                <li>
                    <div class="team-members__left">
                        <img class="rounded-circle" src="{% static 'img/team01.png' %}" alt="">
                        <div class="team-members__title">
                            <h6>Shane Watson</h6>
                        </div>
                    </div>
                    <div class="team-members__middle">
                        <div class="team-members__title--online d-flex align-items-center"><span
                                class="badge-dot dot-success"></span>Online</div>
                    </div>
                    <div class="team-member__right">
                        <div class="team-member__add">
                            <button type="button">add</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="team-members__left">
                        <img class="rounded-circle" src="{% static 'img/team02.png' %}" alt="">
                        <div class="team-members__title">
                            <h6>Chris Dohan</h6>
                        </div>
                    </div>
                    <div class="team-members__middle">
                        <div class="team-members__title--online d-flex align-items-center"><span
                                class="badge-dot dot-success"></span>Online</div>
                    </div>
                    <div class="team-member__right">
                        <div class="team-member__add">
                            <button type="button">add</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="team-members__left">
                        <img class="rounded-circle" src="{% static 'img/team03.png' %}" alt="">
                        <div class="team-members__title">
                            <h6>Robert Clinton</h6>
                        </div>
                    </div>
                    <div class="team-members__middle">
                        <div class="team-members__title--online d-flex align-items-center"><span
                                class="badge-dot dot-success"></span>Online</div>
                    </div>
                    <div class="team-member__right">
                        <div class="team-member__add">
                            <button type="button">add</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="team-members__left">
                        <img class="rounded-circle" src="{% static 'img/team04.png' %}" alt="">
                        <div class="team-members__title">
                            <h6>Daniel White</h6>
                        </div>
                    </div>
                    <div class="team-members__middle">
                        <div class="team-members__title--online d-flex align-items-center"><span
                                class="badge-dot dot-success"></span>Online</div>
                    </div>
                    <div class="team-member__right">
                        <div class="team-member__add">
                            <button type="button">add</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="team-members__left">
                        <img class="rounded-circle" src="{% static 'img/team1.png' %}" alt="">
                        <div class="team-members__title">
                            <h6>Black Smith</h6>
                        </div>
                    </div>
                    <div class="team-members__middle">
                        <div class="team-members__title--online d-flex align-items-center"><span
                                class="badge-dot dot-success"></span>Online</div>
                    </div>
                    <div class="team-member__right">
                        <div class="team-member__add">
                            <button type="button">add</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- ends: .card-body -->
</div>