{{define "base"}}
<html lang="en">
  <head>
    <meta charset="utf-8" >
    <title>BrainMinder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="manifest" href="/static/manifest.json" />
    <link rel="stylesheet" href="/static/bootstrap-icons/font/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="/static/easymde/easymde.min.css" />
    <link rel="stylesheet" href="/static/css/slimselect.css" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <link rel="stylesheet" href="/static/css/orig.css" />
    <link rel="icon" type="image/svg+xml" href="/static/img/brainminder-icon.svg">
    
    {{block "page:meta" . }}
    {{
      end
    }}
  </head>
  <body hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'>

    {{template "partial:sidebar" .}}

    <div id="page-main">
    <div id="page-top-bar">
      <div id="page-title-container">
        <a class="hide-large" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-left: 4px; padding-right: 10px;">
          <img src="/static/img/brainminder.svg" alt="BrainMinder" style="height: 32px;" />
        </a>
        <div id="page-title">{{template "page:title" .}}</div>
        <div id="search-bar">
          <form class="hide-small" method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
          <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
          <input type="text" id="search-text" name="SearchText" class="w3-bar-item" placeholder="Search.." />
          <button type="submit"><i class="bi bi-search"></i></button>
          </form>
          <button type="button" onclick="bm_toggle_quickbox();"><i class="bi bi-inbox-fill"></i></button>
        </div>
      </div>
    </div>  

    <div id="page-content">
        {{template "page:content" .}}
      </div>
    </div>

    {{template "partial:footer" .}}
    <div id="message"></div>
    <div id="modal-container"></div>
    <div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>

    <div id="modal-confirm-dialog" class="w3-modal" style="display: none;">
      <div id="modal-confirm-dialog-content" class="w3-modal-content w3-round-large w3-padding w3-animate-top">
          <header class="w3-container">
              <span _="on click hide #modal-confirm-dialog" class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
              <h5></h5>
            </header>
            <div class="w3-container">
              <p></p>
            </div>
        
            <footer class="w3-container">
              <p style="text-align: center;">
                <button id="modal-confirm-ok" class="w3-btn w3-metro-dark-blue w3-round-large">Ok</button>
                <button _="on click hide #modal-confirm-dialog" class="w3-btn w3-light-gray w3-round-large">Cancel</button>
              </p>
            </footer>
      </div>
    </div>

    <div id="quickbox" class="w3-light-gray">
      <div class="w3-bar w3-top w3-metro-dark-blue w3-large noswipe" id="quickbox-top-bar">
        <div class="w3-bar-item" id="quickbox-title-container">
          <button type="button" class="w3-bar-item w3-button hide-large w3-hover-none w3-hover-text-light-grey"
            onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;">
            <img class="hide-large" alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
        </button>
          <div id="quickbox-title">
            <div class="w3-left"><h5>Quickbox</h5></div>
            <div class="w3-right" style="margin-top: 6px; margin-right: 12px;">
              <button class="w3-button w3-medium w3-round-large" style="padding: 2px 6px;" onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i></button>
            </div>
          </div>
        </div>
      </div>

      <div id="quickbox-content">
        <div id="quickbox-notes"></div>
      </div>

      <div id="quickbox-footer" class="w3-bar">
        <form method="POST">
            <div class="w3-row">
              <div class="w3-col w3-right button"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend" class="w3-bar-item w3-right w3-round-large" id="quickbox-send"><i class='bi bi-caret-right-square-fill' style="margin-top: 4px;"></i></button></div>
              <div class="w3-rest textarea"><textarea required class="w3-input w3-border w3-round-large" id="quickbox-note" style="resize: none;" name="Note"></textarea></div>
            </div>
        </form>
      </div>

    </div><!-- quickbox -->
    <script>{{block "jscode" .}}{{end}}</script>
  </body>
</html>
{{ end }}
