<!DOCTYPE html>
<html>
  <head>
    <title>in?</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="index.js"></script>
    <script src="shared.js"></script>
  </head>
  <body>
    <div id="grid">
      <div id="searchcontainer">
        <input type="text" id="search" value="" autocomplete="off" placeholder="RegEx search" tabindex="1" autofocus>
        <label for="showhidden">Show hidden items</label>
        <input type="checkbox" id="showhidden">
      </div>
      <div id="mapcontainer">
        <div id="map">
          <img src="80x80.svg" title="Map for reference only. Not to scale!">
          <div id="mapgrid"></div>
        </div>
        <p id="mapnote"></p>
      </div>
      <div id="results">
        <span id="loading">loading…</span>
        <template id="item">
          <div id="" class="result" tabindex="0" onfocus="showItem(event)" onfocusout="hideItem(event)">
            <h2>
              <span class="id"></span>
              <span class="name"></span>
              <a title="edit">⚙</a>
              <span class="loc"></span>
            </h2>
            <div class="type"></div>
            <div class="note"></div>
            <div class="content"></div>
          </div>
        </template>
      </div>
      <a href="form.html" class="btn green">+</a>
    </div>
  </body>
</html>