<template id="knot-view" >
<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
<style data-src="/templates/livelystyle.css"></style>
<style data-src="/src/client/lively.css"></style>
<style type="text/css">
  #container {
    overflow-x: auto;
    word-wrap: break-word;
  }
  
  :host {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

#path-to-load {
  width: 100%;
}

th {
  background-color: grey;
}

th.triple-header {
  min-width: 10%;
  width:20%;
  max-width: 200px;
}

table {
  width: 100%;
}

table, thead, tbody, tr, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

tr:hover {
  background-color: lightgrey;
}

td i {
  color: grey;
}

#content-editor {
  height: 100%;
}

.todo {
  color: #b33630;
}

.todo:hover {
  background:  linear-gradient(#dc5f59, #b33630);
  color: white;
}

#delete-button {
  float: right;
  color: #b33630;
}

#delete-button:hover {
  background:  linear-gradient(#dc5f59, #b33630);
  color: white;
}

#tag-container {
  float: left;
}

#tag-container div {
  margin: 5px;
  float: left;
}

</style>
<input type="text" id="path-to-load" placeholder="path to load" title="path to load">
<div id="container">
  <div id='label-container'></div>
  <button id="delete-button" title="delete this knot">
    <i class="fa fa-trash" aria-hidden="true"></i>
  </button>
  
  <h2>URLs</h2>
  <ul id ="url-list"></ul>
  
  <h2>Tags</h2>
  <div id ="tag-container"></div>
  <button id="add-tag" title="add tag">
    <i class="fa fa-plus" aria-hidden="true"></i> Add Tag
  </button>
  
  <h2>Relations</h2>
  
  <h3>
    As Subject
    <button id="r-add-triple-as-subject" title="add triple with this as subject">
      <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  </h3>
  <table id="r-po-table">
    <thead>
      <tr>
        <th>Predicate</th>
        <th>Object</th>
        <th class="triple-header">Triple</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <h3>
    As Predicate
    <button id="r-add-triple-as-predicate" title="add triple with this as predicate">
      <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  </h3>
  <table id="r-so-table">
    <thead>
      <tr>
        <th>Subject</th>
        <th>Object</th>
        <th class="triple-header">Triple</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <h3>
    As Object
    <button id="r-add-triple-as-object" title="add triple with this as object">
      <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  </h3>
  <table id="r-sp-table">
    <thead>
      <tr>
        <th>Subject</th>
        <th>Predicate</th>
        <th class="triple-header">Triple</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  
<!--   <h2>Relations (Old)</h2>
  
  <h3>
    As Subject
    <button id="add-triple-as-subject" title="add triple with this as subject">
      <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  </h3>
  <table id="po-table">
    <thead>
      <tr>
        <th>Predicate</th>
        <th>Object</th>
        <th class="triple-header">Triple</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <h3>
    As Predicate
    <button id="add-triple-as-predicate" title="add triple with this as predicate">
      <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  </h3>
  <table id="so-table">
    <thead>
      <tr>
        <th>Subject</th>
        <th>Object</th>
        <th class="triple-header">Triple</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <h3>
    As Object
    <button id="add-triple-as-object" title="add triple with this as object">
      <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  </h3>
  <table id="sp-table">
    <thead>
      <tr>
        <th>Subject</th>
        <th>Predicate</th>
        <th class="triple-header">Triple</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table> -->
  
  <h2>Meta Data</h2>
  <table id="metadata-table"></table>
  <h2>Content</h2>
  <ul id="spo-list"></ul>
  <lively-code-mirror id="content-editor" wrapmode="true"></lively-code-mirror>
</div>
</template>


