{% extends 'partials/backend.html' %}
{% load static %}
{% load humanize %}
{% block content %}

<main class="app-content">
          
    <div class="page-title m-b-20">
      <div class="row justify-content-between">
        <div class="col-md-6">
          <h1 class="page-title">
              <span class="fe fe-comments-o"></span> Ticket
          </h1>
        </div>
        <div class="col-md-12">
          <div class="row justify-content-between">
            <div class="col-md-6">
                        <div class="btn-group" role="group" aria-label="Basic example">
                <!--<a href="/admin/tickets/add_ticket" class="btn btn-outline-primary ajaxModal"><span class="fe fe-plus"></span> Add Ticket</a>-->
              </div>
                      </div>
            <div class="col-md-4 search-area">
              <div class="form-group">
                        <div class="input-group">
                            <input type="text" name="query" class="form-control" placeholder="Search for…" value="">
                            <select name="field" class="form-control" id=""><option value="id">ID</option><option value="email">Email</option><option value="subject">Subject</option></select>
                            <button class="btn btn-primary btn-square btn-search" type="button"><span class="fe fe-search"></span></button>
                            <button class="btn btn-outline-danger btn-square btn-clear d-none" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Clear" type="button"><span class="fe fe-x"></span></button>
                        </div>
                    </div>        </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
          <div class="col-md-12 col-xl-12">
          <div class="card">
            <!-- Card headers -->
            <div class="card-header massAction">
        <h3 class="card-title">Lists</h3>
        <div class="btnActions d-none btn-group" role="group" aria-label="Basic example">
            <span class="btn btn-primary m-r-2 number-items-selected"> 00 items selected</span>
            <div class="item-action dropdown action-options"><button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">Actions <span class="fe fe-chevrons-down"></span></button><div class="dropdown-menu dropdown-menu-right"><a href="/admin/tickets/bulk_action/pending" data-type="pending" class="dropdown-item ajaxActionOptions"><i class="dropdown-icon fe fe-clock"></i> Pending</a><a href="/admin/tickets/bulk_action/answered" data-type="answered" class="dropdown-item ajaxActionOptions"><i class="dropdown-icon fe fe-check"></i> Mark as Answered</a><a href="/admin/tickets/bulk_action/unread" data-type="unread" class="dropdown-item ajaxActionOptions"><i class="dropdown-icon fe fe-mail"></i> Mark as Unread</a><a href="/admin/tickets/bulk_action/closed" data-type="closed" class="dropdown-item ajaxActionOptions"><i class="dropdown-icon fe fe-lock"></i> Mark as Closed</a><a href="/admin/tickets/bulk_action/delete" data-type="delete" class="dropdown-item ajaxActionOptions"><i class="dropdown-icon fe fe-trash-2"></i> Delete</a></div></div>    </div>
        <div class="card-options">
            <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
            <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
        </div>
    </div>        <div class="table-responsive">
              <table class="table table-hover table-bordered table-vcenter card-table">
                <thead><tr><th class="text-center w-1"><div class="custom-controls-stacked">
                                <label class="form-check"><input type="checkbox" class="form-check-input check-items check-all" data-name="check_1"><span class="custom-control-label"></span>
                                </label>
                            </div></th><th class="text-center">ID</th><th class="text-center">User</th><th class="text-center">Subject</th><th class="text-center">Status</th><th class="text-center">Created</th><th class="text-center">action</th></tr></thead>            <tbody>
                                  {% for t in t %}
                                  <tr class="tr_d4318af6399de3e2538b4a7123c65037">
                      <th class="text-center w-1"><div class="custom-controls-stacked">
                                <label class="form-check"><input type="checkbox" class="form-check-input check-item check_1" name="ids[]" value="3"><span class="custom-control-label"></span>
                                </label>
                            </div></th>
                      <td class="text-center w-5p text-muted">{{ t.id }}</td>
                      <td class="text-center w-15p text-muted">{{ t.user.email }}</td>
                      <td><a href="/admin/tickets/view/{{ t.id }}">{{ t.subject }} 
                      <!--<span class="badge bg-purple-lt">Unread</span>-->
                      </a></td>
                      <td class="text-center w-10p"><span class="badge bg-purple-lt">{{ t.status }}</span></td>
                      <td class="text-center w-15p text-muted">{{ t.date }}</td>
                      <td class="text-center w-5p"><div class="item-action dropdown">
                                <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                            <div class="dropdown-menu"><a href="/admin/tickets/delete/{{ t.id }}" class="dropdown-item ajaxDeleteItem" data-confirm_ms="Are you sure you want to delete this item"><i class="dropdown-icon fe fe-trash-2"></i> Delete</a></div></div></td>
                    </tr>
                                    {% endfor %}
                              </tbody>
              </table>
            </div>
          </div>
        </div>
          </div>
</main>

{% endblock content %}