<template id="research-diary" >
<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
<style data-src="/templates/livelystyle.css"></style>
<style type="text/css">
:host {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#content {
  overflow: auto;
  word-wrap: break-word;
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  overflow: visible;  
}
#main {
  flex: 1;
  display: flex;
  flex-direction: row;
}
#editor {
  background-color: red;
  flex: 1;
}
#ace {
  height: 100%;
}
#viewer {
  flex: 0 0 5px;
/*   min-width: 300px; */
}

  
#nav {
  background-color: #F5F5F5;
  border-top: 1px solid #d5d5d5;
  border-right: 1px solid #d5d5d5;
  overflow: auto;
}

ul {
  width: auto;
  margin:0;
  list-style-type: none;
  padding: 0;
}
ul li {
  margin: 0px;
  padding: 2px;
  font-size: 11pt;
}
ul li a {
  width: 200px;
  display: box;
  white-space: nowrap;
  text-decoration: none;
  color: #444444;
}
ul li a:hover {
  background-color: gray;
  color: white;
  cursor: pointer
}

.selected {
  background-color: lightgray;
  color: white;
  cursor: pointer
}
  
#viewer  {
  overflow: auto;
  min-width: 200px;
}

#clipped-viewer {
  width: 200px;
  height: 100px; /* I don't know why this works... */
}

  
#scaled-viewer {
  transform: scale(0.5);
  transform-origin: top left;
  width: calc(200% - 24px - 12px);
  padding: 10px;
}
#content {
  overflow-y: auto;
}
</style>
<div id="top">
  <button id="new" title="new">
    <i class="fa fa-plus" aria-hidden="true"></i> Create Today's Entry
  </button>
</div>
<div id="content">
  <div id="nav">
    <ul>
      <li>23.30.19</li>
      <li>23.30.19</li>
      <li>23.30.19</li>
    </ul>
  </div>
  <div id="main">
    <div id="editor">
      <lively-code-mirror id="ace"></lively-code-mirror>
    </div>
  </div>
  <div id="viewer">
    <div id="clipped-viewer">
      <div id="scaled-viewer">
        <lively-markdown id="markdown"></lively-markdown>    
      </div>
    </div>
  </div>
</div>
</template>

