app/components/race-panel/template.hbs
<div class="panel panel-default">
<div class="panel-body race-panel-body">
<div class="row">
<div class="col-xs-6 text-right">
<strong>Type</strong>
</div>
<div class="col-xs-6">
{{capitalize model.type}}
<span class="pull-right">
<span class="glyphicon glyphicon-remove red hidden-delete" aria-hidden="true" {{action 'showModal'}}></span>
</span>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-right">
<strong>Distance</strong>
</div>
<div class="col-xs-6">
{{#if model.isTri}}
{{model.shortNameLabel}}
{{else if model.isBike}}
{{#if model.bikeKilometers}}
{{format-number model.bikeKilometers maximumFractionDigits="1"}} km / {{format-number model.bikeMiles maximumFractionDigits="1"}} miles
{{else}}
0
{{/if}}
{{else if model.isRun}}
{{#if model.shortName}}
{{model.shortNameLabel}}
{{else}}
{{#if model.runKilometers}}
{{format-number model.runKilometers maximumFractionDigits="1"}} km / {{format-number model.runMiles maximumFractionDigits="1"}} miles
{{else}}
0
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
<div class="row">
<div class="col-xs-6 text-right">
<strong>Surface</strong>
</div>
<div class="col-xs-6">{{capitalize model.surface}}</div>
</div>
</div>
</div>
{{#if isShowingModal}}
{{#modal-dialog translucentOverlay=true}}
<div class="row">
<div class="col-xs-12">
Are you sure you want to delete this race?
</div>
</div>
<br>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" {{action 'closeModal'}}>No</button>
</div>
<div class="col-xs-4 col-xs-offset-4">
<button class="btn btn-danger" {{action 'deleteRace'}}>Yes</button>
</div>
</div>
{{/modal-dialog}}
{{/if}}