<%@ Page Title="" Language="C#" MasterPageFile="~/landing/landing_base.master" AutoEventWireup="true" CodeFile="cart-overview.aspx.cs" Inherits="landing_store_cart_overview" %>

<asp:Content ID="Content1" ContentPlaceHolderID="content_head" Runat="Server">

    <script src="<%= ResolveUrl("~/assets/bootstrap/js/bootstrap.js") %>"></script>
    <script src="<%= ResolveUrl("~/assets/libs/js/simple-cart-js/simplecart.js") %>"></script>
    <script src="<%= ResolveUrl("cart-overview.js") %>"></script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="left_header_content_left" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="left_header_content_right" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="right_header_content_left" Runat="Server">

    <style>

        .dropdown-menu:before {
          position: absolute;
          top: -7px;
          left: 33px;
          display: inline-block;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #ccc;
          border-left: 7px solid transparent;
          border-bottom-color: rgba(0, 0, 0, 0.2);
          content: '';
        }

        .dropdown-menu:after {
          position: absolute;
          top: -6px;
          left: 33px;
          display: inline-block;
          border-right: 6px solid transparent;
          border-bottom: 6px solid #ffffff;
          border-left: 6px solid transparent;
          content: '';
        }

        @-moz-keyframes spin {
            from { -moz-transform: rotate(0deg); }
            to { -moz-transform: rotate(360deg); }
        }
        @-webkit-keyframes spin {
            from { -webkit-transform: rotate(0deg); }
            to { -webkit-transform: rotate(360deg); }
        }
        @keyframes spin {
            from {transform:rotate(0deg);}
            to {transform:rotate(360deg);}
        }

        .shopping-cart {
            color:red; 
        }

        .shopping-cart-icon{
            color:#fff; 
        }

        .shopping-cart-icon:hover{
            color:#eee; 
        }

        .cart-count-bubble{
            position: absolute;
            background: none repeat scroll 0 0 #ffc120;
            border-radius: 50%;
            color: #444;
            display: none;
            font-size: 12px;
            font-weight: 700;
            height: 20px;
            left: 45px;
            line-height: 20px;
            padding: 0;
            top: 12px;
            width: 20px;
            text-align: center;
            font-family: myriad-pro,"Helvetica Neue",Helvetica,Arial,sans-serif;
        }

            .spin-it{
                -webkit-animation-name: spin;
                -webkit-animation-duration: 100ms;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-timing-function: linear;
                -moz-animation-name: spin;
                -moz-animation-duration: 100ms;
                -moz-animation-iteration-count: 1;
                -moz-animation-timing-function: linear;
                -ms-animation-name: spin;
                -ms-animation-duration: 100ms;
                -ms-animation-iteration-count: 1;
                -ms-animation-timing-function: linear;
            }

            .cart-count-bubble:hover {
                background: #ffcc46; 
            }
        

    </style>

    <div class="nav" style="margin-top:2px;" id="loginView_holder">
        <div id="dropdown-user" class="">
            <a style="font-size:18px; font-weight:normal;" class="shopping-cart btn dropdown-toggle" data-toggle="dropdown">        
                <i class="fw-icon-shopping-cart fw-icon-2x shopping-cart-icon animated" style="margin-right:5px;"></i>
                <span class="cart-count-bubble" style="display: inline-block;">0</span>
                <%--<span class="caret"></span>--%>
            </a>
            <ul style="color:#000; left:0px;" class="dropdown-menu">
                <div style="width:100%;padding:8px;font-size:16px;">
                    <div style="margin-top:3px;">
                        <div style="float:left; width:50px;text-align:right;margin-right:5px;">
                            <span style="text-align:right;">Items :</span>
                        </div>
                        <span style="font-family:Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif" class="cart-total-items"></span>
                    </div>
                    <div style="margin-top:5px;">
                        <div style="float:left; width:50px;text-align:right;margin-right:5px;">
                            <span style="text-align:right;">Total :</span>
                        </div>
                        <span style="font-family:Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif" class="cart-total"></span>
                    </div>
                </div>
                <li class="divider"></li>
                <li id="cart-dropdown-option-checkout"><a href="viewcart">Ver Carrito</a></li>
                <li id="cart-dropdown-option-empty" class="empty-cart"><a style="cursor:pointer;" >Vaciar</a></li>
            </ul>
        </div>
    </div>

</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="right_header_content_right" Runat="Server">
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="content_pre_body" Runat="Server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="content_body" Runat="Server">

<link rel="stylesheet" type="text/css" href="<%= ResolveUrl("../boostrap-panel.css") %>">

<div class="container-fluid">
	<div style="margin-top:15px;" class="row-fluid animated bounceInDown">
		<div class="span12">
			<div class="panel panel-info">
				<div class="panel-heading">
					<div class="panel-title">
						<div class="row-fluid">
							<div class="span6">
								<h5><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="cart-overview-panel-body panel-body">
					
				</div>
				<div class="panel-footer">
					<div class="row-fluid text-center">
						<div class="span9">
							<h4 class="text-right">Total <strong class="cart-total"></strong></h4>
						</div>
						<div class="span3 big-blue-header">
							<button type="button" class="btn btn-success btn-block btn-checkout">
								Checkout
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<script id="cart-row-template" type="text/x-handlebars-template">
    {{#each items}}
    <div data-item-row="true" data-item-id="{{id}}" class="row-fluid">
		<div class="span6">
			<h4 class="product-name"><strong>{{name}}</strong></h4>
		</div>
		<div class="span6">
			<div style="margin-top:6px;" class="span9">
                <div class="span9 text-right">
					<h6>{{currency_code}} <strong>{{price}} <span class="text-muted">x</span></strong></h6>
				</div>
				<div class="span3">
					<input type="text" class="span12 item-qty-input" value="{{quantity}}">
				</div>
            </div>
			<div class="span3 big-blue-header">
				<button type="button" class="btn btn-link btn-xs btn-trash-item">
					<span class="fw-icon-trash"> </span>
				</button>
			</div>
		</div>
	</div>
    {{/each}}
</script>


</asp:Content>

