<div class="row">
  <div class="col-md-12">
    {{{nav}}}
    <p><a href="{{BASE_URI}}doc">Publication and rules</a></p>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Test a document against the <a href="{{BASE_URI}}doc">publication and transition rules</a></h3>
      </div>
      <div class="panel-body">
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a id="valuri" href="#validate_uri">Validate by URI</a></li>
          <li role="presentation"><a id="valfile" href="#validate_file">Validate by file upload</a></li>
        </ul>
        <form id="options" class="form-horizontal manual">

          <div class="form-group">
            <label for="url" class="col-xs-3 col-sm-1 col-md-1 col-lg-1 control-label">URL</label>
            <div id="urlContainer" class="col-xs-9 col-sm-4 col-md-5 col-lg-5">
              <input type="url" class="form-control" id="url" name="url" required autofocus="autofocus"  placeholder="https://www.w3.org/TR/2016/WD-foobar-YYYYMMDD/">
            </div>
            <label for="file" class="col-xs-3 col-sm-1 col-md-1 col-lg-1 control-label hidden">File</label>
            <div id="fileContainer" class="col-xs-9 col-sm-4 col-md-5 col-lg-5 hidden">
              <input type="file" class="form-control" id="file" name="file" accept=".html" required autofocus="autofocus" disabled="disabled">
            </div>
            <label for="profile" class="col-xs-3 col-sm-1 col-md-1 col-lg-1 control-label">Profile</label>
            <div id="profileContainer" class="col-xs-9 col-sm-4 col-md-4 col-lg-4">
              <select class="form-control" id="profile" name="profile" required>
                <option value="auto" selected="selected">Auto-detect</option>
                {{#each tracks}}
                  <optgroup label="{{this.name}}">
                  {{#each this.profiles}}
                    <option value="{{this.abbr}}">{{this.abbr}}&nbsp;&mdash;&nbsp;{{this.name}}</option>
                  {{/each}}
                  </optgroup>
                {{/each}}
              </select>
            </div>
            <div id="check1" class="col-sm-2 col-md-1 col-lg-1">
              <button type="submit" class="btn btn-primary pull-right">Check</button>
            </div>
          </div>

          <div class="form-group manual">
            <label class="col-xs-3 col-sm-1 col-md-2 control-label">Validation</label>
            <div id="validation" class="col-xs-9 col-sm-5 col-md-4 btn-group" data-toggle="buttons">
              <label id="no-validation" class="btn btn-primary">
                <input type="radio" name="validation">
                None
              </label>
              <label id="simple-validation" class="btn btn-primary active">
                <input type="radio" name="validation">
                Simple
              </label>
              <label id="recursive" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Recursively validate multipart documents">
                <input type="radio" name="validation">
                Recursive <span class="info">i</span>
              </label>
            </div>
          </div>

          <div class="form-group manual">
            <div class="col-xs-offset-3 col-xs-9 col-sm-offset-1 col-sm-4">
              <label class="control-label">
                <input type="checkbox" id="informativeOnly" name="informativeOnly">
                Informative-only
              </label>
            </div>
            <div class="col-xs-offset-3 col-xs-9 col-sm-offset-0 col-sm-3">
              <label class="control-label" data-toggle="tooltip" data-placement="top" title="Check that the document is valid for automatic publication with Echidna">
                <input type="checkbox" id="echidnaReady" name="echidnaReady">
                <a href="https://github.com/w3c/echidna/wiki">Echidna</a>-ready <span class="info">i</span>
              </label>
            </div>
          </div>

        <div id="check2" class="form-group">
          <div class="col-xs-12">
            <button type="submit" class="btn btn-primary pull-right">Check</button>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>
</div>

<div id="progressBar" class="row">
  <div class="col-xs-12">
    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="0" style="width: 0">
        <span class="">x/y done</span>
      </div>
    </div>
  </div>
</div>

<div id="results" class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2 class="panel-title">Result</h2>
      </div>
      <div class="panel-body"></div>
      <ul class="list-group"></ul>
    </div>
  </div>
</div>

<div class="alert alert-info" role="alert">
  Graphical UIs not your thing? Check out the
  <a href="https://github.com/w3c/specberus/blob/master/README.md#5-rest-api">REST interface</a>
  against the
  <a href="{{BASE_URI}}api/">endpoint of this instance (<code>{{BASE_URI}}api/</code>)</a>.
</div>
