<div class="cart-bar cart-bar-fixed-bottom FixedBottom {{if cartOpen 'open'}} {{widget.classNames}}"
     style="{{widget.style}}">
    <div class="cart-bar-head">
        <table class="table cart">
            <thead {{action "toggleCartDetailsFullscreen"}} style="cursor: pointer">
                <tr>
                    <th class="col-xs-5">{{t "prop.product"}}</th>
                    <th class="col-xs-2 quantity">{{t "prop.quantity"}}</th>
                    <th class="col-xs-4 col-sm-3 cost">{{t "prop.totalPrice"}}</th>
                    <th class="col-xs-1 col-sm-2"></th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="cart-bar-body {{unless cartFullscreen 'limited'}}">
        <table>
            <tbody>
              {{#each cartCheckout.currentCart.items as |item|}}
                  <tr>
                      <td class="col-xs-5">
                        {{#link-to 'product' item.product data-dismiss="modal"}}
                            <div class="product-name">
                                <strong>{{item.product.name}}</strong>
                            </div>
                            <div class="product-summary" style="display: none">
                                <div>
                                    <span>{{item.product.additionalName}}</span>
                                </div>
                                <div>
                                    <small>{{item.product.summary}}</small>
                                </div>
                            </div>
                        {{/link-to}}
                      </td>
                      <td class="col-xs-2 quantity">
                        {{input value=item.quantity class="form-control"}}
                      </td>
                      <td class="col-xs-3 cost">
                        {{format-money item.totalPrice}}
                      </td>
                      <td class="col-xs-2 quantity">
                          <div class="input-group cart">
                              <span class="input-group-btn">
                                  <button class="btn btn-sm btn-success pull-right"
                                          type="button" {{action 'removeProduct' item.product}}>
                                      <i class="fa fa-minus"></i>
                                  </button>
                              </span>
                              <span class="input-group-btn">
                                  <button class="btn btn-sm btn-success pull-left"
                                          type="button" {{action 'addProduct' item.product}}>
                                      <i class="fa fa-plus"></i>
                                  </button>
                              </span>
                          </div>
                      </td>
                  </tr>
              {{/each}}
              {{#if cart.totalDiscount}}
                  <tr style="color: red;">
                      <td>
                          <div><strong>{{t "prop.discount"}}</strong></div>
                          <small>{{t "prop.code"}}: {{cartCheckout.currentCart.discount.code}}</small>
                      </td>
                      <td class="quantity">{{#if isDiscountPercentage}}- {{cartCheckout.currentCart.discountValue}}
                          %{{/if}}</td>
                      <td class="cost">- {{format-money cartCheckout.currentCart.totalDiscount}}</td>
                      <td></td>
                  </tr>
              {{/if}}
            </tbody>
        </table>
    </div>
    <div class="cart-bar-footer">
        <table>
            <tfoot>
                <tr>
                  {{#if cartCheckout.currentCart.items}}
                      <td class="col-xs-5" {{action "toggleCartDetails"}} style="cursor: pointer">
                          <strong><i class="fa fw fa-2x {{if cartOpen 'fa-angle-down' 'fa-angle-up'}}"></i></strong>
                      </td>
                      <td class="col-xs-2 quantity" {{action "toggleCartDetails"}}
                          style="cursor: pointer">
                        {{cartCheckout.currentCart.totalQuantity}}
                      </td>
                      <td class="col-xs-3 cost" {{action "toggleCartDetails"}} style="cursor: pointer">
                        {{format-money cartCheckout.currentCart.totalPrice}}
                      </td>
                      <td class="col-xs-2">
                          <button class="btn btn-sm btn-success col-xs-12" {{action "checkout" cartCheckout.currentCart}}
                                  disabled="{{cartCheckout.currentCart.isDirty}}"
                                  style="font-size: 12px;min-width: 60px;">
                              <span class="hidden-xs">{{t "action.checkout.execute"}}</span>
                            {{#if cartCheckout.currentCart.isDirty}}
                                <i class="fa fa-spinner fa-spin" style="line-height: 20px;"></i>
                            {{else}}
                                <i class="fa fa-play" style="dline-height: 20px;"></i>
                            {{/if}}
                          </button>
                      </td>
                  {{else}}
                      <td class="col-xs-12" style="text-align: center">
                        {{t "title.cart.empty"}}
                      </td>
                  {{/if}}
                </tr>
            </tfoot>
        </table>
    </div>
</div>