coriolis/app/views/page-outfit.html

<div id="outfit">

  <div id="overview">
    <h1 ng-bind="ship.name"></h1>
    <div id="build">
      <input ng-model="buildName" ng-change="bnChange()" placeholder="{{'enter name' | translate}}" maxsize="50" />
      <button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode || !canSave">
        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl" translate="save"></span>
      </button>
      <button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">
        <svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="button-lbl" translate="reload"></span>
      </button>
      <button class="danger" ng-click="deleteBuild()" ng-disabled="!savedCode">
        <svg class="icon lg"><use xlink:href="#bin"></use></svg>
      </button>
      <button ng-click="resetBuild()" ng-disabled="!code">
        <svg class="icon lg"><use xlink:href="#switch"></use></svg><span class="button-lbl" translate="reset"></span>
      </button>
      <button ng-click="exportBuild($event)"  ng-disabled="!buildName">
        <svg class="icon lg"><use xlink:href="#download"></use></svg><span class="button-lbl" translate="export"></span>
      </button>
    </div>
  </div>

  <div id="summary">
    <table id="summaryTable">
      <thead>
        <tr class="main">
          <th rowspan="2" translate="size"></th>
          <th rowspan="2" translate="agility"></th>
          <th rowspan="2" ng-class="{'bg-warning-disabled': th.c.maxmass < ship.ladenMass}" translate="speed"></th>
          <th rowspan="2" ng-class="{'bg-warning-disabled': (pd.c.enginecapacity < ship.boostEnergy || th.c.maxmass < ship.ladenMass)}" translate="boost"></th>
          <th rowspan="2" translate="DPS"></th>
          <th rowspan="2" translate="armour"></th>
          <th rowspan="2" translate="shields"></th>
          <th colspan="3" translate="mass"></th>
          <th rowspan="2" translate="cargo"></th>
          <th rowspan="2" translate="fuel"></th>
          <th colspan="3" translate="jump range"></th>
          <th colspan="3" translate="total range"></th>
          <th rowspan="2" translate="lock factor"></th>
        </tr>
        <tr>
          <th class="lft" translate="hull"></th>
          <th translate="unladen"></th>
          <th translate="laden"></th>
          <th class="lft" translate="max"></th>
          <th translate="full tank"></th>
          <th translate="laden"></th>
          <th class="lft" translate="jumps"></th>
          <th translate="unladen"></th>
          <th translate="laden"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="cap" ng-bind="SZM[ship.class] | translate"></td>
          <td>{{ship.agility}}/10</td>
          <td>
            <span ng-if="th.c.maxmass >= ship.ladenMass">{{fCrd(ship.topSpeed)}} <u translate>m/s</u></span>
            <span class="warning" ng-if="th.c.maxmass < ship.ladenMass">0 <svg class="icon"><use xlink:href="#warning"></use></svg></span>
            </td>
          <td>
            <span ng-if="pd.c.enginecapacity >= ship.boostEnergy && th.c.maxmass >= ship.ladenMass">{{fCrd(ship.topBoost)}} <u translate>m/s</u></span>
            <span class="warning" ng-if="pd.c.enginecapacity < ship.boostEnergy || th.c.maxmass < ship.ladenMass">0
              <svg class="icon"><use xlink:href="#warning"></use></svg>
            </span>
          </td>
          <td>{{fRound(ship.totalDps)}}</td>
          <td>
            {{fCrd(ship.armour)}}
            <span ng-if="ship.armourAdded || ship.armourMultiplier > 1">
            (<span ng-if="ship.armourMultiplier > 1">{{fRPct(ship.armourMultiplier)}}</span><span ng-if="ship.armourAdded && ship.armourMultiplier > 1">&nbsp;</span><span ng-if="ship.armourAdded">+ {{ship.armourAdded}}</span>)
            </span>
          </td>
          <td>{{fCrd(ship.shieldStrength)}} <u translate>MJ</u> <span ng-if="ship.shieldMultiplier > 1 && ship.shieldStrength > 0">({{fRPct(ship.shieldMultiplier)}})</span></td>
          <td>{{ship.hullMass}} <u translate>T</u></td>
          <td>{{fRound(ship.unladenMass)}} <u translate>T</u></td>
          <td>{{fRound(ship.ladenMass)}} <u translate>T</u></td>
          <td>{{fRound(ship.cargoCapacity)}} <u translate>T</u></td>
          <td>{{fRound(ship.fuelCapacity)}} <u translate>T</u></td>
          <td>{{fRound(ship.unladenRange)}} <u translate>LY</u></td>
          <td>{{fRound(ship.fullTankRange)}} <u translate>LY</u></td>
          <td>{{fRound(ship.ladenRange)}} <u translate>LY</u></td>
          <td>{{fRound(ship.maxJumpCount)}}</td>
          <td>{{fRound(ship.unladenTotalRange)}} <u translate>LY</u></td>
          <td>{{fRound(ship.ladenTotalRange)}} <u translate>LY</u></td>
          <td ng-bind="ship.masslock"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="standard" class="group">
    <div class="section-menu" ng-class="{selected: selectedSlot=='standard'}" context-menu="optimizeCommon()" ng-click="selectSlot($event, 'standard')">
      <h1>
        {{'standard' | translate}}
        <svg class="icon"><use xlink:href="#equalizer"></use></svg>
      </h1>
      <div class="select" ng-if="selectedSlot=='standard'">
        <ul>
          <li class="lc" ng-click="optimizeCommon()" translate="Optimize"></li>
          <li class="c" ng-click="useCommon('E')">E</li>
          <li class="c" ng-click="useCommon('D')">D</li>
          <li class="c" ng-click="useCommon('C')">C</li>
          <li class="c" ng-click="useCommon('B')">B</li>
          <li class="c" ng-click="useCommon('A')">A</li>
        </ul>
        <div class="select-group cap" translate="builds / roles"></div>
        <ul>
          <li class="lc" ng-click="optimizeCargo()" translate="Trader"></li>
          <li class="lc" ng-click="optimizeExplorer()" translate="Explorer"></li>
        </ul>
      </div>
    </div>
    <div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
      <div class="details">
        <div class="sz"><span>8</span></div>
        <div class="l cap" translate="bh"></div>
        <div class="r">{{ship.bulkheads.c.mass}} <u translate>T</u></div>
        <div class="cl l">{{ship.bulkheads.c.name | translate}}</div>
      </div>
      <div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)">
        <ul>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='0'}" cpid="0" translate="Lightweight Alloy"></li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='1'}" cpid="1" translate="Reinforced Alloy"></li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='2'}" cpid="2" translate="Military Grade Composite"></li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='3'}" cpid="3" translate="Mirrored Surface Composite"></li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='4'}" cpid="4" translate="Reactive Surface Composite"></li>
        </ul>
      </div>
    </div>
    <div class="slot" ng-click="selectSlot($event, pp)" ng-class="{selected: selectedSlot==pp}">
      <div class="details" ng-class="{warning: pp.c.pGen < ship.powerRetracted}">
        <div class="sz">{{::pp.maxClass}}</div>
        <div class="l">{{pp.id}} {{'pp' | translate}}</div>
        <div class="r">{{pp.c.mass}} <u translate>T</u></div>
        <div class="cb"></div>
        <div class="l cap">{{'efficiency' | translate}}: {{pp.c.eff}}</div>
        <div class="l cap">{{'power' | translate}}: {{pp.c.pGen}} <u translate>MW</u></div>
      </div>
      <div component-select class="select" s="pp" warning="ppWarning" opts="availCS.common[0]" ng-if="selectedSlot==pp" ng-click="select('c',pp,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, th)" ng-class="{selected: selectedSlot==th}">
      <div class="details"  ng-class="{'warning': th.c.maxmass < ship.ladenMass}">
        <div class="sz">{{::th.maxClass}}</div>
        <div class="l">{{th.id}} {{'t' | translate}}</div>
        <div class="r">{{th.c.mass}} <u translate>T</u></div>
        <div class="cb"></div>
        <div class="l">{{'optimal mass' | translate}}: {{th.c.optmass}} <u translate>T</u></div>
        <div class="l">{{'max mass' | translate}}: {{th.c.maxmass}} <u translate>T</u></div>
      </div>
      <div component-select class="select" s="th" mass="ship.ladenMass" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, fsd)" ng-class="{selected: selectedSlot==fsd}">
      <div class="details">
        <div class="sz">{{::fsd.maxClass}}</div>
        <div class="l">{{fsd.id}} {{'fd' | translate}}</div>
        <div class="r cr">{{fsd.c.mass}} <u translate>T</u></div>
        <div class="cb"></div>
        <div class="l cap">{{'optimal mass' | translate}}: {{fsd.c.optmass}} <u translate>T</u></div>
        <div class="l cap">{{'max' | translate}} {{'fuel' | translate}}: {{fsd.c.maxfuel}} <u translate>T</u></div>
      </div>
      <div component-select class="select" s="fsd" opts="availCS.common[2]" ng-if="selectedSlot==fsd" ng-click="select('c',fsd,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, ls)" ng-class="{selected: selectedSlot==ls}">
      <div class="details">
        <div class="sz">{{::ls.maxClass}}</div>
        <div class="l">{{ls.id}} {{'ls' | translate}}</div>
        <div class="r">{{ls.c.mass}} <u translate>T</u></div>
        <div class="cb"></div>
        <div class="l cap">{{'time' | translate}}: {{fTime(ls.c.time)}}</div>
      </div>
      <div component-select class="select" s="ls" opts="availCS.common[3]" ng-if="selectedSlot==ls" ng-click="select('c',ls,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, pd)" ng-class="{selected: selectedSlot==pd}">
      <div class="details" ng-class="{warning: pd.c.enginecapacity < ship.boostEnergy}">
        <div class="sz">{{::pd.maxClass}}</div>
        <div class="l">{{pd.id}} {{'pd' | translate}}</div>
        <div class="r">{{pd.c.mass}} <u translate>T</u></div>
        <div class="cb"></div>
        <div class="l">{{'WEP' | translate}}: {{pd.c.weaponcapacity}} <u translate>MJ</u> / {{pd.c.weaponrecharge}} <u translate>MW</u></div>
        <div class="l">{{'SYS' | translate}}: {{pd.c.systemcapacity}} <u translate>MJ</u> / {{pd.c.systemrecharge}} <u translate>MW</u></div>
        <div class="l">{{'ENG' | translate}}: {{pd.c.enginecapacity}} <u translate>MJ</u> / {{pd.c.enginerecharge}} <u translate>MW</u></div>
      </div>
      <div component-select class="select" s="pd" warning="pdWarning" opts="availCS.common[4]" ng-if="selectedSlot==pd" ng-click="select('c',pd,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, ss)" ng-class="{selected: selectedSlot==ss}">
      <div class="details">
        <div class="sz">{{::ss.maxClass}}</div>
        <div class="l">{{ss.id}} {{'s' | translate}}</div>
        <div class="r">{{ss.c.mass}} <u translate>T</u></div>
        <div class="cb"></div>
        <div class="l cap">{{'range' | translate}}: {{ss.c.range}} <u translate>km</u></div>
      </div>
      <div component-select class="select" s="ss" opts="availCS.common[5]" ng-if="selectedSlot==ss" ng-click="select('c',ss,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, ft)" ng-class="{selected: selectedSlot==ft}">
      <div class="details">
        <div class="sz">{{::ft.maxClass}}</div>
        <div class="l">{{ft.id}} {{'ft' | translate}}</div>
        <div class="r">{{ft.c.capacity}} <u translate>T</u></div>
      </div>
      <div component-select class="select" s="ft" opts="availCS.common[6]" ng-if="selectedSlot==ft" ng-click="select('c',ft,$event)"></div>
    </div>
  </div>

  <div id="internal" class="group">
    <div class="section-menu" ng-class="{selected: selectedSlot=='internal'}" context-menu="emptyInternal()" ng-click="selectSlot($event, 'internal')">
      <h1>
        {{'internal compartments' | translate}}
        <svg class="icon"><use xlink:href="#equalizer"></use></svg>
      </h1>
      <div class="select" ng-if="selectedSlot=='internal'">
        <ul>
          <li class="lc" ng-click="emptyInternal()" translate="empty all"></li>
          <li class="lc" ng-click="fillWithCargo()" translate="cargo"></li>
          <li class="lc" ng-click="fillWithCells()" translate="scb"></li>
          <li class="lc" ng-click="fillWithArmor()" translate="hr"></li>
        </ul>
      </div>
    </div>
    <div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" context-menu="select('i', i, $event, 'empty')" ng-class="{selected: selectedSlot==i}">
      <div slot-internal class="details" slot="i" fuel="ship.fuelCapacity"></div>
      <div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
        <div component-select s="i" groups="availCS.getInts(i.maxClass, i.eligible)"></div>
      </div>
    </div>
  </div>

  <div id="hardpoints" class="group">
    <div class="section-menu" ng-class="{selected: selectedSlot=='hardpoints'}" context-menu="emptyHardpoints()" ng-click="selectSlot($event, 'hardpoints')">
      <h1>
        {{'hardpoints' | translate}}
        <svg class="icon"><use xlink:href="#equalizer"></use></svg>
      </h1>
      <div class="select hardpoint" ng-if="selectedSlot=='hardpoints'">
        <ul>
          <li class="lc" ng-click="emptyHardpoints()" translate="empty all"></li>
        </ul>
        <div class="select-group cap" translate="pl"></div>
        <ul>
          <li class="c" ng-click="useHardpoint('pl','F')"><svg class="icon lg"><use xlink:href="#mount-F"></use></svg></li>
          <li class="c" ng-click="useHardpoint('pl','G')"><svg class="icon lg"><use xlink:href="#mount-G"></use></svg></li>
          <li class="c" ng-click="useHardpoint('pl','T')"><svg class="icon lg"><use xlink:href="#mount-T"></use></svg></li>
        </ul>
        <div class="select-group cap" translate="ul"></div>
        <ul>
          <li class="c" ng-click="useHardpoint('ul','F')"><svg class="icon lg"><use xlink:href="#mount-F"></use></svg></li>
          <li class="c" ng-click="useHardpoint('ul','G')"><svg class="icon lg"><use xlink:href="#mount-G"></use></svg></li>
          <li class="c" ng-click="useHardpoint('ul','T')"><svg class="icon lg"><use xlink:href="#mount-T"></use></svg></li>
        </ul>
        <div class="select-group cap" translate="bl"></div>
        <ul>
          <li class="c" ng-click="useHardpoint('bl','F')"><svg class="icon lg"><use xlink:href="#mount-F"></use></svg></li>
          <li class="c" ng-click="useHardpoint('bl','G')"><svg class="icon lg"><use xlink:href="#mount-G"></use></svg></li>
          <li class="c" ng-click="useHardpoint('bl','T')"><svg class="icon lg"><use xlink:href="#mount-T"></use></svg></li>
        </ul>
        <div class="select-group cap" translate="mc"></div>
        <ul>
          <li class="c" ng-click="useHardpoint('mc','F')"><svg class="icon lg"><use xlink:href="#mount-F"></use></svg></li>
          <li class="c" ng-click="useHardpoint('mc','G')"><svg class="icon lg"><use xlink:href="#mount-G"></use></svg></li>
          <li class="c" ng-click="useHardpoint('mc','T')"><svg class="icon lg"><use xlink:href="#mount-T"></use></svg></li>
        </ul>
        <div class="select-group cap" translate="c"></div>
        <ul>
          <li class="c" ng-click="useHardpoint('c','F')"><svg class="icon lg"><use xlink:href="#mount-F"></use></svg></li>
          <li class="c" ng-click="useHardpoint('c','G')"><svg class="icon lg"><use xlink:href="#mount-G"></use></svg></li>
          <li class="c" ng-click="useHardpoint('c','T')"><svg class="icon lg"><use xlink:href="#mount-T"></use></svg></li>
        </ul>
      </div>
    </div>
    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '!0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]"></div>
      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
      </div>
    </div>
  </div>

  <div id="utility" class="group">
    <div class="section-menu" ng-class="{selected: selectedSlot=='utility'}" context-menu="emptyUtility()" ng-click="selectSlot($event, 'utility')">
      <h1>
        {{'utility mounts' | translate}}
        <svg class="icon"><use xlink:href="#equalizer"></use></svg>
      </h1>
      <div class="select" ng-if="selectedSlot=='utility'">
        <ul>
          <li class="lc" ng-click="emptyUtility()" translate="empty all"></li>
        </ul>
        <div class="select-group cap" translate="sb"></div>
        <ul>
          <li class="c" ng-click="useUtility('sb','E')">E</li>
          <li class="c" ng-click="useUtility('sb','D')">D</li>
          <li class="c" ng-click="useUtility('sb','C')">C</li>
          <li class="c" ng-click="useUtility('sb','B')">B</li>
          <li class="c" ng-click="useUtility('sb','A')">A</li>
        </ul>
      </div>
    </div>
    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]"></div>
      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
      </div>
    </div>
  </div>

  <div class="group half" id="componentPriority">
    <table style="width:100%">
      <thead>
        <tr class="main">
          <th colspan="2" class="sortable le" ng-click="sortPwr(cName)" translate="COMPONENT"></th>
          <th style="width:3em;" class="sortable" ng-click="sortPwr('type')" translate="TYPE"></th>
          <th style="width:4em;" class="sortable" ng-click="sortPwr('priority')" translate="PRI"></th>
          <th colspan="2" class="sortable" ng-click="sortPwr('c.power')" translate="PWR"></th>
          <th style="width:3em;" class="sortable" ng-click="sortPwr(statusRetracted)" translate="ret"></th>
          <th style="width:3em;" class="sortable" ng-click="sortPwr(statusDeployed)" translate="dep"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{pp.c.class}}{{pp.c.rating}}</td>
          <td class="le shorten cap" translate="pp"></td>
          <td><u translate="SYS"></u></td>
          <td>1</td>
          <td class="ri">{{fPwr(pp.c.pGen)}}</td>
          <td class="ri"><u>100%</u></td>
          <td></td>
          <td></td>
        </tr>
        <tr><td style="line-height:0;" colspan="8"><hr style="margin: 0 0 3px;background: #ff8c0d;border: 0;height: 1px;" /></td></tr>
        <tr class="highlight" ng-repeat="c in powerList | orderBy:pwrPredicate:pwrDesc" ng-if="c.c.power" ng-class="{disabled:!c.enabled}">
          <td style="width:1em;" ng-click="togglePwr(c)">{{c.c.class}}{{c.c.rating}}</td>
          <td class="le shorten cap" ng-click="togglePwr(c)" ng-bind="cName(c)"></td>
          <td ng-click="togglePwr(c)"><u ng-bind="c.type | translate"></u></td>
          <td><span ng-click="decPriority(c)" class="flip">&#9658;</span> {{c.priority + 1}} <span ng-click="incPriority(c)">&#9658;</span></td>
          <td class="ri" style="width:3.25em;" ng-click="togglePwr(c)">{{fPwr(c.c.power)}}</td>
          <td class="ri" style="width:3em;" ng-click="togglePwr(c)"><u>{{f1Pct(c.c.power/ship.powerAvailable)}}</u></td>
          <td ng-if="!c.enabled" class="disabled upp" colspan="2" translate="disabled" ng-click="togglePwr(c)"></td>
          <td class="upp" ng-if="c.enabled" ng-click="togglePwr(c)">
            <svg class="icon secondary-disabled" ng-if="statusRetracted(c) == 3"><use xlink:href="#power"><title class="cap">{{'on' | translate}}</title></use></svg>
            <svg class="icon warning" ng-if="statusRetracted(c) == 2"><use xlink:href="#no-power"><title class="cap">{{'off' | translate}}</title></use></svg>
            <span class="disabled" translate="disabled" ng-if="statusRetracted(c) == 1"></span>
          </td>
          <td class="upp" ng-if="c.enabled"  ng-click="togglePwr(c)">
            <svg class="icon secondary-disabled" ng-if="statusDeployed(c) == 3"><use xlink:href="#power"><title class="cap">{{'on' | translate}}</title></use></svg>
            <svg class="icon warning" ng-if="statusDeployed(c) == 2"><use xlink:href="#no-power"><title class="cap">{{'off' | translate}}</title></use></svg>
            <span class="disabled" translate="disabled" ng-if="statusDeployed(c) == 1"></span>
          </td>
        </tr>
      </tbody>
    </table>
    <div style="margin-top: 1em" power-bands bands="priorityBands" available="ship.powerAvailable"></div>
  </div>

  <div class="group half">
    <table class="tabs">
      <thead>
        <tr>
          <th style="width:34%" ng-class="{active: costTab == 'ammo'}" ng-click="updateCostTab('ammo')" translate="reload costs"></th>
          <th style="width:33%" ng-class="{active: costTab == 'retrofit'}" ng-click="updateCostTab('retrofit')" translate="retrofit costs"></th>
          <th style="width:33%" ng-class="{active: costTab == 'costs'}" ng-click="updateCostTab('costs')" translate="costs"></th>
        </tr>
      </thead>
    </table>

    <div ng-if="costTab == 'costs'">
      <table style="width:100%">
        <thead>
          <tr class="main">
            <th colspan="2" class="sortable le" ng-click="sortCost(cName)">
              {{'component' | translate}}
              <u class="optional-hide" ng-if="discounts.ship < 1">[{{'ship' | translate }} -{{fRPct(1 - discounts.ship)}}]</u>
              <u class="optional-hide" ng-if="discounts.components < 1">[{{'components' | translate}} -{{fRPct(1 - discounts.components)}}]</u>
            </th>
            <th class="sortable le" ng-click="sortCost('discountedCost')" translate="credits"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="highlight" ng-repeat="item in costList | orderBy:costPredicate:costDesc" ng-if="item.c.cost > 0" ng-class="{disabled:!item.incCost}">
            <td class="toggleable" style="width:1em;"  ng-click="toggleCost(item)">{{item.c.class}}{{item.c.rating}}</td>
            <td class="le toggleable shorten cap" ng-click="toggleCost(item)">{{cName(item)}}</td>
            <td class="ri toggleable"  ng-click="toggleCost(item)">{{fCrd(item.discountedCost)}} <u translate>CR</u></td>
          </tr>
        </tbody>
      </table>
      <table class="total">
        <tr class="ri">
          <td class="lbl" translate="total"></td>
          <td>{{fCrd(ship.totalCost)}} <u translate>CR</u></td>
        </tr>
        <tr class="ri">
          <td class="lbl" translate="insurance"></td>
          <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u translate>CR</u></td>
        </tr>
      </table>
    </div>

    <div ng-if="costTab == 'retrofit'">
      <div class="scroll-x">
        <table style="width:100%">
          <thead>
            <tr class="main">
              <th colspan="2" class="sortable le" ng-click="sortRetrofit('sellName | translate')" translate="sell"></th>
              <th colspan="2" class="sortable le" ng-click="sortRetrofit('buyName | translate')" translate="buy"></th>
              <th class="sortable le" ng-click="sortRetrofit('netCost')">
                {{'net cost' | translate}} <u class="optional-hide" ng-if="discounts.components < 1">-[{{fRPct(1 - discounts.components)}}]</u>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-if="!retrofitList || retrofitList.length == 0">
              <td colspan="5" style="padding: 3em 0;" translate="PHRASE_NO_RETROCH"></td>
            </tr>
            <tr class="highlight" ng-repeat="item in retrofitList | orderBy:retroPredicate:retroDesc" ng-click="toggleRetrofitCost(item.retroItem)" ng-class="{disabled: !item.retroItem.incCost}">
              <td  style="width:1em;">{{item.sellClassRating}}</td>
              <td class="le shorten cap">{{item.sellName | translate}}</td>
              <td style="width:1em;">{{item.buyClassRating}}</td>
              <td class="le shorten cap">{{item.buyName | translate}}</td>
              <td class="ri" ng-class="item.retroItem.incCost ? item.netCost > 0 ? 'warning' : 'secondary-disabled' : 'disabled'">{{ fCrd(item.netCost)}} <u translate>CR</u></td>
            </tr>
          </tbody>
        </table>
      </div>
      <table class="total">
        <tr class="ri">
          <td class="lbl" translate="cost"></td>
          <td colspan="2" ng-class="retrofitTotal > 0 ? 'warning' : 'secondary-disabled'">{{fCrd(retrofitTotal)}} <u translate>CR</u></td>
        </tr>
        <tr class="ri">
          <td class="lbl cap" translate="retrofit from"></td>
          <td class="cen" style="border-right:none;width: 1em;"><u class="primary-disabled">&#9662;</u></td>
          <td style="border-left:none;padding:0;">
            <select style="width: 100%;padding: 0" ng-model="$parent.retrofitBuild" ng-change="setRetrofitBase()" ng-options="name as name for (name, build) in allBuilds[ship.id]">
              <option value="">{{'Stock' | translate}}</option>
            </select>

          </td>
        </tr>
      </table>
    </div>

    <div ng-if="costTab == 'ammo'">
      <div class="scroll-x">
        <table style="width:100%">
	  <thead>
	    <tr class="main">
	      <th colspan="2" class="sortable le" ng-click="sortAmmo('ammoName | translate')" translate="component"></th>
	      <th colspan="1" class="sortable le" ng-click="sortAmmo('ammoMax')" translate="quantity"></th>
	      <th colspan="1" class="sortable le" ng-click="sortAmmo('ammoUnitCost')" translate="unit cost"></th>
	      <th class="sortable le" ng-click="sortAmmo('ammoTotalCost')">
	        {{'total cost' | translate}} <u class="optional-hide" ng-if="discounts.ammo < 1">-[{{fRPct(1 - discounts.ammo)}}]</u>
	      </th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr class="highlight" ng-repeat="item in ammoList | orderBy:ammoPredicate:ammoDesc">
	      <td style="width:1em;">{{item.ammoClassRating}}</td>
	      <td class="le shorten cap">{{item.ammoName | translate}}</td>
	      <td class="ri">{{fCrd(item.ammoMax)}}</td>
	      <td class="ri">{{fCrd(item.ammoUnitCost)}} <u translate>CR</u></td>
	      <td class="ri">{{fCrd(item.ammoTotalCost)}} <u translate>CR</u></td>
	    </tr>
	  </tbody>
	</table>
      </div>
      <table class="total">
        <tr class="ri">
	  <td class="lbl" translate="total"></td>
	  <td>{{fCrd(ammoTotal)}} <u translate>CR</u></td>
	</tr>
      </table>
    </div>
  </div>

  <div class="group third">
    <h1 translate="jump range"></h1>
    <div line-chart config="jrChart" series="jrSeries"></div>
  </div>

  <div class="group third">
    <h1 translate="total range"></h1>
    <div line-chart config="trChart" series="trSeries"></div>
  </div>

  <div class="group third">
    <h1 translate="speed"></h1>
    <div line-chart config="speedChart" series="speedSeries"></div>
  </div>


  <div class="group half">
    <div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
        <svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
    </div>
  </div>

</div>