conveyal/modeify

<li class="RouteCard">
  <div class="benefits-badge savings" data-visible="costPerTrip"><strong>$ {costPerTrip}</strong></div>

  <div class="header" title="score: {score}">
    <span data-visible="hasRideshareMatches"><strong>{externalCarpoolMatches + internalCarpoolMatchesCount}</strong> {modeDescriptor} matches</span>
    <span data-hidden="hasRideshareMatches">{modeDescriptor}</span>
  </div>

  <div class="simple clearfix">
    <div class="segments" data-html="segments"></div>

    <div class="minutes-column">
      <div class="heading"><strong>{average}</strong> mins</div>

      <div data-visible="freeflowTime">{freeflowTime} without traffic</div>
      <div data-visible="hasTransit">
        <div class="distance" data-visible="bikeDistances">{bikeTime} min biking</div>
        <div class="distance" data-visible="walkDistances">{walkTime} min walking</div>
      </div>
      <div data-hidden="hasTransit">
        <div class="distance" data-visible="bikeDistances">{bikeDistances} mi biking</div>
        <div class="distance" data-visible="walkDistances">{walkDistances} mi walking</div>
      </div>
    </div>

    <button class="btn btn-default select-button" on-tap="selectOption">select</button>

    <div class="details-buttons">
      <button class="btn btn-sm btn-dark show-hide show-details" href="#" on-tap="showDetails"><i class="fa fa-fw fa-plus-circle"></i> details</button>
      <button class="btn btn-sm btn-dark show-hide hide-details" href="#" on-tap="hideDetails"><i class="fa fa-fw fa-minus-circle"></i> hide</button>
    </div>
  </div>
  <div class="details">
    <div reactive="directions"></div>
    <div class="feedback">
      <a href="#" on-tap="feedback"><i class="fa fa-fw fa-gear"></i> help improve route</a>
    </div>
  </div>
</li>