{{ define "title" }}Loop Workspace{{ end }}
{{ define "styles" }}
    <style>
        pre#editor {
            height: 100vh;
        }

        div#holder {
            border: 2px dashed #ccc;
            /*width: 300px;*/
            min-height: 110px;
            margin: 20px auto;
        }
        div#holder.hover {
            border: 2px dashed #0c0;
        }
        div#holder p {
            margin: 10px;
            font-size: 14px;
        }
        progress {
            width: 100%;
        }
        progress:after {
            content: '%';
        }
        .fail {
            background: #c00;
            padding: 2px;
            color: #fff;
        }
        .hidden {
            display: none !important;
        }
    </style>
{{ end }}
{{ define "content" }}
    <div id="toolbar" class="row">
        <div class="col s12 center">
            <!-- Toolbar of stuffs -->
            <button id="fullscreen" class="btn waves-effect waves-light">
                <i class="mdi-navigation-fullscreen left hide-on-med-and-down"></i>
                <i class="mdi-navigation-fullscreen hide-on-large-only"></i>
                <span class="hide-on-med-and-down">Focus Mode</span>
            </button>
            <button id="save" class="btn waves-effect waves-light">
                <i class="mdi-content-save left hide-on-med-and-down"></i>
                <i class="mdi-content-save hide-on-large-only"></i>
                <span class="hide-on-med-and-down">Save</span>
            </button>
            <button id="create" class="btn waves-effect waves-light">
                <i class="mdi-content-create left hide-on-med-and-down"></i>
                <i class="mdi-content-create hide-on-large-only"></i>
                <span class="hide-on-med-and-down">Create</span>
            </button>
            <button id="publish" class="btn waves-effect waves-light">
                <i class="mdi-editor-publish left hide-on-med-and-down"></i>
                <i class="mdi-editor-publish hide-on-large-only"></i>
                <span class="hide-on-med-and-down">Publish</span>
            </button>
            <a id="upload" class="btn waves-effect waves-light modal-trigger" href="#upload-area">
                <i class="mdi-file-file-upload left hide-on-med-and-down"></i>
                <i class="mdi-file-file-upload hide-on-large-only"></i>
                <span class="hide-on-med-and-down">Upload</span>
            </a>
        </div>
    </div>
    <div class="row">
        <div id="left-pane" class="col s4 m4 l2">
            <!-- Directory of stuffs -->
            <div class="row">
                <div class="col s12">
                    <label>Workspace</label>
                    <select>
                        <option value="" disabled>Select a directory</option>
                        <option value="Persona" selected>Personal</option>
                        <option value="Blog">Blog</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <ul class="collection">
                        <li class="collection-item avatar dismissable">
                            <i class="mdi-file-folder circle"></i>
                            <span class="title">Title</span>
                            <p>(3 files)</p>
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
                        </li>
                        <li class="collection-item avatar dismissable">
                            <i class="mdi-file-folder circle"></i>
                            <span class="title">Title</span>
                            <p></p>
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
                        </li>
                        <li class="collection-item avatar dismissable">
                            <i class="mdi-file-folder circle"></i>
                            <span class="title">Title</span>
                            <p></p>
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
                        </li>
                        <li class="collection-item avatar dismissable">
                            <i class="mdi-file-folder circle"></i>
                            <span class="title">Title</span>
                            <p>(7 files)</p>
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="workarea" class="col s8 m8 l10">
            <div class="row">
                <pre id="editor" class="col s12 m12 l12"></pre>
                <!--<div id="preview" class="col s12 m12 l6"></div>-->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col s12">
            <div id="upload-area" class="modal bottom-sheet">
                <div class="modal-content">
                    <h4>Upload</h4>

                    <div id="holder" class="valign-wrapper">
                        <p class="valign center" style="width: 100%;">Drag &amp; drop your files here!</p>
                    </div>
                    <p id="upload-not-available" class="hidden">
                        <label>
                            Drag &amp; drop is not supported, but you can still upload via:<br />
                            <input type="file" />
                        </label>
                    </p>
                    <p id="upload-no-filereader">Field API &amp; FileReader API not supported</p>
                    <p id="upload-no-formdata">XHR2's FormData is not supported</p>
                    <p id="upload-no-progress">XHR2's upload progress isn't supported</p>
                    <p>Upload progress: <progress id="upload-progress" min="0" max="100" value="0">0</progress></p>
                </div>
            </div>
        </div>
    </div>
{{ end }}
{{ define "scripts" }}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.8/ace.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.8/theme-chrome.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.8/mode-markdown.js"></script>
    <script type="text/javascript">
        (function () {
            var editor = ace.edit('editor');
            editor.setTheme('ace/theme/chrome');
            editor.getSession().setMode('ace/mode/markdown');
        })();

        (function () {
            var holder = document.getElementById('holder');
            var tests = {
                filereader: typeof FileReader != 'undefined',
                dnd: 'draggable' in document.createElement('span'),
                formdata: !!window.FormData,
                progress: "upload" in new XMLHttpRequest
            };
            var support = {
                filereader: document.getElementById('upload-no-filereader'),
                formdata: document.getElementById('upload-no-formdata'),
                progress: document.getElementById('upload-no-progress')
            };
            var acceptedTypes = {
                'image/png': true,
                'image/jpeg': true,
                'image/gif': true
            };
            var progress = document.getElementById('upload-progress');
            var fileupload = document.getElementById('upload');

            'filereader formdata progress'.split(' ').forEach(function (api) {
                if (tests[api] === false) {
                    support[api].className = 'fail';
                } else {
                    support[api].className = 'hidden';
                }
            });

            function readfiles(files) {
                var formData = tests.formdata ? new FormData() : null;
                for (var i = 0; i < files.length; i++) {
                    if (tests.formdata) {
                        formData.append('file', files[i]);
                    }
                }

                if (tests.formdata) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/');
                    xhr.onload = function () {
                        progress.value = progress.innerHTML = 100;
                    };

                    if (tests.progress) {
                        xhr.upload.onprogress = function (event) {
                            if (event.lengthComputable) {
                                var complete = (event.loaded / event.total * 100 | 0);
                                progress.value = progress.innerHTML = complete;
                            }
                        }
                    }

                    xhr.send(formData);
                }

                if (tests.dnd) {
                    holder.ondragover = function () {
                        this.className = 'hover';
                        return false;
                    };
                    holder.ondragend = function () {
                        this.className = '';
                        return false;
                    };
                    holder.ondrop = function (e) {
                        this.className = '';
                        e.preventDefault();
                        readfiles(e.dataTransfer.files);
                    };
                } else {
                    fileupload.className = 'hidden';
                    fileupload.querySelector('input').onchange = function () {
                        readfiles(this.files);
                    };
                }
            }
        })();

        $(function () {
            function toggleFullScreen() {
                var editorElement = document.getElementById('editor');

                if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullScreenElement && !document.msFullscreenElement) {
                    if (document.documentElement.requestFullscreen) {
                        editorElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                        editorElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        editorElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        editorElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                }
            }

            $('select').material_select();
            $('.modal-trigger').leanModal();
            $('button#fullscreen').click(function (event) {
                event.preventDefault();
                toggleFullScreen();
            });
        });
    </script>
{{ end }}