{% extends 'dashboard/new_base.html' %}
{% load paginate %}
{% load blog_tags %}
{% block title %}Pages{% endblock %}
{% block extra_css %}
<style type="text/css">
  table td {
  padding: 6px;
  }
</style>
{% endblock %}
{% block content %}
{% with request.user.userrole_set.last as user_role %}
  <div class="row no_row_margin heading_count">
    <div class="heading col-md-6">Pages</div>
    <div class="count_add-new col-md-6 text-right">
      <ul class="list-inline">
        <li><a href="#">All ({{ pages_list|length }}) </a></li>
      </ul>
      <span class="add_new"><a href="{% url 'add_page' %}"><i class="fa fa-plus"></i> Add Page</a></span>
    </div>
  </div>
  <div class="filters_row">
    <div class="col-md-6 filter_left">
      {% if request.user.is_superuser or user_role.role == "Admin"%}
        <form class="bulk_actions_form" method='get'>
          {% csrf_token %}
          <select class="form-control" name="bulk_actions_select" id='bulk_actions_select'>
            <option>Choose An Action</option>
            <option value="True">Active</option>
            <option value="False">In-Active</option>
            <option value="Delete">Delete</option>
          </select>
          <button class="btn btn-default" type="submit">Apply Action</button>
        </form>
      {% endif %}
    </div>
    <div class="col-md-6 filter_right">
      <form action="" method="GET" id="pages_data" class="form-inline">
          <input type="text" placeholder="Filter By Title" value="{{ request.GET.search_text }}" name='search_text' class="form-control" />
          <select class="form-control" id="select_status" name="select_status">
              <option value="" default>Status</option>
              <option value="True" {% ifequal request.GET.select_status "True" %}Selected{% endifequal %}>Active</option>
              <option value="False" {% ifequal request.GET.select_status "False" %}Selected{% endifequal %}>Inactive</option>
          </select>
          <button class="btn btn-default" type="submit">Apply Filter</button>
      </form>
    </div>
    <br clear="all">
  </div>

  {% if pages_list %}
    <div class="row no_row_margin table_row">
      <div class="container-fluid">
      {% paginate 5 pages_list %}
      {% show_pageitems %}
      <table class="table table-bordered table-striped" id="my_table">
        <thead>
          <tr>
          {% if request.user.is_superuser or user_role.role == "Admin"%}
            <th width='5%' class="text-center"><input name="bulk_actions" id="selectAll" type="checkbox"></th>
          {% endif %}
            <th width='20%'>Title</th>
            <th width='10%'>Slug</th>
            <th width='5%' class="text-center">Status</th>
          {% if request.user.is_superuser or user_role.role == "Admin"%}
            <th width='15%' colspan="3">Actions</th>
          {% endif %}
          </tr>
        </thead>
        {% for page in pages_list %}
        <tbody>
          <tr>
          {% if request.user.is_superuser or user_role.role == "Admin"%}
            <td class="text-center"><input name="bulk_actions" class="bulk_actions" value="{{ page.id }}" type="checkbox"></td>
          {% endif %}
            <td><a href="#">{{ page.title }}</a></td>
            <td>{{ page.slug }}</td>
            <td class="status_on_off text-center">
              <a href="{% url 'page_status_update' page.slug %}" {% if page.is_active %}class="status_on" title="Active"{% else %}class="status_off" title="In-Active"{% endif %} data-toggle="tooltip" data-placement="bottom"><i class="fa fa-circle" aria-hidden="true"></i></a>
            </td>
            {% if request.user.is_superuser or user_role.role == "Admin"%}
            <td class="actions">
              <a href="{% url 'page_view' page_slug=page.slug %}" class="view"><i class="fa fa-eye"></i> View</a>
              <a href="{% url 'edit_page' page_slug=page.slug %}" class="edit"><i class="fa fa-edit"></i> Edit</a>
              <a href="{% url 'delete_page' page_slug=page.slug %}" class="delete" data-confirm="true"><i class="fa fa-trash-o"></i> Delete</a>
            </td>
            {% endif %}
          </tr>
        </tbody>
        {% endfor %}
      </table>
      <!-- end div of table -->
      <!-- pagination -->
      <div class="pagination_wrap text-center">
        {% show_pages %}
      </div>
      <!--/ pagination -->
      {% else %}
      <h2 align="center">There are no pages here!</h2>
      {% endif %}
    </div>
  </div>
{% endwith %}
{% endblock %}
{% block js_script %}
<script type="text/javascript">
  $('.pages').addClass('active');

  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })

  $('.select2_category').select2({placeholder: "Select Categories"});

  $("#selectAll").change(function() {
    $(".bulk_actions:checkbox").prop('checked', $(this).prop("checked"));
  });

  $('.bulk_actions_form').submit(function(e){
      e.preventDefault();
      var page_ids = [];
      $.each($(".bulk_actions:checked"), function(){
          page_ids.push(parseInt($(this).val(), 0));
      });
      var action = $('#bulk_actions_select :selected').val();

      $.get("{% url 'bulk_actions_pages' %}", {'page_ids':page_ids, 'action': action}, function(data){
          if(data.response){
              window.location="{% url 'pages' %}";
          }else{
              window.location="{% url 'pages' %}";
          }
      }, 'json');
  })

  // $('.pagination li a').click(function(event){
  //     event.preventDefault();
  //     $('#pages_data').attr('action', $(this).attr('href'));
  //     $('#pages_data').submit();
  // });
</script>
{% endblock %}