<template id="blockchain-ui" >
<style data-src="/node_modules/bootstrap-css-only/css/bootstrap.min.css"></style>
<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
<style data-src="/templates/livelystyle.css"></style>
<style>
  div#content, content {
    width: 100%;
    height: 100%;
  }
  div.full-height {
    height: 100%;
  }
  div#node-list {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }
  div#left-sidebar {
    height: 100%;
    background: #fdfdfd;
    border-right: 1px solid #cdcdcd;
  }
  div.no-padding {
    padding:0;
  }
  div.no-margin {
    margin:0;
  }
  div.sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #ededed;
  }
  div.container {
    max-width: 100% !important;
  }
  div.border-right {
    border-right: 1px solid black;
  }
  h4.svg-headline {
    position:relative;
    padding-left: 5px;
    z-index: 99;
  }
  div.pending-transactions {
    background: #fdfdfd;
  }
</style>
<div id="content">
	<content>
    <div class="container full-height">
      <div class="row full-height">
        <div class="col-3 full-height no-padding" id="left-sidebar">
          <div id="node-list">
          </div>
          <div class="row no-margin sidebar-footer">
            <button id="new-node-button">New Node</button>
            <button id="reset-environment">Reset Environment</button>
          </div>
        </div>
        <div class="col-3 no-padding border-right">
          <h4 class="svg-headline">Blockchain</h4>
          <blockchain-node-view id="blockchain-view"></blockchain-node-view>
        </div>
        <div class="col-4 no-padding border-right">
          <h4 class="svg-headline">Transactions</h4>
          <blockchain-node-view id="transaction-view"></blockchain-node-view>
        </div>
        <div class="col-2 no-padding pending-transactions">
          <h4 class="svg-headline">Pending Transactions</h4>
          <ul id="pending-transactions-list"></ul>
        </div>
      </div>
    </div>
  </content>
</div>
</template>


