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

{% block body %}
<div id="file_list" class="fluid">
    <div id="toolbar" class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
        <button id="btn_create" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-plus" title="refresh" 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="app_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">Application 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="app_info_json"></pre>
            </div>
            <div class="modal-footer">
                <button id="app_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="app_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 Application</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="application_name">Application Name</label>
                        <input type="text" name="name" class="form-control form-control-sm" id="application_name">
                    </div>
                    <div class="form-group">
                        <label for="application_package">Application Package</label>
                        <div class="custom-file mb-3 form-control-sm" id="application_package">
                            <input type="file" name="up_file" class="custom-file-input" id="create_app_file">
                            <label class="custom-file-label" for="create_app_file">Choose file</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="application_description">Application Description (optional)</label>
                        <textarea class="form-control form-control-sm" name="description" id="application_description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn_app_create" type="button" class="btn btn-light" onclick="this.blur();">Create</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="app_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 Application</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" style="display: none;">
                        <label for="application_name">Application Id</label>
                        <input type="text" name="app_id" class="form-control form-control-sm" id="application_id" readonly="readonly">
                    </div>
                    <div class="form-group">
                        <label for="application_name">Application Name (optional)</label>
                        <input type="text" name="name" class="form-control form-control-sm" id="application_name">
                    </div>
                    <div class="form-group">
                        <label for="application_package">Application Package (optional)</label>
                        <div class="custom-file mb-3 form-control-sm" id="application_package">
                            <input type="file" name="up_file" class="custom-file-input" id="update_app_file">
                            <label class="custom-file-label" for="update_app_file">Choose file</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="application_description">Application Description (optional)</label>
                        <textarea class="form-control form-control-sm" name="description" id="application_description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn_app_update" type="button" class="btn btn-light" onclick="this.blur();">Update</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="app_download_modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form_download" 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">Download Application</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 download this application?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn_app_download" type="button" class="btn btn-light" onclick="this.blur();">Download</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="app_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 Application</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 application?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn_app_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/application.css') }}" rel="stylesheet" >
<script src="{{ static_url('js/common.js') }}"></script>
<script src="{{ static_url('js/application.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();
            // $("div#file_list").height(window_height - 160);
            $("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});
            }
            // console.log("window width: " + window_width + "px");
        });
    }

    $(document).ready(function(){
        var window_height = $(window).height();
        var window_width = $(window).width();
        // $("div#file_list").height(window_height - 160);
        $("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});
        }
        // console.log("window width: " + window_width + "px");
        applicationInit('{{manager_host}}');
    });

    function hasVerticalScrollBar(el) {
        var result = el.scrollHeight > el.clientHeight;
        return result;
    }

    function getBrowserScrollSize() {
        var css = {
            "border":  "none",
            "height":  "200px",
            "margin":  "0",
            "padding": "0",
            "width":   "200px"
        };

        var inner = $("<div>").css($.extend({}, css));
        var outer = $("<div>").css($.extend({
            "left":       "-1000px",
            "overflow":   "scroll",
            "position":   "absolute",
            "top":        "-1000px"
        }, css)).append(inner).appendTo("body")
        .scrollLeft(1000)
        .scrollTop(1000);

        var scrollSize = {
            "height": (outer.offset().top - inner.offset().top) || 0,
            "width": (outer.offset().left - inner.offset().left) || 0
        };

        outer.remove();
        return scrollSize;
    }
</script>
{% end %}
