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

{% block header %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">LiteDFS</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav navbar-nav-scroll navbar-right">
            <li class="nav-item dropdown">
                <a id="user-name-dropdown" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    {{user}}
                </a>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="user-name-dropdown">
                    <li><a id="btn-show-settings" class="dropdown-item" href="#">Settings</a></li>
                    <li><a id="btn-show-logout" class="dropdown-item" href="#">Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
{% end %}

{% block body %}
<div class="fluid">
    <div id="manager-row" class="row">
        <div id="users" class="col">
            <div id="toolbar-left" class="btn-group btn-group-sm float-left" role="group" aria-label="Basic example">
                <span>Users</span>
            </div>
            <div id="toolbar-right" class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
                <button id="btn_rename" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-pencil" title="rename" aria-hidden="true"></span>
                </button>
                <button id="btn_create" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-folder" title="create" aria-hidden="true"></span>
                </button>
                <button id="btn_upload" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-cloud-upload" title="upload" aria-hidden="true"></span>
                </button>
                <button id="btn_copy" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-account-logout icon-flipped" title="copy" aria-hidden="true"></span>
                </button>
                <button id="btn_cut" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-external-link" title="cut" aria-hidden="true"></span>
                </button>
                <button id="btn_paste" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-account-login" title="paste" aria-hidden="true"></span>
                </button>
                <button id="btn_delete" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-trash" title="delete" aria-hidden="true"></span>
                </button>
            </div>
            <div>
                <input type="text" class="form-control form-control-sm dir-path" readonly>
            </div>
            <table class="table table-sm table-bordered table-hover table-striped header-fixed">
                <thead>
                    <tr>
                    </tr>
                </thead>
                <tbody id="local_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="group-users" class="col">
            <div id="toolbar-left" class="btn-group btn-group-sm float-left" role="group" aria-label="Basic example">
                <span>Group Users</span>
            </div>
            <div id="toolbar-right" class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
                <button id="btn_rename" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-pencil" title="rename" aria-hidden="true"></span>
                </button>
                <button id="btn_create" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-folder" title="create" aria-hidden="true"></span>
                </button>
                <button id="btn_download" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-cloud-download" title="download" aria-hidden="true"></span>
                </button>
                <button id="btn_preview" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-document" title="preview" aria-hidden="true"></span>
                </button>
                <button id="btn_cut" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-external-link" title="cut" aria-hidden="true"></span>
                </button>
                <button id="btn_paste" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-account-login" title="paste" aria-hidden="true"></span>
                </button>
                <button id="btn_update" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-data-transfer-upload" title="update" aria-hidden="true"></span>
                </button>
                <button id="btn_delete" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-trash" title="delete" aria-hidden="true"></span>
                </button>
            </div>
            <div>
                <input type="text" class="form-control form-control-sm dir-path" readonly>
            </div>
            <table class="table table-sm table-bordered table-hover table-striped header-fixed">
                <thead>
                    <tr>
                    </tr>
                </thead>
                <tbody id="remote_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>
    <div id="log-row" class="row">
        <div id="log-console-container">
            <textarea id="log-console" readonly>
                
            </textarea>
        </div>
    </div>
</div>

<!-- local modals -->
<div id="local-rename-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-local-rename" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Rename</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">Name</label>
                        <input type="text" name="name" class="form-control form-control-sm new-name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-local-rename" type="button" class="btn btn-light" onclick="this.blur();">Rename</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="local-create-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-local-create" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Directory</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">Name</label>
                        <input type="text" name="name" class="form-control form-control-sm name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-local-create" type="button" class="btn btn-light" onclick="this.blur();">Create</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="local-delete-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-local-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 File And Directory</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 these files and directories?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-local-delete" type="button" class="btn btn-light" onclick="this.blur();">Delete</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="local-copy-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-local-copy" 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">Copy File And Directory</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 copy these files and directories?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-local-copy" type="button" class="btn btn-light" onclick="this.blur();">Copy</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="local-cut-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-local-cut" 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">Cut File And Directory</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 cut these files and directories?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-local-cut" type="button" class="btn btn-light" onclick="this.blur();">Cut</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="local-paste-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-local-paste" 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">Paste File And Directory</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 paste these files and directories here?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-local-paste" type="button" class="btn btn-light" onclick="this.blur();">Paste</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="local-upload-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-local-upload" 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">Upload File And Directory</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="upload-replica">Replica</label>
                        <input type="number" name="replica" class="form-control form-control-sm" min="1" step="1" value="1" id="upload-replica">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-local-upload" type="button" class="btn btn-light" onclick="this.blur();">Upload</button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- remote modals -->
<div id="remote-rename-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-rename" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Rename</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">Name</label>
                        <input type="text" name="name" class="form-control form-control-sm new-name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-rename" type="button" class="btn btn-light" onclick="this.blur();">Rename</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-create-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-create" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Directory</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="name">Name</label>
                        <input type="text" name="name" class="form-control form-control-sm name" id="name">
                    </div>
                    <div class="form-group">
                        <label for="owner">Owner</label>
                        <div class="input-group mb-3" id="owner">
                            <input type="text" class="form-control form-control-sm" placeholder="username" aria-label="username" aria-describedby="button-select-owner">
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-outline-secondary" type="button" id="button-select-owner">Browse</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="group">Group</label>
                        <div class="input-group mb-3" id="group">
                            <input type="text" class="form-control form-control-sm" placeholder="username" aria-label="username" aria-describedby="button-select-owner">
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-outline-secondary" type="button" id="button-select-owner">Browse</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="owner-permission">Owner Permission</label>
                        <div id="owner-permission">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="read" value="option1">
                                <label class="form-check-label" for="read">Read</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="write" value="option2">
                                <label class="form-check-label" for="write">Write</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="group-permission">Group Permission</label>
                        <div id="group-permission">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="read" value="option1">
                                <label class="form-check-label" for="read">Read</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="write" value="option2">
                                <label class="form-check-label" for="write">Write</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="other-permission">Other Permission</label>
                        <div id="other-permission">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="read" value="option1">
                                <label class="form-check-label" for="read">Read</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="write" value="option2">
                                <label class="form-check-label" for="write">Write</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-create" type="button" class="btn btn-light" onclick="this.blur();">Create</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-delete-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-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 File And Directory</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 these files and directories?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-delete" type="button" class="btn btn-light" onclick="this.blur();">Delete</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-download-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-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 File And Directory</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 these files and directories?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-download" type="button" class="btn btn-light" onclick="this.blur();">Download</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-cut-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-cut" 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">Cut File And Directory</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 cut these files and directories?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-cut" type="button" class="btn btn-light" onclick="this.blur();">Cut</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-paste-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-paste" 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">Paste File And Directory</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 paste these files and directories here?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-paste" type="button" class="btn btn-light" onclick="this.blur();">Paste</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-detail-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">File 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="file-info-json"></pre>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<div id="remote-update-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-update" 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">Update File And Directory</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="update-replica">Replica</label>
                        <input type="number" name="replica" class="form-control form-control-sm" min="1" step="1" value="1" id="update-replica">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-update" type="button" class="btn btn-light" onclick="this.blur();">Update</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-preview-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-remote-preview" 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">Preview File</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 preview this file?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-remote-preview" type="button" class="btn btn-light" onclick="this.blur();">Preview</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="remote-preview-file-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">File Preview</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="file-preview-content"></pre>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
{% end %}

{% block javascript %}
<link href="{{ static_url('css/common.css') }}" rel="stylesheet" >
<link href="{{ static_url('css/group_info.css') }}" rel="stylesheet" >
<script src="{{ static_url('js/common.js') }}"></script>
<script src="{{ static_url('js/group_info.js') }}"></script>
<script type="text/javascript">
    var $remote_table_header = $("#remote-manager .header-fixed > thead");
    var $local_table_header = $("#local-manager .header-fixed > thead");
    var remote_tbody = document.getElementById("remote_table_body");
    var local_tbody = document.getElementById("local_table_body");
    var scrollBarSize = getBrowserScrollSize();
    var log_console_height = 120;
    window.onload = window.onresize = function(){
        $(document).ready(function(){
            var window_height = $(window).height();
            var window_width = $(window).width();
            $("tbody").height(window_height - 205 - log_console_height);
            $("textarea#log-console").height(log_console_height);
            if (hasVerticalScrollBar(local_tbody)) {
                $local_table_header.css({"margin-right": scrollBarSize.width});
            } else {
                $local_table_header.css({"margin-right": 0});
            }
            if (hasVerticalScrollBar(remote_tbody)) {
                $remote_table_header.css({"margin-right": scrollBarSize.width});
            } else {
                $remote_table_header.css({"margin-right": 0});
            }
        });
    }

    $(document).ready(function(){
        // hljs.initHighlightingOnLoad();
        var window_height = $(window).height();
        var window_width = $(window).width();
        $("tbody").height(window_height - 205 - log_console_height);
        $("textarea#log-console").height(log_console_height);
        if (hasVerticalScrollBar(local_tbody)) {
            $local_table_header.css({"margin-right": scrollBarSize.width});
        } else {
            $local_table_header.css({"margin-right": 0});
        }
        if (hasVerticalScrollBar(remote_tbody)) {
            $remote_table_header.css({"margin-right": scrollBarSize.width});
        } else {
            $remote_table_header.css({"margin-right": 0});
        }
        groupInfoInit('{{manager_host}}');
    });
</script>
{% end %}