@(rules: List[Rule])

@main("Ode: Rule Browser") {
  <div class="container-full">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <div id="rule-list">
          @for(rule <- rules) {
            <div id="@rule.name" class="rule-item"
                 data-name="@rule.name" data-description="@rule.description">
            </div>
          }
        </div>
      </div>
    </div>
  </div>
}

@(rules: List[Rule])

@main("Ode: Rule Browser") {
  <div class="container-full">

    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <h1>
          Rules
          <span class="col-md-4 pull-right">
            <input id="rule-filter" class="form-control input-lg"
                   type="text" placeholder="Filter ..." />
          </span>
        </h1>
        <hr />
      </div>
    </div>

    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <div id="rule-list">
          @for(rule <- rules) {
            <div id="@rule.name" class="rule-item"
                 data-name="@rule.name" data-description="@rule.description">
            </div>
          }
        </div>
      </div>
    </div>

  </div>
}

Add "Rules" heading and "Filter ..." field to Rule Browser.
Add "Rules" heading and "Filter ..." field to Rule Browser.

Note that the "Filter ..." field does not do anything yet.
