<div class="row row-eq-height">
  <div class="col-md-9 col-xs-9">
    <div class="box max-height-css">
      <div class="box-header with-border">
        <h3 class="box-title">Charges</h3>
        <h3 class='box-title pull-right'>[ Total = {{sumTotal}} ]</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <table class="table table-bordered">
          <tbody>
            <tr>
              <th style="width: 10px">#</th>
              <th>Date Added</th>
              <th>Qty</th>
              <th>Charge Name</th>
              <th>Cost</th>
              <th>Total</th>
              <th style="width: 40px">#</th>
              <th style="width: 40px">#</th>
            </tr>
            {{#each model as |item|}}
              <tr>
                <td>#</td>
                <td>{{moment-format item.createdAt 'ddd MMM DD YYYY hh:mm a'}}</td>
                <td>{{item.quantity}}</td>
                <td>{{item.product.name}}</td>
                <td>{{item.cost}}</td>
                <td>{{item.amount}}</td>
                <td>
                  {{#link-to 'admin.tasks.bookings.view.charges.edit' item class='btn btn-primary btn-xs'
                    }}Edit Charge{{/link-to}}
                </td>
                <td>
                  <button class='btn btn-primary btn-xs' onClick= {{action (route-action 'deleteRecord' item)}}>Delete</button>
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
      <!-- /.box-body -->
      <div class="box-footer clearfix">
        {{simple-pagination limit=limit currentPage=currentPage total=model.meta.total}}
      </div>
    </div>
    <!-- /.box -->

  </div>
  <!-- /.col -->
  <div class="col-md-3 col-xs-3">
    <aside class="control-sidebar relative control-sidebar-dark">
      {{#ivy-tabs selection=selection as |tabs|}}
        {{#tabs.tablist as |tablist|}}
          <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li role="presentation">
              {{#tablist.tab "TabA" on-select=(action (mut selection))}}<i class="fa fa-home"></i>{{/tablist.tab}}
            </li>
            <li role="presentation">
              {{#tablist.tab "TabB" on-select=(action (mut selection))}}<i class="fa fa-gears"></i>{{/tablist.tab}}
            </li>
          </ul>
        {{/tabs.tablist}}

        <div class="tab-content">
          {{#tabs.tabpanel "TabA"}}
            <ul class="control-sidebar-menu">
              <li>
                {{#link-to 'admin.tasks.bookings.view' }}
                  <i class="menu-icon fa fa-backward bg-red"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Back to menu</h4>

                    <p>Back to menu</p>
                  </div>
                {{/link-to}}
              </li>
              <li>
                {{#link-to 'admin.tasks.bookings.view.charges.add'}}
                  <i class="menu-icon fa fa-plus bg-red"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Add new charge</h4>

                    <p>Add a new charge</p>
                  </div>
                {{/link-to}}
              </li>
            </ul>
          {{/tabs.tabpanel}}

          {{#tabs.tabpanel "TabB"}}
            <form method="post">
              <h3 class="control-sidebar-heading">General Settings</h3>

              <div class="form-group">
                <label class="control-sidebar-subheading">
              Show bundled charges
              {{input type="checkbox" checked=isbundled}}
            </label>
              </div>
              <!-- /.form-group -->
            </form>
          {{/tabs.tabpanel}}
        </div>
      {{/ivy-tabs}}
    </aside>
  </div>
  <!--col-md-3 col-xs-3-->
</div>
{{outlet}}