<script id="list-template" type="text/x-handlebars-template">
    <br></br>
    <br></br>
    <div class="container">
      <div class="row">
        <div class="col-md-12 contentBox">
            <h3 class="contentHeader">Filter by class</h3>
            <select class="form-control" id="classFilter">
              <option value="">All</option>
              <option value="offense">Offense</option>
              <option value="defense">Defense</option>
              <option value="tank">Tank</option>
              <option value="support">Support</option>
            </select>
        </div>
      </div>
      <br></br>
      {{#each heroes}}
      <div class="row">
        <div class="col-md-8 contentBox articleButton" id={{heroClass}} data-id={{@index}}>
          <h3 class="contentHeader">{{name}}</h3>
          <div class="container row">
            <img class="col-md-3 heroIcon" src={{icon}}>
            <p class="col-md-6" style="padding: 10px; font-size: 1.1em;">{{desc}}</p>
          </div>
        </div>
      </div>
      <br></br>
      {{/each}}
      </div>
    </div>
  </script>