doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    meta(name='description', content='')
    meta(name='keywords', content='')
    meta(name='author', content='')
    title
      | Overview ·
    link(href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic', rel='stylesheet')
    link(href='http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css', rel='stylesheet')
    link(href='/admin/assets/css/toolkit-light.css', rel='stylesheet')
    link(href='/admin/assets/css/application.css', rel='stylesheet')
    link(href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css', rel='stylesheet')
    style.
      body {
        width: 1px;
        min-width: 100%;
        *width: 100%;
      }
      .rightSideBar.open{
        overflow-y: scroll;
        right: 0;
      }
      .rightSideBar{
        position: fixed;
        padding: 10px;
        top: 0;
        right: -15%;
        bottom: 0;
        width: 15%;
        z-index: 9;
        background-color: #f5f5ff;
        text-align: center;
      }

      .rightSideBarTrigger{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1%;
        background-color: #DDDBD4;
        min-width: 15px;
      }

      .rightSideBarTrigger.open{
        right: 15%;
      }

body
    .container
      .row
        .col-md-12
      .row
        .col-sm-3.sidebar
          nav.sidebar-nav
            .sidebar-header
              button.nav-toggler.nav-toggler-sm.sidebar-toggler(type='button', data-toggle='collapse', data-target='#nav-toggleable-sm')
                span.sr-only Toggle nav
              a.sidebar-brand.img-responsive(href='/admin')
                span.icon.icon-leaf.sidebar-brand-icon
                |  hackable
            #nav-toggleable-sm.collapse.nav-toggleable-sm
              ul.nav.nav-pills.nav-stacked
                li.nav-header Dashboards
                li
                  a(href='/admin') Overview
                br

                ul.nav.nav-pills.nav-stacked
                  li.nav-header Administrative
                  li
                    a(href='/auth/logout') Logout
                br

                ul.nav.nav-pills.nav-stacked
                  li.nav-header User
                  li
                    a(href='/admin/users') Users
                  li
                    a(href='/admin/user') Add User
                br

                ul.nav.nav-pills.nav-stacked
                  li.nav-header Blog
                  li
                    a(href='/admin/posts') Posts
                  li
                    a(href='/admin/post') Add Post
                br
                ul.nav.nav-pills.nav-stacked
                  li.nav-header Project
                  li
                    a(href='/admin/projects') Projects
                  li
                    a(href='/admin/project') Add Project
                br
                ul.nav.nav-pills.nav-stacked
                  li.nav-header Product
                  li
                    a(href='/admin/products') Products
                  li
                    a(href='/admin/product') Add Product
                br
                ul.nav.nav-pills.nav-stacked
                  li.nav-header File
                  li
                    a(href='/admin/files') Files
                  li
                    a(href='/admin/file') Add File


              hr.visible-xs.m-t
        #flash.col-sm-9.content
          include ../partials/flash
          block content
            h1 Default content
        #docsModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel')
          .modal-dialog
            .modal-content
              .modal-header
                button.close(type='button', data-dismiss='modal', aria-label='Close')
                  span(aria-hidden='true') ×
                h4#myModalLabel.modal-title Example modal
              .modal-body
                p You're looking at an example modal in the dashboard theme.
              .modal-footer
                button.btn.btn-primary(type='button', data-dismiss='modal') Cool, got it!
        .rightSideBarTrigger
        .rightSideBar
          h3 Files
          p drag and drop files
          div.rightSideContent.list-group
    script(src='/admin/assets/js/jquery.min.js')
    script(src='/admin/assets/js/chart.js')
    script(src='/admin/assets/js/tablesorter.min.js')
    script(src='/admin/assets/js/toolkit.js')
    script(src='/admin/assets/js/application.js')
    script(src='//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js')
    script.
      $(function () {
        //global image uploader
        function handleImageDrop(e){
          e.preventDefault()
          var files = e.originalEvent.dataTransfer.files
          var formData = new FormData()

          //upload files
          $(files).each( function(index, file){
            formData.append('file', file)
          })

          $.ajax({
            url: '/admin/images/upload',
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            success: addToSideBar,
            error: function (err) {
              console.log('error', err)
            }
          })

        }

        function addToSideBar(files){
          //add uploaded files to the sidebar
          files.forEach(function (file) {
            $filename = file.originalname;
            $destination = file.destination;
            $file = file.filename;
            $url = "/uploads/" + $file;
            toggleSideBar();

            if ($filename.includes(".jpg", ".gif")) {
              $('.rightSideContent').prepend(`<a href="#" class="list-group"><img width="100%" class="trigger img-thumbnail" src="${$url}" value="${$url}" /><p>${$filename}</p></a>`);
            } else {
              $('.rightSideContent').prepend(`<a href="#" class="list-group"><h3 class="trigger" value="${$url}">"${$filename}"</h3></a>`);
            }
          })
        }

        $('body')
                .on('dragover', function(){ return false } )
                .on('dragenter', function(){ return false } )
                .on('drop', handleImageDrop )

        // Model Page Searches
        $('.model_search').keypress(function (e) {
          var key = e.which;
          if (key === 13 ) {
            var query = $(this).val();
            var url = [location.protocol, '//', location.host, location.pathname].join('');
            if (query.length)
              window.location.href = url + '?search=' + encodeURI(query);
          }
        });

        //copies file url to clipboard
        $('.rightSideContent').on('click', ".trigger", function(e){
          e.preventDefault();
          var url = $(this).attr("value");
          copy(url);
        })

        $('.rightSideBarTrigger').click( toggleSideBar )
      })



      function toggleSideBar(){
        $('.rightSideBarTrigger').toggleClass('open')
        $('.rightSideBar').toggleClass('open');
      }

      function copy(string) {
        var dummy = document.createElement("input");
        // Add it to the document
        document.body.appendChild(dummy);
        // Set its ID
        dummy.setAttribute("id", "dummy_id");
        // Output the array into it
        document.getElementById("dummy_id").value = string;
        // Select it
        dummy.select();
        // Copy its contents
        document.execCommand("copy");
        // Remove it as its not needed anymore
        document.body.removeChild(dummy);
      }

    block scripts