<!DOCTYPE html>
<!-- vim: set et: -->
<html lang="en">
  <head>
    <title>moonfire ui</title>
    <script src="bundle.js"></script>
    <style type="text/css">
      #nav {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 17em;
      }
      .ui-datepicker { width: 100%; }

      #videos {
        margin-left: 18em;
      }
      #videos tbody:after {
        content: '';
        display: block;
        height: 3ex;
      }
      tbody .name {
        background-color: #eee;
      }
      tr.r:hover { background-color: #ddd; }
      tr.r th, tr.r td { padding: 0.5ex 1.5em; text-align: right; }

      .ui-dialog .ui-dialog-content {
        overflow: visible; /* remove stupid scroll bars when resizing. */
        padding: 0;
      }
      video {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="nav">
      <form action="#">
        <fieldset>
          <legend>Cameras</legend>
          <table id="cameras">
          </table>
        </fieldset>
        <fieldset id="datetime">
          <legend>Datetime range</legend>
          <div id="start-date"></div>
          <input id="start-time" name="start-time" type="text" title="Starting
          time within the day. Blank for the beginning of the day. Otherwise
          HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a second.
          Timezone is normally left out; it's useful once a year during the
          ambiguous times of the &quot;fall back&quot; hour."><br>
          <input type="radio" name="end-date-type" id="end-date-same" checked>
          <label for="end-date-same">to same day</label><br>
          <input type="radio" name="end-date-type" id="end-date-other">
          <label for="end-date-other">to other day</label>
          <div id="end-date"></div>
          <input id="end-time" name="end-time" type="text" title="Ending
          time within the day. Blank for the end of the day. Otherwise
          HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a second.
          Timezone is normally left out; it's useful once a year during the
          ambiguous times of the &quot;fall back&quot; hour."><br>
        </fieldset>
        <label for="split">Max video length</label>
        <select name="split" id="split">
          <option value="324000000">1 hour</option>
          <option value="1296000000">4 hours</option>
          <option value="7776000000">24 hours</option>
          <option value="">infinite</option>
        </select><br>
        <input type="checkbox" checked id="trim" name="trim">
        <label for="trim">Trim segment start/end</label><br>
        <input type="checkbox" checked id="ts" name="ts">
        <label for="ts">Timestamp track</label>
      </form>
    </div>
    <table id="videos"></table>
  </body>
</html>