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

{% block content %}
<div class="wrapper wrapper-content animated fadeIn">
    <div class="col-lg-12">
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li {% if not assign %} class="active" {% endif %}><a href="{% url 'tickets:ticket-list' %}"> {% trans 'My tickets' %}</a></li>
                <li {% if assign %}class="active" {% endif %}><a href="{% url 'tickets:ticket-list' %}?assign=1">{% trans 'Assigned me' %}</a></li>
            </ul>
            <div class="tab-content">
                <div id="my-tickets" class="tab-pane active">
                    <div class="panel-body">
                        {% if not assign %}
                        <div class="uc pull-left m-r-5">
                            <div class="btn-group">
                                <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle" aria-expanded="false">
                                    {% trans 'Create ticket' %} <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">{% trans 'Asset permission' %}</a></li>
                                </ul>
                            </div>
                        </div>
                        {% endif %}
                        <table class="table table-striped table-bordered table-hover" id="ticket-list-table" >
                            <thead>
                                <tr>
                                    <th class="text-center">
                                        <input id="" type="checkbox" class="ipt_check_all">
                                    </th>
                                    <th class="text-center">{% trans 'Title' %}</th>
                                    <th class="text-center">{% trans 'User' %}</th>
                                    <th class="text-center">{% trans 'Type' %}</th>
                                    <th class="text-center">{% trans 'Status' %}</th>
                                    <th class="text-center">{% trans 'Datetime' %}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% include '_filter_dropdown.html' %}
{% endblock %}
{% block content_bottom_left %}{% endblock %}
{% block custom_foot_js %}
<script>
var assignedTable, myTable, listUrl;
{% if assign %}
listUrl = '{% url "api-tickets:ticket-list" %}?assign=1';
{% else %}
listUrl = '{% url "api-tickets:ticket-list" %}?assign=0';
{% endif %}
function initTable() {
     var options = {
         ele: $('#ticket-list-table'),
         oSearch: {sSearch: "status:open"},
         columnDefs: [
             {targets: 1, createdCell: function (td, cellData, rowData) {
                 cellData = htmlEscape(cellData);
                 var detailBtn = '<a href="{% url "tickets:ticket-detail" pk=DEFAULT_PK %}">' + cellData + '</a>';
                 $(td).html(detailBtn.replace("{{ DEFAULT_PK }}", rowData.id));
             }},
             {targets: 4, createdCell: function (td, cellData) {
                 if (cellData === "open") {
                     $(td).html('<i class="fa fa-check-circle-o text-navy"></i>');
                 } else {
                     $(td).html('<i class="fa fa-times-circle-o text-danger"></i>')
                 }
              }},
             {targets: 4, createdCell: function (td, cellData) {
                 var d = toSafeLocalDateStr(cellData);
                 $(td).html(d)
              }},
             ],
         ajax_url: listUrl,
         columns: [
             {data: "id"}, {data: "title"},
             {data: "user_display"}, {data: "type_display"},
             {data: "status", width: "40px"},
             {data: "date_created"},
         ],
         op_html: $('#actions').html()
    };
    myTable = jumpserver.initServerSideDataTable(options);
    return myTable
}


$(document).ready(function(){
    initTable();
    var menu = [
        {title: "IP", value: "ip"},
        {title: "{% trans 'Title' %}", value: "title"},
        {title: "{% trans 'User' %}", value: "user_display"},
        {title: "{% trans 'Status' %}", value: "status", submenu: [
                {title: "{% trans 'Open' %}", value: "open"},
                {title: "{% trans 'Closed' %}", value: "closed"},
        ]},
        {title: "{% trans 'Action' %}", value: "action", submenu: [
                {title: "{% trans 'Approve' %}", value: "approve"},
                {title: "{% trans 'Reject' %}", value: "reject"},
        ]},
    ];
    initTableFilterDropdown('#assigned-ticket-list-table input', menu)
}).on('click', '.btn-action', function () {
    var ticketId = $(this).data("uid");
    var action = $(this).data('action');
    var ticketDetailUrl = "{% url 'api-tickets:ticket-detail' pk=DEFAULT_PK %}";
        ticketDetailUrl = ticketDetailUrl.replace("{{ DEFAULT_PK }}", ticketId);
    var data = {
            url: ticketDetailUrl,
            body: JSON.stringify({action: action}),
            method: "PATCH",
            success: reloadPage
    };
    requestApi(data);
})
</script>
{% endblock %}

