{% extends "layouts/default.html" %}

{% block title %} Manage Cases {% endblock title %}

{% block stylesheets %}
<link rel="stylesheet" href="/static/assets/css/dataTables.select.min.css">
<link rel="stylesheet" href="/static/assets/css/bootstrap-select.min.css">
<link rel="stylesheet" href="/static/assets/css/bootstrap-multiselect.min.css">
{% endblock stylesheets %}

{% block content %}

{% if current_user.is_authenticated %}
<div class="page-inner">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Cases management</div>
                </div>
                <div class="card-body">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-sm btn-outline-dark float-right mr-3"
                            onclick="load_add_case();">
                            Create new case
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-dark float-right mr-3"
                            onclick="refresh_case_table();">
                            Refresh
                        </button>
                        <div class="table-responsive" id="cases_table_wrapper">
                            <div class="selectgroup">
                                <span id="table_buttons"></span>
                            </div>
                            <table class="table display wrap col-border table-striped table-hover" width="100%"
                                cellspacing="0" id="cases_table">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Customer</th>
                                        <th>State</th>
                                        <th>Open date</th>
                                        <th>Close date</th>
                                        <th>SOC Ticket</th>
                                        <th>Opening user</th>
                                        <th>KPI</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Customer</th>
                                        <th>State</th>
                                        <th>Open date</th>
                                        <th>Close date</th>
                                        <th>SOC Ticket</th>
                                        <th>Opening user</th>
                                        <th>KPI</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal " tabindex="-1" role="dialog" id="modal_case_detail" data-backdrop="true">
    <div class="modal-xl modal-dialog" role="document">
        <div class="modal-content" id="info_case_modal_content">

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="modal bg-shadow-gradient" tabindex="-1" role="dialog" id="modal_ac_additional" data-backdrop="true">
            </div>
{% endif %}

{% endblock content %}

{% block javascripts %}

<script src="/static/assets/js/core/jquery.validate.js"></script>
<script src="/static/assets/js/plugin/datatables/dataTables.cellEdit.js"></script>
<script src="/static/assets/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="/static/assets/js/plugin/datatables/dataTables.select.min.js"></script>
<script src="/static/assets/js/plugin/datatables/dataTables.responsive.min.js"></script>
<script src="/static/assets/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="/static/assets/js/plugin/datatables/buttons.print.min.js"></script>
<script src="/static/assets/js/plugin/datatables/buttons.print.min.js"></script>

<script src="/static/assets/js/plugin/select/bootstrap-select.min.js"></script>
<script src="/static/assets/js/plugin/select/bootstrap-multiselect.min.js"></script>

<script src="/static/assets/js/iris/datatablesUtils.js"></script>
<script src="/static/assets/js/iris/manage.cases.common.js"></script>
<script src="/static/assets/js/iris/manage.cases.js"></script>

<script>
    $('form#form_new_case').validate();
</script>

{% endblock javascripts %}