<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel=stylesheet href="/misc/bootstrap.min.css">
<link rel="stylesheet" href="/misc/codemirror.css">
<style>
  html {
    position: relative;
    min-height: 100%;
  }
  body {
    margin-top: 60px;
  }
/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
  border-right: 1px solid #ccc;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    resize: horizontal;
  }
}

.container {
  width: auto;
}

.navbar {
  border-bottom: 1px solid #ccc;
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
  
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

/* Main Content */
.main {
  padding-left: 40px;
}

.sidebar ul, li {
  margin-left: 2px; 
  padding-left: 1px;
  list-style-type: square;
  }

mark {
  background-color: lightblue;
  color: black;
}
</style>
</head>
<body>


 <!-- Fixed navbar -->
    <nav class="navbar navbar-fixed-top navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/start">GoWiki</a>
          <div id="breadcrumb" class="navbar-brand"></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li id="btnEditpage"><a href="#" onclick="EditPage()">Edit</a></li>
            <li id="btnPreviewpage"><a href="#" onclick="PreviewPage()">Preview</a></li>
            <li id="btnSavepage"><a href="#" onclick="SavePage()">Save</a></li>
            <li id="btnPDFgen"><a href="#" onclick="PDFGen()">PDF</a></li>
            <li id="btnLogout"><a href="#" onclick="Logout()">Logout</a></li>
          </ul>
          <form class="navbar-form nav navbar-nav navbar-right" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
           </div>
          </form>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container-fluid">
      <div class="d-flex flex-row">
        <div id="sidebar" class="p-2 sidebar">
          <div id="outputsidebar" style="display: none;">{{.SideBar}}</div>
        </div>
        <div id="main" class="p-2 main">
          <div id="markdowndiv" style="display: none;">{{.MDText}}</div>
          <div id="outputdiv" style="display: none;">{{.MDText}}</div>
          <div id="editdiv" style="display: none;">
            <form><textarea id="code" name="code"></textarea>
          </div>
          <div id="ModificationInfos" style="position:fixed;top:98%;right:1%"></div>
        </div>
      </div>
	  </div>

    <script language=javascript src="/misc/jquery.min.js"></script>
    <script language=javascript src="/misc/bootstrap.min.js"></script>
    <script language=javascript src="/misc/showdown.min.js"></script>
    <script language=javascript src="/misc/codemirror.js"></script>
    <script language=javascript src="/misc/markdown.js"></script>

    <script type="text/javascript">
        
        var html = "EMPTY";
        var MD2HTMLConverter = new showdown.Converter({
          tables: true, 
          strikethrough: true,
          simplifiedAutoLink: true,
          excludeTrailingPunctuationFromURLs: true,
          tasklists: true,
          emoji: true
        });
    
        $(document).ready(function() {
          
          $(btnEditpage).show();
          $(btnSavepage).hide();
          $(btnPreviewpage).hide();

          
          //-----------------------------------------------------------------------------------
          // Breadcrump Navigation im Header      
          var breadcrumbHTML = "";
          var sPageURL = window.location.pathname.split('/');
    
          for (i = 1; i < sPageURL.length; i++) {
            if(i==sPageURL.length-1) {
              breadcrumbHTML = breadcrumbHTML + '/'+sPageURL[i]+'';
            }
            else {
              breadcrumbHTML = breadcrumbHTML + '<a href="/'+sPageURL[i]+'/start">/'+sPageURL[i]+'</a> ';
            }
    
          }
          
          $("#breadcrumb").html(breadcrumbHTML); 
    
          //-----------------------------------------------------------------------------------
          // Codemirror Editor
          window.myCodeMirror = CodeMirror.fromTextArea(document.getElementById("code"), {
                mode: 'markdown',
                lineNumbers: true,
                theme: "default",
                extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
              });
              window.myCodeMirror.setSize("auto", "auto");
    
          $(window.myCodeMirror.getWrapperElement()).slideDown('normal', function(){
            window.myCodeMirror.refresh();
          });
    
          //-----------------------------------------------------------------------------------
          // Laden des Outputdiv (HTML Anzeige des MD-Textes)
          $.ajax({
            method: "GET",
            contentType:'application/json; charset=utf-8',
            url: '/_api/md/'+window.location.pathname,
            dataType: "json",
            data: "",
            success: function(content){								
              $("#outputdiv").html(MD2HTMLConverter.makeHtml(content));
              $("#outputdiv").show();

              $('#outputdiv table').addClass('table table-sm table-bordered table-striped');
            }						
          });
          
          //-----------------------------------------------------------------------------------
          // Laden der sidebar.md in die Sidebar
          $.ajax({
            method: "GET",
            contentType:'application/json; charset=utf-8',
            url: '/_api/md/sidebar',
            dataType: "json",
            data: "",
            success: function(content){
              html = MD2HTMLConverter.makeHtml(content+$("#outputsidebar").html());					
              $("#outputsidebar").html(html);
              $("#outputsidebar").show();
            }						
          });
          
          //-----------------------------------------------------------------------------------
          // Laden der Config
          $.ajax({
            method: "GET",
            contentType:'application/json; charset=utf-8',
            url: '/_api/config',
            dataType: "json",
            data: "",
            success: function(data){			
              if(!data.FTS) {
                $("#srch-term").hide();
              }
              if(!data.Login)
              {
                $("#btnLogout").hide();
              }
            }						
          });

          //-----------------------------------------------------------------------------------
          
          ajaxLoadModificationInfos(window.location.pathname);

          //-----------------------------------------------------------------------------------
          // Volltext-Suche
          $('#srch-term').keypress(function (e) {
            if (e.which == 13) {
              //alert($('#srch-term').val());

              $.ajax({
                method: "GET",
                contentType:'application/json; charset=utf-8',
                url: '/_api/fts/'+$('#srch-term').val(),
                dataType: "json",
                data: "",
                success: function(content){
                  
                  html = "<h2> Suche</h2>Der Suchbegriff <b>\""+$('#srch-term').val()+"\"</b> wurde <b>"+content.length +"</b> mal in folgenden Seiten gefunden:<hr>"
                  //html = MD2HTMLConverter.makeHtml(content+$("#outputsidebar").html());					
                  //console.log(content);
                  $("#outputdiv").html(html);
                  $("#outputdiv").show();
                  
                  content.forEach(function (item, index) {
                    console.log(item.id);
                    var page = item.id.replace(/.md/, ''); 
                    $("#outputdiv").append((index+1)+". Seite: <a href='/"+page+"'>/"+page+"</a><br>");
                    $("#outputdiv").append(item.fragments.Text+"<hr>");

                  }); 
                }						
              });
              return false; 
            }
          });

          //-----------------------------------------------------------------------------------
          // Abschnitt für das dynamische Anpassend er Sidebar via ResizeObserver
          $("#sidebar").width(localStorage.getItem("sidebar_width"));
          $(main).css('margin-left',localStorage.getItem("sidebar_width")+'px');

          var ro = new ResizeObserver( entries => {
            for (let entry of entries) {
              const cr = entry.contentRect;
                localStorage.setItem("sidebar_width",cr.width);
                $(main).css('margin-left',localStorage.getItem("sidebar_width")+'px');
            }
          });

          // Observe one or multiple elements
          ro.observe(document.querySelector('#outputsidebar'));
          //-----------------------------------------------------------------------------------

        });
    
        function EditPage() {
          
          $(btnEditpage).hide();
          $(btnSavepage).show();
          $(btnPreviewpage).show();

          $.ajax({
            method: "GET",
            contentType:'application/json; charset=utf-8',
            url: '/_api/md/'+window.location.pathname,
            dataType: "json",
            data: "",
            success: function(content){
              
              $("#outputdiv").hide();
              //$("#code").html(content);
              $("#editdiv").show();
              
              window.myCodeMirror.setValue(content);
    
            }						
          });
        }
    
        function PreviewPage() {
          var content = "###Vorschau\n ----- \n"+window.myCodeMirror.getValue()+"\n ----- \n";
          $("#outputdiv").html(MD2HTMLConverter.makeHtml(content));
          $("#outputdiv").show();
        }

        function SavePage() {
          var obj = {
					  MDText	: 	window.myCodeMirror.getValue()
				  };

          $.ajax({
            method: "POST",
            contentType:'application/json; charset=utf-8',
            url: window.location.pathname,
            dataType: "json",
            data: JSON.stringify(obj),
            success: function(data){           
              $("#outputdiv").html(MD2HTMLConverter.makeHtml(obj.MDText));
              $("#outputdiv").show();
              $("#editdiv").hide();

              $(btnEditpage).show();
              $(btnSavepage).hide();
              $(btnPreviewpage).hide();

              ajaxLoadModificationInfos(window.location.pathname);
            }						
          });
        }

        function PDFGen() {
          // Öffnet die PDF über die API einfach in einem neuen Fenster
          window.open('/_api/pdf'+window.location.pathname);
        }

        function ajaxLoadModificationInfos(page) {
          // Laden des ModificationInfos-Div (Anzeige der letzten Änderung an der Seite)
          $.ajax({
            method: "GET",
            contentType:'application/json; charset=utf-8',
            url: '/_api/pinfo/'+page,
            dataType: "json",
            data: "",
            success: function(content){								
              //date = new Intl.DateTimeFormat('de-DE').format(new Date(content.ModTime));
              date = new Date(content.ModTime).toLocaleString('de-DE');
              $("#ModificationInfos").html("<p><small>Letzte änderung: "+date+"</small></p>");
              $("#ModificationInfos").show();
            }						
          });
        }

        function Logout(){
          try {
            // Hack for Firefox/Chrome
            $.ajax({
                url: "/",
                username: 'reset',
                password: 'reset',
                // If the return is 401, refresh the page to request new details.
                statusCode: { 401: function() {
                    location.reload();
                    }
                }
            });
        } catch (exception) {
            // Hack for IE only
            if (!document.execCommand("ClearAuthenticationCache")) {
                document.location = "http://reset:reset@" + document.location.hostname + document.location.pathname;
                location.reload();
            }
        }
        }
    </script>
  <script>
	//--------------------------------------------------------------------------
	// Hilfsfunktionen
	//--------------------------------------------------------------------------
	
	function getUrlParameter(sParam) {
		var sPageURL = window.location.search.substring(1),
			sURLVariables = sPageURL.split('&'),
			sParameterName,
			i;

		for (i = 0; i < sURLVariables.length; i++) {
			sParameterName = sURLVariables[i].split('=');

			if (sParameterName[0] === sParam) {
				return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
			}
		}
	};
  </script>
</body></html>