<div class="shopping-cart-page" ng-controller="ShoppingCartPageController">
  <div class="shopping-cart-page-wrapper" ng-if="!orderSuccess">
    <div class="title">
      <h1>YOUR CART</h1>
    </div>
    <div class="items-wrapper-header">
      <div class="product">
        Product
      </div>
      <div class="duration">
        Duration
      </div>
      <div class="price">
        Price
      </div>
    </div>
    <div class="items-wrapper">
      <div class="item" ng-repeat="item in shoppingCartItems">
        <div class="item-img">
          <img ng-src="{{item.imageUrl}}">
        </div>
        <div class="item-title">
          <h3>{{item.title}}</h3>
          <button ng-click="removeItem($index)" type="button">Remove</button>
        </div>
        <div class="item-duration">
          {{item.weekCount > 1 ? item.weekCount + ' weeks' : item.weekCount + ' week'}}
        </div>
        <div class="item-price">
          {{item.overallPrice}} USD
        </div>
      </div>
    </div>
    <div class="no-selected" ng-if="!totalPrice()">
      No diets selected
    </div>
    <div class="items-footer">
      <div class="total-price">
          Total {{totalPrice()}} USD
      </div>
      <div class="btns">
        <button type="button"><a href="#">continue shopping</a></button>
        <button type="button" ng-click="checkOut()">check out</button>
      </div>
    </div>
  </div>
  <div ng-if="orderSuccess" class="order-success-wrapper">
    <div class="order-success">
      <h1>Thank you for your purchase!</h1>
      <div class="order-success-btns">
        <button type="button"><a href="#">continue shopping</a></button>
        <button type="button"><a href="#!/user-page">to your profile</a></button>
      </div>
    </div>
  </div>
</div>
