coriolis/app/views/page-comparison.html

<table id="comparison">
  <tr ng-show="compareMode">
    <td class="head" translate="comparison"></td>
    <td>
      <input ng-model="name" ng-change="nameChange()" placeholder="{{'enter name' | translate}}"  maxlength="50" />
      <button ng-click="save()" ng-disabled="!name || name == 'all' || saved">
        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl"> {{'save' | translate}}</span>
      </button>
      <button ng-click="delete()" ng-disabled="name == 'all' || !saved"><svg class="icon lg warning "><use xlink:href="#bin"></use></svg></button>
      <button ng-click="selectBuilds(true, $event)">
    <svg class="icon lg "><use xlink:href="#rocket"></use></svg><span class="button-lbl"> {{'builds' | translate}}</span>
      </button>
      <button class="r" ng-click="permalink($event)" ng-disabled="builds.length == 0">
        <svg class="icon lg "><use xlink:href="#link"></use></svg><span class="button-lbl"> {{'permalink' | translate}}</span>
      </button>
      <button class="r" ng-click="embed($event)" ng-disabled="builds.length == 0">
        <svg class="icon lg "><use xlink:href="#embed"></use></svg><span class="button-lbl"> {{'forum' | translate}}</span>
        </button>
    </td>
  </tr>
  <tr ng-show="!compareMode">
    <td class="head" translate="comparison"></td>
    <td>
      <h3 ng-bind="name"></h3>
      <button class="r" ui-sref="modal.import({obj:importObj})"><svg class="icon lg "><use xlink:href="#download"></use></svg> {{'import' | translate}}</button>
    </td>
  </tr>
  <tr>
    <td class="head" translate="compare"></td>
    <td>
      <ul id="facet-container" as-sortable="facetSortOpts" ng-model="facets" class="sortable" update="tblUpdate">
        <li ng-repeat="(i,f) in facets" as-sortable-item class="facet" ng-class="{active: f.active}" ng-click="toggleFacet(i)">
          <div as-sortable-item-handle>&#x2194; <span ng-bind="f.title | translate"></span></div>
        </li>
      </ul>
    </td>
    </tr>
</table>

<div class="scroll-x">
  <table id="comp-tbl" comparison-table ng-click="handleClick($event)"></table>
</div>

<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart facet="f" data="builds">
  <h3 ng-click="sort(f.props[0])" >{{f.title | translate}}</h3>
</div>

<div class="modal-bg" ng-show="showBuilds" ng-click="selectBuilds(false, $event)">
  <div class="modal" ui-view="modal-content" ng-click="$event.stopPropagation()">
    <h3 translate="PHRASE_SELECT_BUILDS"></h3>
    <div id="build-select">
      <table>
        <thead><tr><th colspan="2" translate="available"></th></tr></thead>
        <tbody>
          <tr ng-repeat="b in unusedBuilds | orderBy:'name'" ng-click="addBuild(b.id, b.buildName)">
            <td class="tl" ng-bind="b.name"></td><td class="tl" ng-bind="b.buildName"></td>
          </tr>
        </tbody>
      </table>
      <h1>⇆</h1>
      <table>
        <thead><tr><th colspan="2" translate="added"></th></tr></thead>
        <tbody>
          <tr ng-repeat="b in builds | orderBy:'name'" ng-click="removeBuild(b.id, b.buildName)">
            <td class="tl" ng-bind="b.name"></td><td class="tl" ng-bind="b.buildName"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <br>
    <button class="r dismiss cap" ng-click="selectBuilds(false, $event)" translate="done"></button>
  </div>
</div>