{{#ivy-tabs selection=selection 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')}}Rooms{{/tablist.tab}}
        </li>
        <li class="TabA">
          {{#tablist.tab "TabA" on-select=(action 'tabSelected')}}Charges{{/tablist.tab}}
        </li>
        <li class="pull-left header"><i class="fa fa-th"></i>Room Charges</li>
      </ul>
    {{/tabs.tablist}}

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

        {{#if paymentClaim.hasRooms}}
          <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'>Unselected Rooms</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  {{#light-table roomsTable tableClassNames='table table-bordered' tableActions=(hash
                    onCheckboxChanged=(action 'checkboxChanged')) as |t|}}
                    {{t.head}} {{t.body onRowClick=(perform roomClickedTask) multiSelect=true }}
                  {{/light-table}}
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!--col-md-9-->
            <div class="col-md-3 col-xs-3">
              <aside class="control-sidebar relative control-sidebar-dark">
                <!-- Create the tabs -->
                <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
                  <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                  <!-- Home tab content -->
                  <div class="tab-pane active" id="control-sidebar-home-tab">
                    {{!--<h3 class="control-sidebar-heading">Actions</h3>--}}
                    <ul class="control-sidebar-menu">

                      <li>
                        <a href="#" {{action "goToModelList"}}>
                          <i class="menu-icon fa fa-backward bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Back to {{modelname}}s</h4>

                            <p>Back to {{modelname}}s list</p>
                          </div>
                        </a>
                      </li>
                      <li>
                        <a href="#" {{action "allRoomsClicked"}}>
                          <i class="menu-icon fa fa-plus bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Add Rooms</h4>
                            <p>Add these rooms to {{modelname}}</p>
                          </div>
                        </a>
                      </li>

                    </ul>
                    <!-- /.control-sidebar-menu -->
                  </div>
                  <!-- /.tab-pane -->
                </div>
              </aside>
            </div>
            <!--col-md-3 col-xs-3-->
            <!-- /.col -->
          </div>
        {{/if}}
        <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'>Selected Rooms</h3>
                <h3 class='box-title pull-right'>[ Total = {{paymentClaim.sumTotal}} ]</h3>
                <h3 class='box-title pull-right'>[ Pax = {{paymentClaim.sumPax}} ]</h3>
                <h3 class='box-title pull-right'>[ Childs = {{paymentClaim.sumChilds}} ]</h3>
                <h3 class='box-title pull-right'>[ Adults = {{paymentClaim.sumAdults}} ]</h3>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                {{#light-table selectedRoomsTable tableActions=(hash onCheckboxChanged=(action
                  'selectedCheckboxChanged') onInputChanged=(action 'inputChanged')) tableClassNames='table table-bordered'
                  as |t|}}
                  {{t.head}}
                  {{#t.body selectOnClick=false onRowDoubleClick=(perform unSelectRoomClickedTask)
                    as |body|}}

                    {{#if selectedRoomsTable.isEmpty}}
                      {{#body.no-data}}
                        <p>No Items List</p>
                      {{/body.no-data}}
                    {{/if}}
                  {{/t.body}}
                {{/light-table}}
              </div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
          </div>
          {{!--col-md-9 col-xs-9--}}
          {{#if paymentClaim.hasSelectedRooms}}
            <div class="col-md-3 col-xs-3">
              <aside class="control-sidebar relative control-sidebar-dark">
                <!-- Create the tabs -->
                <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
                  <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                  <!-- Home tab content -->
                  <div class="tab-pane active" id="control-sidebar-home-tab">
                    {{!--<h3 class="control-sidebar-heading">Actions</h3>--}}
                    <ul class="control-sidebar-menu">
                      <li>
                        <a href="#" {{action "goToModelList"}}>
                          <i class="menu-icon fa fa-backward bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Back to {{modelname}}s</h4>

                            <p>Back to {{modelname}}s list</p>
                          </div>
                        </a>
                      </li>
                      <li>
                        <a href="#" {{action 'unSelectAllRoomClicked'}}>
                          <i class="menu-icon fa fa-minus bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Remove Rooms</h4>
                            <p>Remove these rooms to {{modelname}}</p>
                          </div>
                        </a>
                      </li>
                      <li>
                        <a href="" {{action 'savePaymentClaim'}}>
                          <i class="menu-icon fa fa-floppy-o bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Save {{modelname}}</h4>
                            <p>Click to save {{modelname}}</p>
                          </div>
                        </a>
                      </li>
                    </ul>
                    <!-- /.control-sidebar-menu -->
                  </div>
                  <!-- /.tab-pane -->
                </div>
              </aside>
            </div>
            <!--col-md-3 col-xs-3-->
          {{/if}}
          <!-- /.col -->
        </div>
      {{/tabs.tabpanel}}
      {{#tabs.tabpanel "TabA" class="tab-pane" }}
        {{#if paymentClaim.hasCharges}}
          <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'>Unselected Charges</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  {{#light-table chargesTable tableClassNames='table table-bordered' tableActions=(hash
                    onCheckboxChanged=(action 'checkboxChanged')) as |t|}}
                    {{t.head}} {{t.body onRowClick=(perform chargeClickedTask) multiSelect=true }}
                  {{/light-table}}
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!--col-md-9-->
            <div class="col-md-3 col-xs-3">
              <aside class="control-sidebar relative control-sidebar-dark">
                <!-- Create the tabs -->
                <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
                  <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                  <!-- Home tab content -->
                  <div class="tab-pane active" id="control-sidebar-home-tab">
                    {{!--<h3 class="control-sidebar-heading">Actions</h3>--}}
                    <ul class="control-sidebar-menu">

                      <li>
                        <a href="#" {{action "goToModelList"}}>
                          <i class="menu-icon fa fa-backward bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Back to {{modelname}}s</h4>

                            <p>Back to {{modelname}}s list</p>
                          </div>
                        </a>
                      </li>
                      <li>
                        <a href="#" {{action "allChargesClicked"}}>
                          <i class="menu-icon fa fa-plus bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Add Charges</h4>
                            <p>Add these charges to {{modelname}}</p>
                          </div>
                        </a>
                      </li>

                    </ul>
                    <!-- /.control-sidebar-menu -->
                  </div>
                  <!-- /.tab-pane -->
                </div>
              </aside>
            </div>
            <!--col-md-3 col-xs-3-->
            <!-- /.col -->
          </div>
        {{/if}}
        <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'>Selected Charges</h3>
                <h3 class='box-title pull-right'>[ Total = {{paymentClaim.sumChargesTotal}} ]</h3>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                {{#light-table selectedChargesTable tableActions=(hash onCheckboxChanged=(action
                  'selectedCheckboxChanged') onInputChanged=(action 'inputChanged')) tableClassNames='table table-bordered'
                  as |t|}}
                  {{t.head}}
                  {{#t.body selectOnClick=false onRowDoubleClick=(perform unSelectChargeClickedTask)
                    as |body|}}

                    {{#if selectedChargesTable.isEmpty}}
                      {{#body.no-data}}
                        <p>No Items List</p>
                      {{/body.no-data}}
                    {{/if}}
                  {{/t.body}}
                {{/light-table}}
              </div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
          </div>
          {{!--col-md-9 col-xs-9--}}
          {{#if paymentClaim.hasSelectedCharges}}
            <div class="col-md-3 col-xs-3">
              <aside class="control-sidebar relative control-sidebar-dark">
                <!-- Create the tabs -->
                <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
                  <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                  <!-- Home tab content -->
                  <div class="tab-pane active" id="control-sidebar-home-tab">
                    {{!--<h3 class="control-sidebar-heading">Actions</h3>--}}
                    <ul class="control-sidebar-menu">
                      <li>
                        <a href="#" {{action "goToModelList"}}>
                          <i class="menu-icon fa fa-backward bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Back to {{modelname}}s</h4>

                            <p>Back to {{modelname}}s list</p>
                          </div>
                        </a>
                      </li>
                      <li>
                        <a href="#" {{action 'unSelectAllChargeClicked'}}>
                          <i class="menu-icon fa fa-minus bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Remove Charges</h4>
                            <p>Remove these charges to {{modelname}}</p>
                          </div>
                        </a>
                      </li>
                      <li>
                        <a href="" {{action 'savePaymentClaim'}}>
                          <i class="menu-icon fa fa-floppy-o bg-red"></i>
                          <div class="menu-info">
                            <h4 class="control-sidebar-subheading">Save {{modelname}}</h4>
                            <p>Click to save {{modelname}}</p>
                          </div>
                        </a>
                      </li>
                    </ul>
                    <!-- /.control-sidebar-menu -->
                  </div>
                  <!-- /.tab-pane -->
                </div>
              </aside>
            </div>
            <!--col-md-3 col-xs-3-->
          {{/if}}
          <!-- /.col -->
        </div>
      {{/tabs.tabpanel}}
    </div>
  </div>
{{/ivy-tabs}}