%page-top%

<!--// Copyright 2015 Yabdab Inc. | Payloom v.%version% | Published at %publish-date% //-->

%page-header%

%demo-string%

<div id="payloom3" class="%stacks-class%">
    
    <div class="pl-container">
        
        <div id="payloom-header">
        </div><!-- #payloom-header -->
        
        
        <div id="payloom-products" class="payloom-pane active" style="">

            <div id="payloom-nav">
            <form class="pl-search-form" role="search">
            <div class="pl-form-group">
                
                %cart-button%

              <div class="pl-input-group pl-input-group-lg">
                <span class="pl-input-group-btn">
                  <button type="button" class="pl-btn pl-btn-default pl-dropdown-toggle" data-toggle="pl-dropdown" aria-expanded="false">
                    <span><i class="pl-icon-caret-down"></i></span>
                  </button>
                  <!-- Category Dropdown -->
                  <div class="pl-dropdown-menu">
                      <div class="pl-list-group">
                          <a href="*" class="pl-list-group-item pl-filter">%show-all-text%</a>
                          %product-categories%
                      </div>
                  </div>
                </span><!-- .pl-input-group-btn -->
                <input type="text" class="pl-search pl-form-control" aria-label="Filter" placeholder="%filter-text%">
                <div class="pl-input-group-btn pl-layout-buttons">
                   <button type="button" class="pl-btn pl-btn-default pack"><i class="pl-icon-pack"></i></button>
                   <button type="button" class="pl-btn pl-btn-default grid"><i class="pl-icon-grid"></i></button>
                   <button type="button" class="pl-btn pl-btn-default list"><i class="pl-icon-th-list"></i></button>
                </div>
              </div><!-- pl-input-group -->
            </div><!-- pl-form-group -->

            </form>
            </div>
            
            <div class="payloom-pane-inner">
                <ul class="payloom-products-list %default-display-mode%">
                    %products-list%
                </ul>
            </div><!-- payloom-pane-inner -->
        </div><!-- #payloom-products -->
        
        
        
        
        <div id="payloom-cart-view" class="payloom-pane">
		            
            <!-- <h3 class="page-header">Cart Page</h3> -->
        
            <!-- cart loads here -->
            <div id="payloom-container" style="">
                <div id="payloom-contents">
                    <div class="payloom-content"></div>
                </div>
            </div>
            
            <form id="payloom-co-extras" class="pl-form-horizontal">
                %checkout-extras%
            </form>

            <div id="payloom-cart-footer">
                
                %stripe-checkout-button%
                %direct-checkout-button%
                %paypal-checkout-button%
                
                
            </div>
            
        </div><!-- #payloom-cart -->
     
     
        <!-- PRODUCTS DETAILS -->
        %products%
        
        
        <!-- ALERTS -->
        <div id="payloom-alerts" class="payloom-pane">
        </div><!-- #payloom-alerts -->
        
        %stripe-trigger%
        
    </div><!-- .pl-container -->  
</div><!-- #payloom3 -->

%demo-string%

%page-footer%
%page-bottom%

%cartloom-base%