workflow.html

<div class="row">

    <div class="col-lg-4">
            <div class="help-block">Search by workflow name:</div>
            <div class="input-group">
            <input type="text" class="search-text form-control" placeholder="Enter workflow name...">
            <span class="input-group-btn">
                <button class="search-btn btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
            </span>
        </div>
    </div>

    <div class="col-lg-2">
        <div class="help-block">Reset:</div>
        <div class="input-group">
            <button class="reset-btn btn btn-default" type="button">View All</button>
        </div>
    </div>
    <!-- NOTE: for the radio buttons used below for filtering, Firefox persists form control states
    (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off".
    See Mozilla bug #654072 https://bugzilla.mozilla.org/show_bug.cgi?id=654072. -->

    <div class="col-lg-3">
        <div class="help-block">Filter by inputs:</div>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Workflows for all input types">
                <input class="filter-input-btn" type="radio" value="any" autocomplete="off">Any
            </label>
            <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Workflows that accept a Darwin Core Archive URL as input">
                <input class="filter-input-btn" type="radio" value="dwca" autocomplete="off">DwCA
            </label>
            <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Workflows that accept a CSV or TSV file as input">
                <input class="filter-input-btn" type="radio" value="csv" autocomplete="off">CSV
            </label>
        </div>
    </div>

    <div class="col-lg-3">
        <div class="help-block">Filter by Darwin Core class:</div>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input class="filter-class-btn" type="radio" value="any" autocomplete="off">Any
            </label>
            <!--<label class="btn btn-default">
                <input class="filter-class-btn" type="radio" value="occurrence" autocomplete="off">Occurrence
            </label>-->
            <label class="btn btn-default">
                <input class="filter-class-btn" type="radio" value="event" autocomplete="off">Event
            </label>
            <!--<label class="btn btn-default">
                <input class="filter-class-btn" type="radio" value="identification" autocomplete="off">Identification
            </label>-->
            <label class="btn btn-default">
                <input class="filter-class-btn" type="radio" value="location" autocomplete="off">Location
            </label>
            <!--<label class="btn btn-default">
                <input class="filter-class-btn" type="radio" value="taxon" autocomplete="off">Taxon
            </label>-->
        </div>
    </div>

</div>

<hr />

<div id="sortable">
 <% _.each(definitions, function(def) { %>

    <div class="bs-callout bs-callout-primary" style="padding-left: 3em">

      <h4 style="float:left; margin-left: -1em; line-height: 2em;">
        <a href="<%= def.documentation %>" target="_blank">
          <img src="<%= infoImg %>" />
        </a><%= def.title %></h4>

        <% _.each(def.alternatives, function(alternative) { %>
        <div style="float:left; padding-left: 20px;" >
            <a href="#workflow/<%= alternative.name %>" class="btn btn-primary btn-sm">Run with <b><%= alternative.type %> <%= alternative.format %></b> <span class="glyphicon glyphicon-play"></span></a>
        </div>
        <% }); %>

        <div style="float:right;">
        <% _.each(def.class, function(dwcClass) { %>

            <span class="label label-default">dwc:<%= dwcClass %></span>
            <% }) %>
        </div>

      <div style="clear: both; margin-left: 0.7em; font-size: 1em"><%= def.summary %></div>
        </div>

    <% }); %>
</div>

 <div id="run-modal" class="modal fade" tabindex="-1">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h3 id="run-modal-title" class="modal-title" id="gridSystemModalLabel">Modal title</h3>
       </div>

       <div id="run-modal-body" class="modal-body">

       </div>

       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
         <button id="run-btn" type="button" class="btn btn-primary">Run Workflow</button>
       </div>
     </div>
   </div>
 </div>