{% load static %}
<div class="card border-0">
    <div class="card-header border-0">
        <h6>chat</h6>
        <div class="card-extra">
            <div class="dropdown dropleft">
                <a href="#" role="button" id="revenue4" 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" aria-labelledby="revenue4">
                    <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>
    <div class="card-body p-0 pb-10">
        <div class="chat mini-chat">
            <div class="chat-body bg-white radius-xl">
                <div class="chat-box chat-box--small l-lg-10 pe-lg-20 pt-10 px-25">
                    <div class="flex-1 incoming-chat">
                        <div class="chat-text-box">
                            <div class="media ">
                                <div class="chat-text-box__photo ">
                                    <img src="{% static 'img/author/1.jpg' %}" class="align-self-start me-15 wh-46" alt="img">
                                </div>
                                <div class="media-body">
                                    <div class="chat-text-box__content">
                                        <div class="chat-text-box__title d-flex align-items-center">
                                            <h6 class="fs-14">Domnic Harys</h6>
                                            <span class="chat-text-box__time fs-12 color-light fw-400 ms-25">8:30
                                                PM</span>
                                        </div>
                                        <div class="d-flex align-items-center mt-10">
                                            <div class="chat-text-box__subtitle p-20 bg-secondary">
                                                <p class="color-white">Jam nonumy eirmod tsadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 justify-content-end d-flex outgoing-chat mt-15">
                        <div class="chat-text-box">
                            <div class="media ">
                                <div class="media-body">
                                    <div class="chat-text-box__content">
                                        <div class="chat-text-box__title d-flex align-items-center justify-content-end">
                                            <span class="chat-text-box__time fs-12 color-light fw-400">8:30
                                                PM</span>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-end">
                                            <div class="chat-text-box__subtitle p-20 bg-deep">
                                                <p class="color-gray">Jam nonumy eirmod tsadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et </p>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 incoming-chat mt-15">
                        <div class="chat-text-box">
                            <div class="media ">
                                <div class="chat-text-box__photo ">
                                    <img src="{% static 'img/author/1.jpg' %}" class="align-self-start me-15 wh-46" alt="img">
                                </div>
                                <div class="media-body">
                                    <div class="chat-text-box__content">
                                        <div class="chat-text-box__title d-flex align-items-center">
                                            <h6 class="fs-14">Domnic Harys</h6>
                                            <span class="chat-text-box__time fs-12 color-light fw-400 ms-2">8:30
                                                PM</span>
                                        </div>
                                        <div class="d-flex align-items-center mt-10">
                                            <div class="chat-text-box__subtitle p-20 bg-secondary">
                                                <p class="color-white">Jam nonumy eirmod tempor invidunt ut
                                                    labore
                                                    et dolore magna.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 justify-content-end d-flex outgoing-chat">
                        <div class="chat-text-box">
                            <div class="media ">
                                <div class="media-body">
                                    <div class="chat-text-box__content">
                                        <div class="chat-text-box__title d-flex align-items-center justify-content-end mt-10">
                                            <span class="chat-text-box__time fs-12 color-light fw-400">8:30
                                                PM</span>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-end">
                                            <div class="chat-text-box__subtitle p-20 bg-deep">
                                                <p class="color-gray">Jam nonumy eirmod tempor invidunt ut
                                                    labore et
                                                    dolore magna.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 incoming-chat mt-30">
                        <div class="chat-text-box">
                            <div class="media ">
                                <div class="chat-text-box__photo ">
                                    <img src="{% static 'img/author/1.jpg' %}" class="align-self-start me-15 wh-46" alt="img">
                                </div>
                                <div class="media-body">
                                    <div class="chat-text-box__content">
                                        <div class="d-flex align-items-center ">
                                            <div class="chat-text-box__subtitle typing bg-lighters pe-30">
                                                <p class="color-light text-capitalize">typing...</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-footer ps-25 pe-15 pb-30 pt-20">
                    <div class="chat-type-text">
                        <div class="pt-0 outline-0 pb-0 pe-0 ps-0 rounded-0 position-relative d-flex align-items-center" tabindex="-1">
                            <div class="d-flex justify-content-between align-items-center w-100 flex-wrap">
                                <div class="bg-lighters flex-1 d-flex align-items-center chat-type-text__write ms-0">
                                    <a href="#">
                                        <img class="svg" src="{% static 'img/svg/smile.svg' %}" alt="smile">
                                    </a>
                                    <input class="form-control border-0 bg-transparent box-shadow-none" placeholder="Type your message...">
                                </div>
                                <div class="chat-type-text__btn">
                                    <button type="button" class="border-0 bg-secondary wh-50 p-10 rounded-circle color-svgDF-white">
                                        <img class="svg" src="{% static 'img/svg/send.svg' %}" alt="send">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>