{% extends 'base.html' %}
{% load i18n static %}

{% block content %}
  <div class="row align-items-center justify-content-between g-3 mb-4">
    <div class="col-12 col-md-auto">
      <h2 class="mb-0">{{ _("Opportunity details")}}</h2>
    </div>
    <div class="col-12 col-md-auto d-flex">
      <button class="btn btn-phoenix-secondary px-3 px-sm-5 me-2"><span class="fa-solid fa-edit me-sm-2"></span><span class="d-none d-sm-inline">{{ _("Edit") }}</span></button>
      <button class="btn btn-phoenix-danger me-2"><span class="fa-solid fa-trash me-2"></span><span>{{ _("Delete") }}</span></button>
      <div>
        <button class="btn px-3 btn-phoenix-secondary" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fa-solid fa-ellipsis"></span></button>
        <ul class="dropdown-menu dropdown-menu-end p-0" style="z-index: 9999;">
          <li>
            {% if opportunity.estimate %}
              <a class="dropdown-item" href="{% url 'estimate_detail' opportunity.estimate.pk %}">{{ _("View Quotation")}}</a>
            {% else %}
              <a class="dropdown-item" href="{% url 'estimate_create_from_opportunity' opportunity.pk %}">{{ _("Create Quotation")}}</a>
            {% endif %}
          </li>
          <li><a class="dropdown-item" href="">Report</a></li>
          <li><a class="dropdown-item" href="">Manage notifications</a></li>
          <li><a class="dropdown-item text-danger" href="">Delete Lead</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row g-4 g-xl-6 other-information">
    <div class="col-xl-5 col-xxl-4">
      <div class="sticky-leads-sidebar">
        <div class="card mb-3">
          <div class="card-body">
            <div class="row align-items-center g-3">
              <div class="col-12 col-sm-auto flex-1">                
                {% if opportunity.car %}
                  <h3 class="fw-bolder mb-2 line-clamp-1">{{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h3>
                {% endif %}                
                  <h3 class="fw-bolder mb-2 line-clamp-1">{{ opportunity.customer.customer_name }}</h3>                
                <div class="d-flex align-items-center mb-4">
                  {% if opportunity.car.finances %}
                  <h5 class="mb-0 me-4">{{ opportunity.car.finances.total }} <span class="fw-light"><span class="currency">{{ CURRENCY }}</span></span></h5>
                  {% endif %}
                </div>
                <div class="d-md-flex d-xl-block align-items-center justify-content-between mb-5">
                  <div class="d-flex align-items-center mb-3 mb-md-0 mb-xl-3">
                    <div class="avatar avatar-xl me-3">
                      {% if opportunity.car.id_car_make.logo %}
                        <img class="rounded" src="{{ opportunity.car.id_car_make.logo.url }}" alt="" />
                      {% endif %}
                    </div>
                    <div>
                      <h5>{{ opportunity.staff.get_local_name}}</h5>
                      <div class="dropdown"><a class="text-body-secondary dropdown-toggle text-decoration-none dropdown-caret-none" href="#!" data-bs-toggle="dropdown" aria-expanded="false">
                          Owner<span class="fa-solid fa-caret-down text-body-secondary fs-9 ms-2"></span></a>
                        <div class="dropdown-menu shadow-sm" style="min-width:20rem">
                          <div class="card position-relative border-0">
                            <div class="card-body p-0">
                              <div class="mx-3">
                                <div class="text-end">
                                  <button class="btn btn-link text-danger" type="button">{{ _("Cancel") }}</button>
                                  <button class="btn btn-sm btn-primary px-5" type="button">{{ _("Save") }}</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div><span class="badge badge-phoenix badge-phoenix-success me-2">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix badge-phoenix-danger me-2">{{ opportunity.get_status_display }}</span></div>
                </div>
                <div class="progress mb-2" style="height:5px">
                  <div class="progress-bar bg-primary-lighter" data-bs-theme="light" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="d-flex align-items-center justify-content-between">
                  <p class="mb-0"> {{ opportunity.get_status_display }}</p>
                  <div><span class="d-inline-block lh-sm me-1" data-feather="clock" style="height:16px;width:16px;"></span><span class="d-inline-block lh-sm"> {{ opportunity.created}}</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="mb-5">{{ _("Other Information")}}</h4>
            <div class="row g-3">
              <div class="col-12">
                <div class="mb-4">
                  <div class="d-flex flex-wrap justify-content-between mb-2">
                    <h5 class="mb-0 text-body-highlight me-2">{{ _("Status") }}</h5>
                      <a href="#" class="fw-bold fs-9" hx-on:click="htmx.find('#id_status').disabled = !htmx.find('#id_status').disabled;this.text = htmx.find('#id_status').disabled ? 'Update Status' : 'Cancel'">{{ _("Update Status")}}</a>
                  </div>
                  {{status_form.status}}                  
                </div>
                <div class="mb-4">
                  <div class="d-flex flex-wrap justify-content-between mb-2">
                    <h5 class="mb-0 text-body-highlight me-2">{{ _("Stage") }}</h5>
                      <a href="#" class="fw-bold fs-9" hx-on:click="htmx.find('#id_stage').disabled = !htmx.find('#id_stage').disabled;this.text = htmx.find('#id_stage').disabled ? 'Update Stage' : 'Cancel'">{{ _("Update Stage")}}</a>
                  </div>
                  {{status_form.stage}}
                </div>                                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-7 col-xxl-8">
      <div class="card mb-5">
        <div class="card-body">
          <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
            <div class="col-sm-auto">
              <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
                <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark" data-feather="dollar-sign" style="width:24px; height:24px"></span></div>
                <div>
                  <p class="fw-bold mb-1">{{ _("Quotation Amount") }}</p>
                  <h4 class="fw-bolder text-nowrap">
                    {% if opportunity.estimate %}
                      {{ opportunity.estimate.get_invoiced_amount.invoice_amount_paid__sum }}
                    {% endif %}
                  </h4>
                </div>
              </div>
            </div>
            <div class="col-sm-auto">
              <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
                <div class="d-flex bg-info-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-info-dark" data-feather="code" style="width:24px; height:24px"></span></div>
                <div>
                  <p class="fw-bold mb-1">Code</p>
                  <h4 class="fw-bolder text-nowrap">PHO1234</h4>
                </div>
              </div>
            </div>
            <div class="col-sm-auto">
              <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
                <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
                <div>
                  <p class="fw-bold mb-1">Type</p>
                  <h4 class="fw-bolder text-nowrap">New Business</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-xl-4 mb-7">
        <div class="row mx-0 mx-sm-3 mx-lg-0 px-lg-0">
          <div class="col-sm-12 col-xxl-6 border-bottom border-end-xxl border-translucent py-3">
            <table class="w-100 table-stats table-stats">
              <tr>
                <th></th>
                <th></th>
                <th></th>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-inline-flex align-items-center">
                    <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-success-dark" data-feather="bar-chart-2" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">Probability (%)</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                <td class="py-2">
                  <p class="ps-6 ps-sm-0 fw-semibold mb-0 mb-0 pb-3 pb-sm-0">{{ opportunity.probability }}</p>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-flex align-items-center">
                    <div class="d-flex bg-info-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-info-dark" data-feather="trending-up" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">{{ _("Estimated Revenue") }}</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:{{opportunity.estimate.get_revenue_estimate}}</td>
                <td class="py-2">
                  <p class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.car.finances.revenue }}</p>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-sm-12 col-xxl-6 border-bottom border-translucent py-3">
            <table class="w-100 table-stats">
              <tr>
                <th></th>
                <th></th>
                <th></th>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-inline-flex align-items-center">
                    <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-primary-dark" data-feather="phone" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">{{ _("Phone Number") }}</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                <td class="py-2"><a class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0 text-body" href="tel:{{ opportunity.customer.phone_number }}">{{ opportunity.customer.phone  }}</a></td>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-flex align-items-center">
                    <div class="d-flex bg-warning-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-warning-dark" data-feather="mail" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">{{ _("Email") }}</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                <td class="py-2"><a class="ps-6 ps-sm-0 fw-semibold mb-0 text-body" href="mailto:{{ opportunity.customer.email}}">{{ opportunity.customer.email}}</a></td>
              </tr>
            </table>
          </div>
          <div class="col-sm-12 col-xxl-6 border-end-xxl border-bottom border-bottom-xxl-0 py-3 border-translucent">
            <table class="w-100 table-stats">
              <tr>
                <th></th>
                <th></th>
                <th></th>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-inline-flex align-items-center">
                    <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-success-dark" data-feather="users" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">{{ _("Contact Name")}}</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                <td class="py-2">
                  <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.customer.get_full_name}}</div>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-flex align-items-center">
                    <div class="d-flex bg-info-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-info-dark" data-feather="edit" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">{{ _("Staff") }}</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                <td class="py-2">
                  <div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.staff.get_local_name}}</div>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-sm-12 col-xxl-6 py-3">
            <table class="w-100 table-stats">
              <tr>
                <th></th>
                <th></th>
                <th></th>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-inline-flex align-items-center">
                    <div class="d-flex bg-info-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-info-dark" data-feather="clock" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">{{ _("Create Date")}}</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                <td class="py-2">
                  <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.created|date}}</div>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="d-flex align-items-center">
                    <div class="d-flex bg-warning-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-warning-dark" data-feather="clock" style="width:16px; height:16px"></span></div>
                    <p class="fw-bold mb-0">{{ _("Closing Date")}}</p>
                  </div>
                </td>
                <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
                <td class="py-2">
                  <div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.closing_date|date}}</div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <ul class="nav nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6" id="myTab" role="tablist" style="overflow-y: hidden;">
        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link active" id="activity-tab" data-bs-toggle="tab" href="#tab-activity" role="tab" aria-controls="tab-activity" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color"></span>Activity</a></li>
        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="notes-tab" data-bs-toggle="tab" href="#tab-notes" role="tab" aria-controls="tab-notes" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-clipboard me-2 tab-icon-color"></span>Notes</a></li>
        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="meeting-tab" data-bs-toggle="tab" href="#tab-meeting" role="tab" aria-controls="tab-meeting" aria-selected="true"> <span class="fa-solid fa-video me-2 tab-icon-color"></span>Meeting</a></li>
        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="task-tab" data-bs-toggle="tab" href="#tab-task" role="tab" aria-controls="tab-task" aria-selected="true"> <span class="fa-solid fa-square-check me-2 tab-icon-color"></span>Task</a></li>
        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="call-tab" data-bs-toggle="tab" href="#tab-call" role="tab" aria-controls="tab-call" aria-selected="true"> <span class="fa-solid fa-phone me-2 tab-icon-color"></span>Call</a></li>
        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="emails-tab" data-bs-toggle="tab" href="#tab-emails" role="tab" aria-controls="tab-emails" aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color"></span>Emails </a></li>
        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="attachments-tab" data-bs-toggle="tab" href="#tab-attachments" role="tab" aria-controls="tab-attachments" aria-selected="true"> <span class="fa-solid fa-paperclip me-2 tab-icon-color"></span>Attachments</a></li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade active show" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
          <h2 class="mb-4">Activity</h2>
          <div class="row align-items-center g-3 justify-content-between justify-content-start">
            <div class="col-12 col-sm-auto">
              <div class="search-box mb-2 mb-sm-0">
                <form class="position-relative">
                  <input class="form-control search-input search" type="search" placeholder="Search Activity" aria-label="Search" />
                  <span class="fas fa-search search-box-icon"></span>

                </form>
              </div>
            </div>
            <div class="col-auto">
              <button class="btn btn-phoenix-primary px-6">Add Activity</button>
            </div>
          </div>
          {% for activity in activities %}
          <div class="border-bottom border-translucent py-4">
            <div class="d-flex">
              <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width:25px; height:25px">
                {% if activity.activity_type == "call" %}
                  <span class="fa-solid fa-phone text-warning fs-8"></span>
                  {% elif activity.activity_type == "email" %}
                  <span class="fa-solid fa-envelope text-info-light fs-8"></span>
                  {% elif activity.activity_type == "visit" %}
                  <span class="fa-solid fa-users text-danger fs-8"></span>
                  {% elif activity.activity_type == "whatsapp" %}
                  <span class="fab fa-whatsapp text-success-dark fs-7"></span>
                {% endif %}                
              </div>
              <div class="flex-1">
                <div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
                  <div class="flex-1 me-2">
                    <h5 class="text-body-highlight lh-sm"></h5>
                    <p class="fs-9 mb-0">by<a class="ms-1" href="#!">{{activity.created_by}}</a></p>
                  </div>
                  <div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{activity.created}}</span></div>
                </div>
                <p class="fs-9 mb-0"></p>
              </div>
            </div>
          </div>
          {% endfor %}          
        </div>
        <div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
          <h2 class="mb-4">Notes</h2>
          <form action="{% url 'add_note_to_opportunity' opportunity.pk %}" method="post">
            {% csrf_token %}
            <textarea class="form-control mb-3" id="notes" rows="4" name="notes" required> </textarea>
            <button type="submit" class="btn btn-primary mb-3">Add Note</button>
          </form>
          <div class="row gy-4 note-list">
            <div class="col-12 col-xl-auto flex-1">
              {% for note in notes %}
              <div class="border-2 border-dashed mb-4 pb-4 border-bottom border-translucent">
                <p class="mb-1 text-body-highlight">{{ note.note }}</p>
                <div class="d-flex">
                  <div class="fs-9 text-body-tertiary text-opacity-85"><span class="fa-solid fa-clock me-2"></span><span class="fw-semibold me-1">{{note.created}}</span></div>
                  <p class="fs-9 mb-0 text-body-tertiary text-opacity-85">by<a class="ms-1 fw-semibold" href="#!">{{note.created_by}}</a></p>
                </div>
              </div>              
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-meeting" role="tabpanel" aria-labelledby="meeting-tab">
          <h2 class="mb-4">Meeting</h2>
          <div class="row align-items-center g-2 flex-wrap justify-content-start mb-3">
            <div class="col-12 col-sm-auto">
              <div class="search-box mb-2 mb-sm-0">
                <form class="position-relative">
                  <input class="form-control search-input search" type="search" placeholder="Search meeting" aria-label="Search" />
                  <span class="fas fa-search search-box-icon"></span>

                </form>
              </div>
            </div>
            <div class="col-auto d-flex flex-md-grow-1">
              <p class="mb-0 fs-9 text-body-tertiary fw-bold"><span class="fas fa-filter me-1 fw-extra-bold fs-10"></span>23 tasks</p>
              <button class="btn btn-link p-0 ms-3 fs-9 text-primary fw-bold text-decoration-none"><span class="fas fa-sort me-1 fw-extra-bold fs-10"></span>Sorting</button>
            </div>
            <div class="col-auto">
              <button class="btn btn-primary"><span class="fa-solid fa-plus me-2"></span>Add Meeting </button>
            </div>
          </div>
          <div class="row g-3">
            <div class="col-xxl-6">
              <div class="card h-100">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start flex-wrap mb-4 gap-2">
                    <div class="mb-3 mb-sm-0">
                      <h4 class="line-clamp-1 mb-2 mb-sm-1">Onboarding Meeting</h4>
                      <div><span class="uil uil-calendar-alt text-primary me-2"></span><span class="fw-semibold text-body-secondary fs-9">5:30 pm</span><span class="text-body-tertiary text-opacity-85"> to </span><span class="fw-semibold text-body-secondary fs-9">7:00pm</span><span class="text-body-secondary fs-9"> - 1h 30min</span></div>
                    </div>
                    <div class="avatar-group avatar-group-dense">
                      <div class="avatar avatar-s  rounded-circle">
                        <img class="rounded-circle " src="../../assets/img/team/9.webp" alt="" />

                      </div>
                      <div class="avatar avatar-s  rounded-circle">
                        <img class="rounded-circle " src="../../assets/img/team/25.webp" alt="" />

                      </div>
                      <div class="avatar avatar-s  rounded-circle">
                        <img class="rounded-circle " src="../../assets/img/team/32.webp" alt="" />

                      </div>
                      <div class="avatar avatar-s  rounded-circle">
                        <img class="rounded-circle " src="../../assets/img/team/35.webp" alt="" />

                      </div>
                      <div class="avatar avatar-s  rounded-circle">
                        <div class="avatar-name rounded-circle "><span>+1</span></div>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex align-items-center"><span class="badge badge-phoenix me-2 badge-phoenix-primary ">today</span>
                    <div class="d-flex align-items-center flex-1"><span class="fa-solid fa-circle me-1 text-danger" data-fa-transform="shrink-6 up-1"></span><span class="fw-bold fs-9 text-body">Urgent</span></div>
                    <button class="btn btn-phoenix-primary"><span class="fa-solid fa-video me-2 d-none d-sm-inline-block"></span>Join</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xxl-6">
              <div class="card h-100">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start flex-wrap mb-4 gap-2">
                    <div class="mb-3 mb-sm-0">
                      <h4 class="line-clamp-1 mb-2 mb-sm-1">Agile Mindset Meetup</h4>
                      <div><span class="uil uil-calendar-alt text-primary me-2"></span><span class="fw-semibold text-body-secondary fs-9">4:30 pm</span><span class="text-body-tertiary text-opacity-85"> to </span><span class="fw-semibold text-body-secondary fs-9">6:00pm</span><span class="text-body-secondary fs-9"> - 1h 30min</span></div>
                    </div>
                    <div class="avatar-group avatar-group-dense">
                      <div class="avatar avatar-s  rounded-circle">
                        <img class="rounded-circle " src="../../assets/img/team/11.webp" alt="" />

                      </div>

                      <div class="avatar avatar-s  rounded-circle">
                        <div class="avatar-name rounded-circle "><span>+1</span></div>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex align-items-center"><span class="badge badge-phoenix me-2 badge-phoenix-warning">tomorrow</span>
                    <div class="d-flex align-items-center flex-1"><span class="fa-solid fa-circle me-1 text-success" data-fa-transform="shrink-6 up-1"></span><span class="fw-bold fs-9 text-body">Medium</span></div>
                    <button class="btn btn-phoenix-primary"><span class="fa-solid fa-video me-2 d-none d-sm-inline-block"></span>Join</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xxl-6">
              <div class="card h-100">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start flex-wrap mb-4 gap-2">
                    <div class="mb-3 mb-sm-0">
                      <h4 class="line-clamp-1 mb-2 mb-sm-1">Meeting Fundamentals</h4>
                      <div><span class="uil uil-calendar-alt text-primary me-2"></span><span class="fw-semibold text-body-secondary fs-9">6:00 pm</span><span class="text-body-tertiary text-opacity-85"> to </span><span class="fw-semibold text-body-secondary fs-9">7:20pm</span><span class="text-body-secondary fs-9"> - 1h 20min</span></div>
                    </div>
                    <div class="avatar-group avatar-group-dense">
                      <div class="avatar avatar-s  rounded-circle">
                        <div class="avatar-name rounded-circle"><span>R</span></div>
                      </div>
                      <div class="avatar avatar-s  rounded-circle">
                        <div class="avatar-name rounded-circle "><span>+2</span></div>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex align-items-center"><span class="badge badge-phoenix me-2 badge-phoenix-warning">tomorrow</span>
                    <div class="d-flex align-items-center flex-1"><span class="fa-solid fa-circle me-1 text-warning" data-fa-transform="shrink-6 up-1"></span><span class="fw-bold fs-9 text-body">High</span></div>
                    <button class="btn btn-phoenix-primary"><span class="fa-solid fa-video me-2 d-none d-sm-inline-block"></span>Join</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xxl-6">
              <div class="card h-100">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start flex-wrap mb-4 gap-2">
                    <div class="mb-3 mb-sm-0">
                      <h4 class="line-clamp-1 mb-2 mb-sm-1">Design System Meeting</h4>
                      <div><span class="uil uil-calendar-alt text-primary me-2"></span><span class="fw-semibold text-body-secondary fs-9">7:30 pm</span><span class="text-body-tertiary text-opacity-85"> to </span><span class="fw-semibold text-body-secondary fs-9">8:45pm</span><span class="text-body-secondary fs-9"> - 1h 45min</span></div>
                    </div>
                    <div class="avatar-group avatar-group-dense">
                      <div class="avatar avatar-s  rounded-circle">
                        <img class="rounded-circle " src="{% static 'images/team/13.webp' %}" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="d-flex align-items-center"><span class="badge badge-phoenix me-2 badge-phoenix-warning">tomorrow</span>
                    <div class="d-flex align-items-center flex-1"><span class="fa-solid fa-circle me-1 text-info" data-fa-transform="shrink-6 up-1"></span><span class="fw-bold fs-9 text-body">Low</span></div>
                    <button class="btn btn-phoenix-primary"><span class="fa-solid fa-video me-2 d-none d-sm-inline-block"></span>Join</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-task" role="tabpanel" aria-labelledby="task-tab">
          <h2 class="mb-4">Tasks</h2>
          <div class="row align-items-center g-0 justify-content-start mb-3">
            <div class="col-12 col-sm-auto">
              <div class="search-box w-100 mb-2 mb-sm-0" style="max-width:30rem;">
                <form class="position-relative">
                  <input class="form-control search-input search" type="search" placeholder="Search tasks" aria-label="Search" />
                  <span class="fas fa-search search-box-icon"></span>

                </form>
              </div>
            </div>
            <div class="col-auto d-flex">
              <p class="mb-0 ms-sm-3 fs-9 text-body-tertiary fw-bold"><span class="fas fa-filter me-1 fw-extra-bold fs-10"></span>23 tasks</p>
              <button class="btn btn-link p-0 ms-3 fs-9 text-primary fw-bold"><span class="fas fa-sort me-1 fw-extra-bold fs-10"></span>Sorting</button>
            </div>
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto flex-1">
              <div data-todo-offcanvas-toogle="data-todo-offcanvas-toogle" data-todo-offcanvas-target="todoOffcanvas-1">
                <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1">
                  <input class="form-check-input flex-shrink-0 form-check-line-through mt-0 me-2 form-check-input-undefined" type="checkbox" id="checkbox-todo-0" />
                  <label class="form-check-label mb-0 fs-8 me-2 line-clamp-1" for="checkbox-todo-0">Platforms for data administration</label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <div class="d-flex ms-4 lh-1 align-items-center">
                <p class="text-body-tertiary fs-10 mb-md-0 me-2 me-lg-3 mb-0">19 Nov, 2022</p>
                <div class="d-none d-lg-block end-0 position-absolute" style="top: 23%;">
                  <div class="hover-actions end-0">
                    <button class="btn btn-phoenix-secondary btn-icon me-1 fs-10 text-body px-0 me-1"><span class="fas fa-edit"></span></button>
                    <button class="btn btn-phoenix-secondary btn-icon fs-10 text-danger px-0"><span class="fas fa-trash"></span></button>
                  </div>
                </div>
                <div class="hover-lg-hide">
                  <p class="text-body-tertiary fs-10 ps-lg-3 border-start-lg fw-bold mb-md-0 mb-0">11:56 PM</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto flex-1">
              <div data-todo-offcanvas-toogle="data-todo-offcanvas-toogle" data-todo-offcanvas-target="todoOffcanvas-2">
                <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1">
                  <input class="form-check-input flex-shrink-0 form-check-line-through mt-0 me-2 form-check-input-undefined" type="checkbox" id="checkbox-todo-1" />
                  <label class="form-check-label mb-0 fs-8 me-2 line-clamp-1" for="checkbox-todo-1">Make wiser business choices.</label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <div class="d-flex ms-4 lh-1 align-items-center">
                <p class="text-body-tertiary fs-10 mb-md-0 me-2 me-lg-3 mb-0">05 Nov, 2022</p>
                <div class="d-none d-lg-block end-0 position-absolute" style="top: 23%;">
                  <div class="hover-actions end-0">
                    <button class="btn btn-phoenix-secondary btn-icon me-1 fs-10 text-body px-0 me-1"><span class="fas fa-edit"></span></button>
                    <button class="btn btn-phoenix-secondary btn-icon fs-10 text-danger px-0"><span class="fas fa-trash"></span></button>
                  </div>
                </div>
                <div class="hover-lg-hide">
                  <p class="text-body-tertiary fs-10 ps-lg-3 border-start-lg fw-bold mb-md-0 mb-0">09:30 PM</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto flex-1">
              <div data-todo-offcanvas-toogle="data-todo-offcanvas-toogle" data-todo-offcanvas-target="todoOffcanvas-3">
                <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1">
                  <input class="form-check-input flex-shrink-0 form-check-line-through mt-0 me-2 form-check-input-undefined" type="checkbox" id="checkbox-todo-2" />
                  <label class="form-check-label mb-0 fs-8 me-2 line-clamp-1" for="checkbox-todo-2">Market and consumer insights</label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <div class="d-flex ms-4 lh-1 align-items-center">
                <p class="text-body-tertiary fs-10 mb-md-0 me-2 me-lg-3 mb-0">02 Nov, 2022</p>
                <div class="d-none d-lg-block end-0 position-absolute" style="top: 23%;">
                  <div class="hover-actions end-0">
                    <button class="btn btn-phoenix-secondary btn-icon me-1 fs-10 text-body px-0 me-1"><span class="fas fa-edit"></span></button>
                    <button class="btn btn-phoenix-secondary btn-icon fs-10 text-danger px-0"><span class="fas fa-trash"></span></button>
                  </div>
                </div>
                <div class="hover-lg-hide">
                  <p class="text-body-tertiary fs-10 ps-lg-3 border-start-lg fw-bold mb-md-0 mb-0">05:25 AM</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto flex-1">
              <div data-todo-offcanvas-toogle="data-todo-offcanvas-toogle" data-todo-offcanvas-target="todoOffcanvas-4">
                <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1">
                  <input class="form-check-input flex-shrink-0 form-check-line-through mt-0 me-2 form-check-input-undefined" type="checkbox" id="checkbox-todo-3" />
                  <label class="form-check-label mb-0 fs-8 me-2 line-clamp-1" for="checkbox-todo-3">Dashboards for business insights</label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <div class="d-flex ms-4 lh-1 align-items-center">
                <p class="text-body-tertiary fs-10 mb-md-0 me-2 me-lg-3 mb-0">29 Oct, 2022</p>
                <div class="d-none d-lg-block end-0 position-absolute" style="top: 23%;">
                  <div class="hover-actions end-0">
                    <button class="btn btn-phoenix-secondary btn-icon me-1 fs-10 text-body px-0 me-1"><span class="fas fa-edit"></span></button>
                    <button class="btn btn-phoenix-secondary btn-icon fs-10 text-danger px-0"><span class="fas fa-trash"></span></button>
                  </div>
                </div>
                <div class="hover-lg-hide">
                  <p class="text-body-tertiary fs-10 ps-lg-3 border-start-lg fw-bold mb-md-0 mb-0">08:21 PM</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto flex-1">
              <div data-todo-offcanvas-toogle="data-todo-offcanvas-toogle" data-todo-offcanvas-target="todoOffcanvas-5">
                <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1">
                  <input class="form-check-input flex-shrink-0 form-check-line-through mt-0 me-2 form-check-input-undefined" type="checkbox" id="checkbox-todo-4" checked="checked" />
                  <label class="form-check-label mb-0 fs-8 me-2 line-clamp-1" for="checkbox-todo-4">Analytics and consultancy for data</label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <div class="d-flex ms-4 lh-1 align-items-center">
                <p class="text-body-tertiary fs-10 mb-md-0 me-2 me-lg-3 mb-0">21 Oct, 2022</p>
                <div class="d-none d-lg-block end-0 position-absolute" style="top: 23%;">
                  <div class="hover-actions end-0">
                    <button class="btn btn-phoenix-secondary btn-icon me-1 fs-10 text-body px-0 me-1"><span class="fas fa-edit"></span></button>
                    <button class="btn btn-phoenix-secondary btn-icon fs-10 text-danger px-0"><span class="fas fa-trash"></span></button>
                  </div>
                </div>
                <div class="hover-lg-hide">
                  <p class="text-body-tertiary fs-10 ps-lg-3 border-start-lg fw-bold mb-md-0 mb-0">03:45 PM</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto flex-1">
              <div data-todo-offcanvas-toogle="data-todo-offcanvas-toogle" data-todo-offcanvas-target="todoOffcanvas-6">
                <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1">
                  <input class="form-check-input flex-shrink-0 form-check-line-through mt-0 me-2 form-check-input-undefined" type="checkbox" id="checkbox-todo-5" checked="checked" />
                  <label class="form-check-label mb-0 fs-8 me-2 line-clamp-1" for="checkbox-todo-5">Planning your locations Customer data platform</label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <div class="d-flex ms-4 lh-1 align-items-center">
                <p class="text-body-tertiary fs-10 mb-md-0 me-2 me-lg-3 mb-0">14 Oct, 2022</p>
                <div class="d-none d-lg-block end-0 position-absolute" style="top: 23%;">
                  <div class="hover-actions end-0">
                    <button class="btn btn-phoenix-secondary btn-icon me-1 fs-10 text-body px-0 me-1"><span class="fas fa-edit"></span></button>
                    <button class="btn btn-phoenix-secondary btn-icon fs-10 text-danger px-0"><span class="fas fa-trash"></span></button>
                  </div>
                </div>
                <div class="hover-lg-hide">
                  <p class="text-body-tertiary fs-10 ps-lg-3 border-start-lg fw-bold mb-md-0 mb-0">10:00 PM</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
            <div class="col-12 col-lg-auto flex-1">
              <div data-todo-offcanvas-toogle="data-todo-offcanvas-toogle" data-todo-offcanvas-target="todoOffcanvas-7">
                <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1">
                  <input class="form-check-input flex-shrink-0 form-check-line-through mt-0 me-2 form-check-input-undefined" type="checkbox" id="checkbox-todo-6" checked="checked" />
                  <label class="form-check-label mb-0 fs-8 me-2 line-clamp-1" for="checkbox-todo-6">Promotion of technology</label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-auto">
              <div class="d-flex ms-4 lh-1 align-items-center">
                <p class="text-body-tertiary fs-10 mb-md-0 me-2 me-lg-3 mb-0">12 Oct, 2022</p>
                <div class="d-none d-lg-block end-0 position-absolute" style="top: 23%;">
                  <div class="hover-actions end-0">
                    <button class="btn btn-phoenix-secondary btn-icon me-1 fs-10 text-body px-0 me-1"><span class="fas fa-edit"></span></button>
                    <button class="btn btn-phoenix-secondary btn-icon fs-10 text-danger px-0"><span class="fas fa-trash"></span></button>
                  </div>
                </div>
                <div class="hover-lg-hide">
                  <p class="text-body-tertiary fs-10 ps-lg-3 border-start-lg fw-bold mb-md-0 mb-0">02:00 AM</p>
                </div>
              </div>
            </div>
          </div><a class="fw-bold fs-9 mt-4" href="#!"><span class="fas fa-plus me-1"></span>Add new task</a>
        </div>
        <div class="tab-pane fade" id="tab-call" role="tabpanel" aria-labelledby="call-tab">
          <div class="row align-items-center gx-4 gy-3 flex-wrap mb-3">
            <div class="col-auto d-flex flex-1">
              <h2 class="mb-0">Call</h2>
            </div>
            <div class="col-auto">
              <div class="d-flex gap-3 gap-sm-4">
                <div class="form-check">
                  <input class="form-check-input" id="allCall" type="radio" name="allCall" checked="checked" />
                  <label class="form-check-label" for="allCall">All Call</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" id="incomingCall" type="radio" name="allCall" />
                  <label class="form-check-label" for="incomingCall">Incoming Call</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" id="outgoingCall" type="radio" name="allCall" />
                  <label class="form-check-label" for="outgoingCall">OutgoingCall</label>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <button class="btn btn-primary"><span class="fa-solid fa-plus me-2"></span>Add Call</button>
            </div>
          </div>
          <div class="border-top border-bottom border-translucent" id="leadDetailsTable" data-list='{"valueNames":["name","description","create_date","create_by","last_activity"],"page":5,"pagination":true}'>
            <div class="table-responsive scrollbar mx-n1 px-1">
              <table class="table fs-9 mb-0">
                <thead>
                  <tr>
                    <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                      <div class="form-check mb-0 fs-8">
                        <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"lead-details-table-body"}' />
                      </div>
                    </th>
                    <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="name" style="width:20%; min-width:100px">Name</th>
                    <th class="sort align-middle pe-6 text-uppercase" scope="col" data-sort="description" style="width:20%; max-width:60px">description</th>
                    <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="create_date" style="width:20%; min-width:115px">create date</th>
                    <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="create_by" style="width:20%; min-width:150px">create by</th>
                    <th class="sort align-middle ps-0 text-end text-uppercase" scope="col" data-sort="last_activity" style="width:20%; max-width:115px">Last Activity</th>
                    <th class="align-middle pe-0 text-end" scope="col" style="width:15%;"></th>
                  </tr>
                </thead>
                <tbody class="list" id="lead-details-table-body">
                  
                  <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                    <td class="fs-9 align-middle px-0 py-3">
                      <div class="form-check mb-0 fs-8">
                        <input class="form-check-input" type="checkbox" data-bulk-select-row='{"Name":{"avatar":"/team/35.webp","name":"Ansolo Lazinatov","status":"online"},"description":"Purchasing-Related Vendors","date":"Dec 29, 2021","creatBy":"Ansolo Lazinarov","lastActivity":{"iconColor":"text-success","label":"Active"}}' />
                      </div>
                    </td>
                    <td class="name align-middle white-space-nowrap py-2 ps-0"><a class="d-flex align-items-center text-body-highlight" href="#!">
                        <div class="avatar avatar-m me-3 status-online"><img class="rounded-circle" src="{% static 'images/team/35.webp' %}" alt="" />
                        </div>
                        <h6 class="mb-0 text-body-highlight fw-bold"></h6>
                      </a></td>
                    <td class="description align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2 pe-6">Purchasing-Related Vendors</td>
                    <td class="create_date text-end align-middle white-space-nowrap text-body py-2">Dec 29, 2021</td>
                    <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">Ansolo Lazinarov</td>
                    <td class="last_activity align-middle text-center py-2">
                      <div class="d-flex align-items-center flex-1"><span class="fa-solid fa-clock me-1 text-success" data-fa-transform="shrink-2 up-1"></span><span class="fw-bold fs-9 text-body">Active</span></div>
                    </td>
                    <td class="align-middle text-end white-space-nowrap pe-0 action py-2">
                      <div class="btn-reveal-trigger position-static">
                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                        <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                          <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
              <div class="col-auto d-flex">
                <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
              </div>
              <div class="col-auto d-flex">
                <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                <ul class="mb-0 pagination"></ul>
                <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-emails" role="tabpanel" aria-labelledby="emails-tab">
          <h2 class="mb-4">Emails</h2>
          <div>
            <div class="scrollbar">
              <ul class="nav nav-underline fs-9 flex-nowrap mb-1" id="emailTab" role="tablist">
                <li class="nav-item me-3"><a class="nav-link text-nowrap border-0 active" id="mail-tab" data-bs-toggle="tab" href="#tab-mail" aria-controls="mail-tab" role="tab" aria-selected="true">Mails (68)<span class="text-body-tertiary fw-normal"></span></a></li>
                <li class="nav-item me-3"><a class="nav-link text-nowrap border-0" id="drafts-tab" data-bs-toggle="tab" href="#tab-drafts" aria-controls="drafts-tab" role="tab" aria-selected="true">Drafts (6)<span class="text-body-tertiary fw-normal"></span></a></li>
                <li class="nav-item me-3"><a class="nav-link text-nowrap border-0" id="schedule-tab" data-bs-toggle="tab" href="#tab-schedule" aria-controls="schedule-tab" role="tab" aria-selected="true">Scheduled (17)</a></li>
              </ul>
            </div>
            <div class="search-box w-100 mb-3">
              <form class="position-relative">
                <input class="form-control search-input search" type="search" placeholder="Search..." aria-label="Search" />
                <span class="fas fa-search search-box-icon"></span>

              </form>
            </div>
            <div class="tab-content" id="profileTabContent">
              <div class="tab-pane fade show active" id="tab-mail" role="tabpanel" aria-labelledby="mail-tab">
                <div class="border-top border-bottom border-translucent" id="allEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
                  <div class="table-responsive scrollbar mx-n1 px-1">
                    <table class="table fs-9 mb-0">
                      <thead>
                        <tr>
                          <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"all-email-table-body"}' />
                            </div>
                          </th>
                          <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
                          <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
                          <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
                          <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
                          <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
                        </tr>
                      </thead>
                      <tbody class="list" id="all-email-table-body">
                        {% for email in emails.sent %}
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">{{email.subject}}</a>
                            <div class="fs-10 d-block">{{email.to_email}}</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">{{email.created}}</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
                        </tr>
                        {% endfor %}                        
                      </tbody>
                    </table>
                  </div>
                  <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
                    <div class="col-auto d-flex">
                      <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
                    </div>
                    <div class="col-auto d-flex">
                      <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                      <ul class="mb-0 pagination"></ul>
                      <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="tab-drafts" role="tabpanel" aria-labelledby="drafts-tab">
                <div class="border-top border-bottom border-translucent" id="draftsEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
                  <div class="table-responsive scrollbar mx-n1 px-1">
                    <table class="table fs-9 mb-0">
                      <thead>
                        <tr>
                          <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"drafts-email-table-body"}' />
                            </div>
                          </th>
                          <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
                          <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
                          <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
                          <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
                          <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
                        </tr>
                      </thead>
                      <tbody class="list" id="drafts-email-table-body">
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">Quary about purchased soccer socks</a>
                            <div class="fs-10 d-block">jackson@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Jackson Pollock</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 29, 2021 10:23 am</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
                        </tr>
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"How to take the headache out of Order","email":"ansolo45@mail.com"},"active":true,"sent":"Ansolo Lazinatov","date":"Dec 27, 2021 3:27 pm","source":"Call","type_status":{"label":"delivered","type":"badge-phoenix-info"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">How to take the headache out of Order</a>
                            <div class="fs-10 d-block">ansolo45@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Ansolo Lazinatov</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 27, 2021 3:27 pm</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-info">delivered</span></td>
                        </tr>
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"The Arnold Schwarzenegger of Order","email":"ansolo45@mail.com"},"active":true,"sent":"Ansolo Lazinatov","date":"Dec 24, 2021 10:44 am","source":"Call","type_status":{"label":"Bounce","type":"badge-phoenix-warning"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">The Arnold Schwarzenegger of Order</a>
                            <div class="fs-10 d-block">ansolo45@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Ansolo Lazinatov</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 24, 2021 10:44 am</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-warning">Bounce</span></td>
                        </tr>
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"My order is not being taken","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 19, 2021 4:55 pm","source":"Call","type_status":{"label":"Spam","type":"badge-phoenix-danger"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">My order is not being taken</a>
                            <div class="fs-10 d-block">jackson@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Jackson Pollock</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 19, 2021 4:55 pm</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-danger">Spam</span></td>
                        </tr>
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Shipment is missing","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 19, 2021 2:43 pm","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">Shipment is missing</a>
                            <div class="fs-10 d-block">jackson@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Jackson Pollock</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 19, 2021 2:43 pm</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
                    <div class="col-auto d-flex">
                      <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
                    </div>
                    <div class="col-auto d-flex">
                      <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                      <ul class="mb-0 pagination"></ul>
                      <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="tab-schedule" role="tabpanel" aria-labelledby="schedule-tab">
                <div class="border-top border-bottom border-translucent" id="scheduledEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
                  <div class="table-responsive scrollbar mx-n1 px-1">
                    <table class="table fs-9 mb-0">
                      <thead>
                        <tr>
                          <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"scheduled-email-table-body"}' />
                            </div>
                          </th>
                          <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
                          <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
                          <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
                          <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
                          <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
                        </tr>
                      </thead>
                      <tbody class="list" id="scheduled-email-table-body">
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">Quary about purchased soccer socks</a>
                            <div class="fs-10 d-block">jackson@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Jackson Pollock</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 29, 2021 10:23 am</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
                        </tr>
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"How to take the headache out of Order","email":"ansolo45@mail.com"},"active":true,"sent":"Ansolo Lazinatov","date":"Dec 27, 2021 3:27 pm","source":"Call","type_status":{"label":"delivered","type":"badge-phoenix-info"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">How to take the headache out of Order</a>
                            <div class="fs-10 d-block">ansolo45@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Ansolo Lazinatov</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 27, 2021 3:27 pm</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-info">delivered</span></td>
                        </tr>
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"The Arnold Schwarzenegger of Order","email":"ansolo45@mail.com"},"active":true,"sent":"Ansolo Lazinatov","date":"Dec 24, 2021 10:44 am","source":"Call","type_status":{"label":"Bounce","type":"badge-phoenix-warning"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">The Arnold Schwarzenegger of Order</a>
                            <div class="fs-10 d-block">ansolo45@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Ansolo Lazinatov</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 24, 2021 10:44 am</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-warning">Bounce</span></td>
                        </tr>
                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                          <td class="fs-9 align-middle px-0 py-3">
                            <div class="form-check mb-0 fs-8">
                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"My order is not being taken","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 19, 2021 4:55 pm","source":"Call","type_status":{"label":"Spam","type":"badge-phoenix-danger"}}' />
                            </div>
                          </td>
                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">My order is not being taken</a>
                            <div class="fs-10 d-block">jackson@mail.com</div>
                          </td>
                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">Jackson Pollock</td>
                          <td class="date align-middle white-space-nowrap text-body py-2">Dec 19, 2021 4:55 pm</td>
                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-danger">Spam</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
                    <div class="col-auto d-flex">
                      <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
                    </div>
                    <div class="col-auto d-flex">
                      <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                      <ul class="mb-0 pagination"></ul>
                      <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-attachments" role="tabpanel" aria-labelledby="attachments-tab">
          <h2 class="mb-3">Attachments</h2>
          <div class="border-top border-dashed pt-3 pb-4">
            <div class="d-flex flex-between-center">
              <div class="d-flex mb-1"><span class="fa-solid fa-image me-2 text-body-tertiary fs-9"></span>
                <p class="text-body-highlight mb-0 lh-1">Silly_sight_1.png</p>
              </div>
              <div class="btn-reveal-trigger">
                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
                <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a></div>
              </div>
            </div>
            <p class="fs-9 text-body-tertiary mb-3"><span>768kB</span><span class="text-body-quaternary mx-1">| </span><a href="#!">Shantinan Mekalan </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">21st Dec, 12:56 PM</span></p><img class="rounded-2" src="{% static 'images/generic/40.png' %}" alt="" />
          </div>
          <div class="border-top border-dashed py-4">
            <div class="d-flex flex-between-center">
              <div>
                <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-image me-2 fs-9 text-body-tertiary"></span>
                  <p class="text-body-highlight mb-0 lh-1">All_images.zip</p>
                </div>
                <p class="fs-9 text-body-tertiary mb-0"><span>12.8 mB</span><span class="text-body-quaternary mx-1">|</span><a href="#!">Yves Tanguy </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">19th Dec, 08:56 PM</span></p>
              </div>
              <div class="btn-reveal-trigger">
                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
                <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a></div>
              </div>
            </div>
          </div>
          <div class="border-top border-dashed py-4">
            <div class="d-flex flex-between-center">
              <div>
                <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-file-lines me-2 fs-9 text-body-tertiary"></span>
                  <p class="text-body-highlight mb-0 lh-1">Project.txt</p>
                </div>
                <p class="fs-9 text-body-tertiary mb-0"><span>123 kB</span><span class="text-body-quaternary mx-1">| </span><a href="#!">Shantinan Mekalan </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">12th Dec, 12:56 PM</span></p>
              </div>
              <div class="btn-reveal-trigger">
                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
                <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse </a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}