{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% load thumbnail %}
{% block extralinks %}
<style>
  .form-group label {
    font-weight: 800;
  }
</style>
{% endblock %}
{% block content %}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a class="primary_btn" href="{% url 'marketing:add_email_for_campaigns'%}"><i class="fa fa-plus"></i>
          Add Contact</a></span>
    </div>
  </div>
  
  <div class="filter_row list_filter_row row marl">
    
  </div>
  <div class="col-md-12 col-lg-12 col-xl-12">
    <div class="table_container_row row marl no-gutters">
      <div class="col-md-12">
        
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="open" role="tabpanel" aria-labelledby="open">
            <div class="card">
              <div class="card-body">
                <div class="card-title text-right">
                  <span class="float-left">Contacts - {% if show_pageitems %}
                    {% show_pageitems %}{% else %}
                    {{ contacts|length }}{% endif %}</span>
                  <span class="">
                    <a href="#" class="primary_btn" style="padding: 0px 10px;"></a>
                  </span>
                </div>
                <div class="table-responsive">
                  <table class="table ">
                    <thead>
                      {% if contacts|length > 0 %}
                      <tr>
                        <th width="5%">ID</th>
                        <th width="15%"> Name</th>
                        <th width="15%">Email</th>
                        <th width="15%">Created by</th>
                        <th width="15%">Created On</th>
                        <th width="10%">Actions</th>
                      </tr>
                      {% endif %}
                    </thead>
                    <tbody>
                      {% if per_page %}
                      {% paginate per_page contacts %}
                      {% else %}
                      {% paginate 10 contacts %}
                      {% endif %}
                      {% for contact in contacts %}
                      <tr class="text-center">
                        <td scope="row">{{ forloop.counter }}</td>
                        <td>{{ contact.name }}</td>
                        <td class="">
                            {{contact.email}}
                        </td>
                        <td>
                          {% if contact.created_by %}
                          {% if contact.created_by.profile_pic %}
                          {% thumbnail contact.created_by.profile_pic "40x40" crop="center" as im %}
                          <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                            title="{{ contact.created_by }}" style="border-radius: 50%" />
                          {% endthumbnail %}
                          {% else %}
                          <img src="{% static 'images/user.png' %}" style="width: 40px;height: 40px;border-radius: 50%;"
                            title="{{ contact.created_by }}" />
                          {% endif %}
                          {% else %}
                          <img src="{% static 'images/user.png' %}" style="width: 40px;height: 40px;border-radius: 50%;"
                            title="{{ contact.created_by }}" />
                          {% endif %}
                        </td>
                        <td title="{{ contact.created_on }}">{{ contact.created_on_arrow }}</td>
                        <td class="actions">
                          {% if request.user.role == 'ADMIN' or reques.user.is_superuser %}
                          <a href="{% url 'marketing:edit_email_for_campaigns' contact.id %}" class="btn btn-success edit"><i
                              class="fas fa-pencil-alt"></i></a>
                          <a href="{% url 'marketing:delete_email_for_campaigns' contact.id %}"
                            class="btn btn-danger delete remove_document"><i class="fas fa-trash-alt"></i></a>
                          {% endif %}
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {%ifequal contacts|length 0%}
                <h6 class="text-center">No Contacts Found</h6>
                {%endifequal%}
                <div class="marl row text-center">
                  {% show_pages %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>
</div>
</div>


{% endblock %}
{% block js_block %}
<script type="text/javascript">
  $(document).ready(function () {
    // $('.assigned_users').select2();
    // $('#id_tag').select2();
    // $('#created_by').select2();
    // $(".filter_toggle").click(function () {
    //   $(".list_filter_row").toggle();
    // });
  });

//   search = "{{search}}"

//   if (search == 'True') {
//     $(".list_filter_row").show();
//   }

//   $("#close-tab").click(function (e) {
//     $("#tab_status").val('Closed')
//   })

//   $("#open-tab").click(function (e) {
//     $("#tab_status").val('Open')
//   })

//   tab_status = "{{tab_status}}"
//   if (tab_status == 'Closed') {
//     $("#close-tab").click()
//   } else {
//     $("#open-tab").click()
//   }

  $('.delete').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });

  $("a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#leads_filter').attr("action", $(this).attr("href"));
    $('#leads_filter').submit();
  });
</script>
{% endblock js_block %}