    <div class="container">
      <div class="row">
        <div class="span12 pod">
          <div class="pod-header">
            <h2>Current heads</h2>
          </div>

<table class="table striped">
  <thead>
    <tr>
      <th>Plugin</th>
      <th>Head</th>
      <th>Type</th>
      <th>Path</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
<%
   for (var i = 0, len = plugins.length; i < len; i++) {
      for (var j = 0, len2 = plugins[i].heads.length; j < len2; j++) {
         var currentHead = plugins[i].heads[j];
%>
    <tr <%-
           (matchingHeads.some(function(head) {
                                   return plugins[i].name == head.plugin &&
                                       currentHead.name == head.head;
                               })) ?
               'class="is-highlighted"' : ''
        %>>
      <td><%= plugins[i].name %></td>
      <td><%= currentHead.name %></td>
      <td><%= currentHead.type %></td>
      <td><% if (currentHead.method !== '*') { %>
                <strong><%= currentHead.method %></strong>
          <% } %><% if (currentHead.hostname !== '.*') { %>
                        //<em><%= currentHead.hostname %></em><%
                    }
           %><%= currentHead.mountPath || currentHead.path %></td>
      <td>
        <form method="post"
              action="<%= baseUrl %>/head/toggle-attachment">
          <input type="hidden" name="pluginName" value="<%= plugins[i].name %>">
          <input type="hidden" name="headName" value="<%= currentHead.name %>">
          <% if (currentHead.attached()) { %>
            <button type="submit" class="btn small success">attached</button>
          <% } else { %>
            <button type="submit" class="btn small warning">detached</button>
          <% } %>
        </form>
      </td>
    </tr>
<%
      }
   }

   if (plugins.reduce(function(acc, plugin) {
                          return plugin.heads.length + acc;
                      }, 0) === 0) {
%>
       <tr>
         <td colspan="5">
           Oh, noes! A headless RoboHydra!
         </td>
       </tr>
<%
   }
%>
  </tbody>
</table>
          <form class="form pod-footer">
            <fieldset>
              <legend class="h4">Path debugger</legend>
              <div class="form-group single">
                <label for="highlightPath" class="muted">Highlight
                  heads matching the following path:</label>
                <select id="highlightMethod" name="highlightMethod">
                  <% ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'].forEach(function(method) { %>
                         <option<% if (highlightMethod === method) { %> selected="selected"<% } %>><%= method %></option>
                  <% }); %>
                </select>
                <input id="highlightPath" name="highlightPath" type="text"
                       placeholder="/some/path" value="<%= highlightPath %>" size="30">
                <button type="submit" class="btn primary">Highlight</button>
              </div>
            </fieldset>
          </form>
        </div><!--/span-->
      </div><!--/row-->

      <div class="row">
        <div class="span8 pod">
          <form class="form pod-body" method="post" action="<%= baseUrl %>/head/create">
            <fieldset>
              <legend class="h3">Create a new head</legend>

               <label for="newHeadType">Type</label>
               <select id="newHeadType" name="newHeadType">
                 <option value="static">Static</option>
                 <option value="filesystem">File serving</option>
                 <option value="proxy">Reverse proxy</option>
               </select>

               <div class="new-head-props new-head-props-static">
                 <label for="newStaticHeadPath">Create new head listening in
                   paths matching this regular expression</label>
                 <input type="text" id="newStaticHeadPath" name="newStaticHeadPath"
                        placeholder="/foo/[0-9]*">

                 <label for="newStaticHeadContent">Returning the given
                   content</label>
                 <textarea id="newStaticHeadContent" name="newStaticHeadContent"
                           placeholder="Content to be returned by the new head"></textarea>

                 <label for="newStaticHeadStatus">With the following status code</label>
                 <input type="text" id="newStaticHeadStatus"
                        name="newStaticHeadStatus"
                        placeholder="200">

                 <label for="newStaticHeadContentType">Set explicit Content-Type</label>
                 <input type="text" id="newStaticHeadContentType"
                        name="newStaticHeadContentType"
                        placeholder="text/plain, application/json, …">

                 <label for="newStaticHeadContentType">Set arbitrary headers (one per line)</label>
                 <textarea id="newStaticHeadHeaders" name="newStaticHeadHeaders"
                           placeholder="X-Punchline: What did I do now?"></textarea>
               </div>

               <div style="display: none" class="new-head-props new-head-props-filesystem">
                 <label for="newFilesystemHeadMountPath">Create new head listening in
                   any paths under this directory</label>
                 <input type="text" id="newFilesystemHeadMountPath" name="newFilesystemHeadMountPath"
                        placeholder="/foo">

                 <label for="newFilesystemHeadDocumentRoot">Serving files from this
                   directory</label>
                 <input type="text" id="newFilesystemHeadDocumentRoot" name="newFilesystemHeadDocumentRoot"
                        placeholder="/var/www">
               </div>

               <div style="display: none" class="new-head-props new-head-props-proxy">
                 <label for="newProxyHeadMountPath">Create new head listening in
                   any paths under this directory</label>
                 <input type="text" id="newProxyHeadMountPath" name="newProxyHeadMountPath"
                        placeholder="/foo">

                 <label for="newProxyHeadProxyTo">Proxying requests to the
                   given URL</label>
                 <input type="text" id="newProxyHeadProxyTo" name="newProxyHeadProxyTo"
                        placeholder="http://example.com/bar">

                 <input type="checkbox" id="newProxyHeadSetHostHeader"
                        name="newProxyHeadSetHostHeader"
                        checked="checked"> Set 'Host' Header
               </div>

              <div class="form-actions">
                <button type="submit" class="btn primary">Create</button>
              </div>
            <fieldset>
          </form>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/container-->
