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

{% block body %}
<div class="fluid">
    <div id="manager-row" class="row">
        <div id="local-manager" class="col">
            <div id="toolbar-left" class="btn-group btn-group-sm float-left" role="group" aria-label="Basic example">
                <button id="btn_home" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-home" title="home" aria-hidden="true"></span>
                </button>
                <button id="btn_parent" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-chevron-top" title="parent" 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>
            <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="remote-manager" class="col">
            <div id="toolbar-left" class="btn-group btn-group-sm float-left" role="group" aria-label="Basic example">
                <button id="btn_home" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-home" title="home" aria-hidden="true"></span>
                </button>
                <button id="btn_parent" type="button" class="btn btn-light" onclick="this.blur();">
                    <span class="oi oi-chevron-top" title="parent" 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>
            <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="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-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('highlight/styles/default.css') }}" rel="stylesheet" >
<link href="{{ static_url('css/common.css') }}" rel="stylesheet" >
<link href="{{ static_url('css/storage.css') }}" rel="stylesheet" >
<script src="{{ static_url('highlight/highlight.pack.js') }}"></script>
<script src="{{ static_url('js/common.js') }}"></script>
<script src="{{ static_url('js/storage.js') }}"></script>
<script src="{{ static_url('js/remote.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});
        }
        storageInit('{{manager_host}}');
        remoteStorageInit('{{manager_host}}');
    });
</script>
{% end %}
