{{ define "title" }}Loop: Workspace{{ end }}
{{ define "styles" }}
    <style>
        nav ul a,
        nav .brand-logo {
            color: #444;
        }

        nav .brand-logo {
            white-space: nowrap;
            overflow-x: hidden;
        }

        nav .button-collapse {
            color: #26a69a;
        }

        pre#editor {
            height: 100vh;
        }

        iframe#view {
            height: 100vh;
            borders: none;
        }

        div#welcome {
            height: 100vh;
        }

        div#welcome h5 {
            width: 100%;
        }

        div#holder {
            border: 2px dashed #ccc;
            /*width: 300px;*/
            min-height: 110px;
            margin: 20px auto;
        }

        .select-wrapper {
            z-index: 2;
        }

        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;
        }

        #editor-actions a.btn-flat {
            padding: 0 0.5rem;
        }

        .fixed-action-btn ul button.btn-floating {
            opacity: 0;
        }

        .fullscreen {
            width: 100%;
            height: 100vh;
        }
    </style>
{{ end }}
{{ define "content" }}

    <nav class="white" role="navigation">
        <div class="nav-wrapper container">
            <div id="slide-out" class="side-nav">
                <h4 class="black-text center">Loop</h4>
                <div class="row">
                    <div class="col s12">
                        <select class="teal-text">
                            <option value="" disabled>Select a directory</option>
                            <option value="Personal" selected>Personal</option>
                        </select>
                    </div>
                    <div class="col s12 center">
                        <a class="waves-effect waves-light btn modal-trigger" href="#modal-new-directory">New Content</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12">
                        <div class="collection">
                            {{ range $d := .Directories }}
                                {{ if eq $d $.Title }}
                                    <a class="collection-item active" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                                {{ else }}
                                    <a class="collection-item" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                                {{ end }}
                            {{ end }}
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
            <div class="brand-logo">{{ .Title }}</div>
        </div>
    </nav>

    <div class="row">
        <div id="left-pane" class="col l2 hide-on-med-and-down">
            <div class="row">
                <div class="col s12">
                    <select class="teal-text">
                        <option value="" disabled>Select a directory</option>
                        <option value="Personal" selected>Personal</option>
                    </select>
                </div>
                <div class="col s12 center">
                    <a class="waves-effect waves-light btn modal-trigger" href="#modal-new-directory">New Content</a>
                </div>
            </div>
            <div class="row">
                <div class="col s12" style="overflow-y: auto;">
                    <div class="collection">
                        {{ range $d := .Directories }}
                            {{ if eq $d $.Title }}
                                <a class="collection-item active" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                            {{ else }}
                                <a class="collection-item" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
                            {{ end }}
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>

        <div id="workarea" class="col s12 m12 l10">
            <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
                <a id="create" class="btn-floating btn-large red" title="Edit">
                    <i class="large mdi-editor-mode-edit"></i>
                </a>
                <ul>
                    <li><a id="delete" class="btn-floating red" title="Delete"><i class="large mdi-action-delete"></i></a></li>
                    <li><a id="save" class="btn-floating amber" title="Save"><i class="large mdi-content-save"></i></a></li>
                    <li><a id="publish" class="btn-floating green" title="Publish"><i class="large mdi-editor-publish"></i></a></li>
                    <li><a id="upload" class="btn-floating blue modal-trigger" href="#upload-area" title="Attach file"><i class="large mdi-editor-attach-file"></i></a></li>
                </ul>
            </div>
            {{ if .Title }}
                <div id="zoom" class="row">
                    <div id="editor-actions" class="col s12 m12 l12">
                        <a id="fullscreen" class="waves-effect waves-teal btn-flat right" title="Fullscreen">
                            <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>
                        </a>
                        <a id="preview" class="waves-effect waves-teal btn-flat right" title="Toggle Mode">
                            <i class="mdi-action-cached left hide-on-med-and-down"></i>
                            <i class="mdi-action-cached hide-on-large-only"></i>
                            <span class="hide-on-med-and-down">Preview</span>
                        </a>
                    </div>
                    <pre id="editor" class="col s12 m12 l12">{{ .Content }}</pre>
                    <iframe id="view" class="col s12 m12 l12" style="display: none;" frameBorder="0" seamless="seamless" src="/{{ .Username }}/edit/{{ .Title | urlquery }}/preview"></iframe>
                </div>
            {{ else }}
                <div class="row">
                    <div id="welcome" class="col s12 m12 l12 valign-wrapper">
                        <h5 class="valign center">Welcome!</h5>
                    </div>
                </div>
            {{ end }}
        </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>

    <div id="modal-new-directory" class="modal">
        <div class="modal-content">
            <h4>New Content</h4>
            <form id="new-directory" class="col s12" method="post" action="/{{ .Username }}/edit/">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="title" name="title" type="text" class="validate">
                        <label for="title">Document Title</label>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <a id="new" href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Create</a>
            <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
        </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 () {
            if (document.getElementById('editor')) {
                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 zoom = document.getElementById('zoom');

                if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
                    if (document.documentElement.requestFullscreen) {
                        zoom.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                        zoom.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        zoom.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        zoom.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-collapse').sideNav();

            $('#fullscreen').click(function (event) {
                event.preventDefault();
                $('#zoom').toggleClass('fullscreen');
                toggleFullScreen();
            });

            $('#preview').click(function (event) {
                event.preventDefault();
                var editor = ace.edit('editor');

                if (!$('#view').is(':visible')) {
                    $.ajax({
                        url: window.location.href,
                        method: 'put',
                        data: {
                            'contents': editor.getValue()
                        }
                    })
                    .done(function () {
                        $('#view').attr('src', $('#view').attr('src'));
                        $('#editor, #view').toggle();
                    });
                } else {
                    $('#editor, #view').toggle();
                }
            });

            $('a#delete').click(function (event) {
                event.preventDefault();
                var title = $('input#title').val();

                $.ajax({
                    url: window.location.href,
                    method: 'delete'
                })
                .done(function () {
                    window.location.href = '/{{ .Username }}';
                });
            });

            $('form#new-directory').submit(function (event) {
                var title = $('input#title').val();
                var action = $(this).attr('action');
                $(this).attr('action', action + encodeURIComponent(title));
                return true;
            });
            $('a#new').click(function (event) {
                event.preventDefault();
                $('form#new-directory').submit();
                return false;
            });

            $('a#save').click(function (event) {
                event.preventDefault();
                var editor = ace.edit('editor');

                $.ajax({
                    url: window.location.href,
                    method: 'put',
                    data: {
                        'contents': editor.getValue()
                    }
                });
            });
        });
    </script>
{{ end }}