{{#ivy-tabs selection=tab as |tabs|}}
  <div class="nav-tabs-custom">

    {{#tabs.tablist as |tablist|}}
      <ul class="nav nav-tabs pull-right">
        <li class="TabB">
          {{#tablist.tab "TabB" on-select=(action 'tabSelected')}}Receipts{{/tablist.tab}}
        </li>
        <li class="TabC">
          {{#tablist.tab "TabC" on-select=(action 'tabSelected')}}Direct Billing{{/tablist.tab}}
        </li>
        <li class="pull-left header"><i class="fa fa-th"></i> Payments</li>
      </ul>
    {{/tabs.tablist}}

    <div class="tab-content">
      {{#tabs.tabpanel "TabB" class="tab-pane" }}

        <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">Receipts</h3>
                <h3 class='box-title pull-right'>[ Balance = {{balance}} ]</h3>
                <h3 class='box-title pull-right'>[ Total Paid = {{totalPaid}} ]</h3>
                <h3 class='box-title pull-right'>[ Total Billed = {{totalBilled}} ]</h3>
                <h3 class='box-title pull-right'>[ Total Due = {{totalDue}} ]</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>Guest Name</th>
                      <th>Group Name</th>
                      <th>Comments</th>
                      <th>Amount Paid</th>
                      <th style="width: 40px">#</th>
                      <th style="width: 40px">#</th>
                      <th style="width: 40px">#</th>
                    </tr>
                    {{#each receipts as |item|}}
                      <tr>
                        <td>#</td>
                        <td>{{moment-format item.createdAt 'ddd MMM DD YYYY hh:mm a'}}</td>
                        <td>{{item.first_name}} {{item.last_name}}</td>
                        <td>{{item.booking.group_name}}</td>
                        <td>{{item.comments}}</td>
                        <td>{{item.amount}}</td>
                        <td>
                          <button class='btn btn-primary btn-xs' onClick= {{action 'viewReceipt' item}}>View</button>
                        </td>
                        <td>
                          {{#if isReceiptDetached}}
                            <button class='btn btn-primary btn-xs' onClick= {{action 'attachReceipt' item}}>Attach</button>
                          {{else}}
                            <button class='btn btn-primary btn-xs' onClick= {{action 'detachReceipt' item}}>Detach</button>
                          {{/if}}
                        </td>
                        <td>
                          <button class='btn btn-primary btn-xs' onClick= {{action 'deleteReceipt' 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">
              <!-- Create the tabs -->



              {{#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>
                        <a href="#" {{action "backToMenu"}}>
                        <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>
                      </a>
                      </li>
                      <li>
                        <a href="#" {{action "addReceipt"}}>
                        <i class="menu-icon fa fa-plus bg-red"></i>
                        <div class="menu-info">
                          <h4 class="control-sidebar-subheading">Add Receipt</h4>

                          <p>Add a new receipt</p>
                        </div>
                      </a>
                      </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 Detached {{input type="checkbox" checked=isReceiptDetached}}
                        </label>
                      </div>
                      <!-- /.form-group -->
                    </form>
                  {{/tabs.tabpanel}}
                </div>
              {{/ivy-tabs}}



            </aside>

          </div>
          <!--col-md-3 col-xs-3-->
        </div>

      {{/tabs.tabpanel}}
      {{#tabs.tabpanel "TabC" class="tab-pane" }}

        <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">Direct Billings</h3>
                <h3 class='box-title pull-right'>[ Balance = {{balance}} ]</h3>
                <h3 class='box-title pull-right'>[ Total Paid = {{totalPaid}} ]</h3>
                <h3 class='box-title pull-right'>[ Total Billed = {{totalBilled}} ]</h3>
                <h3 class='box-title pull-right'>[ Total Due = {{totalDue}} ]</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>Guest Name</th>
                      <th>Account</th>
                      <th>Comments</th>
                      <th>Amount Billed</th>
                      <th style="width: 40px">#</th>
                      <th style="width: 40px">#</th>
                      <th style="width: 40px">#</th>
                    </tr>
                    {{#each bills as |item|}}
                      <tr>
                        <td>#</td>
                        <td>{{moment-format item.createdAt 'ddd MMM DD YYYY hh:mm a'}}</td>
                        <td>{{item.first_name}} {{item.last_name}}</td>
                        <td>{{item.account.name}}</td>
                        <td>{{item.comments}}</td>
                        <td>{{item.amount}}</td>
                        <td>
                          <button class='btn btn-primary btn-xs' onClick= {{action 'editDirectbilling' item}}>Edit</button>
                        </td>
                        <td>
                          {{#if isBillDetached}}
                            <button class='btn btn-primary btn-xs' onClick= {{action 'attachDirectbilling' item}}>Attach</button>
                          {{else}}
                            <button class='btn btn-primary btn-xs' onClick= {{action 'detachDirectbilling' item}}>Detach</button>
                          {{/if}}
                        </td>

                        <td>
                          <button class='btn btn-primary btn-xs' onClick= {{action 'deleteDirectbilling' 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">
              <!-- Create the tabs -->

              {{#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>
                        <a href="#" {{action "backToMenu"}}>
                        <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>
                      </a>
                      </li>
                      <li>
                        <a href="#" {{action "addDirectbilling"}}>
                        <i class="menu-icon fa fa-plus bg-red"></i>
                        <div class="menu-info">
                          <h4 class="control-sidebar-subheading">Add direct billing</h4>

                          <p>Add new direct billing</p>
                        </div>
                      </a>
                      </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 Detached {{input type="checkbox" checked=isBillDetached}}
                        </label>
                      </div>
                      <!-- /.form-group -->
                    </form>
                  {{/tabs.tabpanel}}
                </div>
              {{/ivy-tabs}}

            </aside>

          </div>
          <!--col-md-3 col-xs-3-->
        </div>
      {{/tabs.tabpanel}}
    </div>
  </div>
{{/ivy-tabs}}