{% extends "../base.html" %}

{% block body %}
<div class="fluid">
    <div id="toolbar" class="btn-group btn-group-sm float-right" role="group" aria-label="toolbar">
        <div class="input-group input-group-sm">
            <div class="input-group-prepend">
                <select class="form-control form-control-sm" id="filter">
                    <option value="schedule_id" selected>Schedule Id</option>
                    <option value="app_id">Application Id</option>
                    <option value="workflow_id">Workflow Id</option>
                    <option value="name">Name</option>
                    <option value="enable">Enable</option>
                </select>
            </div>
            <input type="text" name="filter" class="form-control form-control-sm" id="filter_input">
            <div class="input-group-append">
                <button id="btn_search" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-magnifying-glass" title="search" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <button id="btn_create" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-plus" title="create" aria-hidden="true"></span>
        </button>
        <button id="btn_refresh" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-reload" title="refresh" aria-hidden="true"></span>
        </button>
    </div>
    <table class="table table-sm table-bordered table-hover table-striped header-fixed">
        <thead>
            <tr>
            </tr>
        </thead>
        <tbody id="table_body">
        </tbody>
    </table>
    <nav id="table-pagination" aria-label="Page navigation example">
        <ul id="ul-pagination" class="pagination pagination-sm justify-content-end">
        </ul>
    </nav>
</div>
<div id="schedule_info_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Schedule Info</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <pre id="schedule_info_json"></pre>
            </div>
            <div class="modal-footer">
                <button id="schedule_info_refresh" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-reload" title="refresh" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>
<div id="schedule_create_modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form_create" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create Schedule</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="schedule_name">Schedule Name</label>
                        <input type="text" name="schedule_name" class="form-control form-control-sm" id="schedule_name">
                    </div>
                    <div class="form-group">
                        <label for="app_id">Source Id</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <select class="form-control form-control-sm" id="source" for="source_id">
                                    <option value="application" selected>Application Id</option>
                                    <option value="workflow">Workflow Id</option>
                                </select>
                            </div>
                            <input type="text" name="source_id" class="form-control form-control-sm" id="source_id">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label for="day_of_month">Day Of Month</label>
                            <select name="day_of_month" class="form-control form-control-sm" id="day_of_month">
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="day_of_week">Day Of Week</label>
                            <select name="day_of_week" class="form-control form-control-sm" id="day_of_week">
                                <option selected value="-1">Not Set</option>
                                <option value="1">Monday</option>
                                <option value="2">Tuesday</option>
                                <option value="3">Wednesday</option>
                                <option value="4">Thursday</option>
                                <option value="5">Friday</option>
                                <option value="6">Saturday</option>
                                <option value="7">Sunday</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label for="hour">Hour</label>
                            <select name="hour" class="form-control form-control-sm" id="hour">
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="minute">Minute</label>
                            <select name="minute" class="form-control form-control-sm" id="minute">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input_data">Input Data (optional, json only)</label>
                        <textarea class="form-control form-control-sm" name="input_data" id="input_data" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="enable">
                            <label class="form-check-label" for="enable">
                                Enable
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn_schedule_create" type="button" class="btn btn-light" onclick="this.blur();">Create</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="schedule_update_modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form_update" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Schedule</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="schedule_name">Schedule Name</label>
                        <input type="text" name="schedule_name" class="form-control form-control-sm" id="schedule_name">
                    </div>
                    <div class="form-group">
                        <label for="app_id">Source Id</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <select class="form-control form-control-sm" id="source" for="source_id">
                                    <option value="application" selected>Application Id</option>
                                    <option value="workflow">Workflow Id</option>
                                </select>
                            </div>
                            <input type="text" name="source_id" class="form-control form-control-sm" id="source_id">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label for="day_of_month">Day Of Month</label>
                            <select name="day_of_month" class="form-control form-control-sm" id="day_of_month">
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="day_of_week">Day Of Week</label>
                            <select name="day_of_week" class="form-control form-control-sm" id="day_of_week">
                                <option selected value="-1">Not Set</option>
                                <option value="1">Monday</option>
                                <option value="2">Tuesday</option>
                                <option value="3">Wednesday</option>
                                <option value="4">Thursday</option>
                                <option value="5">Friday</option>
                                <option value="6">Saturday</option>
                                <option value="7">Sunday</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label for="hour">Hour</label>
                            <select name="hour" class="form-control form-control-sm" id="hour">
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="minute">Minute</label>
                            <select name="minute" class="form-control form-control-sm" id="minute">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input_data">Input Data (optional, json only)</label>
                        <textarea class="form-control form-control-sm" name="input_data" id="input_data" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="enable">
                            <label class="form-check-label" for="enable">
                                Enable
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn_schedule_update" type="button" class="btn btn-light" onclick="this.blur();">Update</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="schedule_delete_modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form_delete" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Schedule</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Do you want to delete this schedule?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn_schedule_delete" type="button" class="btn btn-light" onclick="this.blur();">Delete</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="loading_modal" data-backdrop="static" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Loading ...</h5>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% end %}

{% block javascript %}
<link href="{{ static_url('css/common.css') }}" rel="stylesheet" >
<link href="{{ static_url('css/schedule.css') }}" rel="stylesheet" >
<script src="{{ static_url('js/common.js') }}"></script>
<script src="{{ static_url('js/schedule.js') }}"></script>
<script type="text/javascript">
    var $table_header = $(".header-fixed > thead");
    var scrollBarSize = getBrowserScrollSize();
    window.onload = window.onresize = function(){
        $(document).ready(function(){
            var window_height = $(window).height();
            var window_width = $(window).width();
            $("tbody").height(window_height - 170);
            var tbody = document.getElementById("table_body");
            if (hasVerticalScrollBar(tbody)) {
                $table_header.css({"margin-right": scrollBarSize.width});
            }
            else {
                $table_header.css({"margin-right": 0});
            }
        });
    }

    $(document).ready(function(){
        var window_height = $(window).height();
        var window_width = $(window).width();
        $("tbody").height(window_height - 170);
        var tbody = document.getElementById("table_body");
        if (hasVerticalScrollBar(tbody)) {
            $table_header.css({"margin-right": scrollBarSize.width});
        }
        else {
            $table_header.css({"margin-right": 0});
        }
        scheduleInit('{{manager_host}}', '{{user}}', '{{token}}');
    });
</script>
{% end %}