{% 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" 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 p-0">
      <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-sm-25">
            <!-- Start: Incomming -->
            <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">Black Smith</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-gray">
                          <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>
            <!-- End: Incomming -->
            <!-- Start: Outgoing -->
            <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>
            <!-- End: Outgoing  -->
            <!-- Start: Incomming -->
            <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-gray">
                          <p class="color-white">Jam nonumy eirmod tempor invidunt ut
                            labore</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End: Incomming -->
            <!-- Start: Outgoing -->
            <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>
            <!-- End: Outgoing  -->
            <!-- Start: Incomming -->
            <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>
            <!-- End: Incomming -->
          </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><!-- ends: .chat-->
    </div>
    <!-- ends: .card-body -->
  </div>