<!DOCTYPE html>

<html ng-app="myapp"> 
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{$commonMetaTitle}</title>
    <meta name="description" content="{$commonMetaDescription|unescape:'html'|escape:'html'}" />
    <meta name="viewport" content="width=device-width">
    <meta name="Keywords" content="{$commonMetaKeywords|unescape:'html'|escape:'html'}" />
    <link rel="image_src" href="{$commonMetaImage|default:''}" />
    <meta property="og:title" content="{$commonMetaTitle|unescape:'html'|escape:'html'}"/>
    <meta property="og:image" content="{$commonMetaImage|default:''}"/>
    {include file='CommonStyles.tpl'}
    <link rel="stylesheet" href="{$view_styles}/compare.css" />
    {include file='CommonJavaScript.tpl'}
  </head>
  <body ng-controller="SearchCtrl"> 
    {*<!------------------------- Begin : Outer Pane ---------------------------->*}
    <div id="main">
      {*<!-------------------------- Begin : Header Pane--------------------------->*} 
      {include file='CommonTop.tpl'} 
      {*<!------------------------ End : Header ------------------------------------->*}
      <div id="content-wrapper" ng-show="!query">
        {*<!----------------------------- Begin : Content Pane ------------------------------>*}
        <div class="container">
          <div id="common_message"></div>
          <div class="rightPane row padding light-bg ">
            <h2 class="caption1">{$language.lblCompareProducts}</h2>
            {assign var="attributeTdWidth" value="200"}			
            {assign var="tdWidth" value="200"}				
            {assign var="tableWidth" value="{{$attributeTdWidth}+{($tdWidth*$productCount)}}"}
            <div class="iebrd">
              <table border="0" cellspacing="0" cellpadding="0" width="100%" align="left" class="attribute-listing iebrd">
                <tr class="compareCommonDiv hide"></tr>
                <tr class="imageTableRow" >
                  <td style=" border:0px" width="{$attributeTdWidth}" class="">
                    <div class="titleImage">
                      <div class="image"></div>
                    </div>
                  </td>
                  {foreach $productIDArray as $products}					
                  <td class="" valign="top">
                    <div class="imageBox">					
                      <img src="{$view_public_path}/uploads/catalog/product/thumb/{$productDetailsArray[$products]['productImage']}"  alt="image" >
                    </div>
                    <div class="deatils">
                      {$productDetailsArray[$products]['productTitle']}
                      <br/>
                      <strike>{$productDetailsArray[$products]['productOptionRegularPrice']|price:'':$productDetailsArray[$products]['productDefaultCurrency']:$productDetailsArray[$products]['productDefaultCurrency']}</strike>
                      <span>{$productDetailsArray[$products]['offerPrice']|price:'':$productDetailsArray[$products]['productDefaultCurrency']:$productDetailsArray[$products]['productDefaultCurrency']}</span>
                      {if $productDetailsArray[$products]['tierPrice']>0}
                      <div>{$language.lblAsLowAs} {$productDetailsArray[$products]['tierPrice']|price:'':$productDetailsArray[$products]['productDefaultCurrency']:$productDetailsArray[$products]['productDefaultCurrency']}</div>
                      {/if}
                    </div>
                    {if $productDetailsArray[$products]['productReviewsCount'] > 0}
                    <div class="ratingBx">
                      {assign var="avgRating" value=$productDetailsArray[$products]['ratingTotal']/$productDetailsArray[$products]['productReviewsCount']}
                      {assign var="avgRating" value=$avgRating|round:2}
                      <div class="starRating">
                        <div class="rated" style="width:{$avgRating * 16}px"></div>
                      </div>
                      [ {$language.lblRated} {$avgRating}/5  ]
                    </div>
                    {/if}
                    {html->anchor href="{$productDetailsArray[$products]['productID']|sef_path:'product'}" caption=$language.lblViewDetails target="_blank" class="detail-view"}
                  </td>
                  {/foreach}
                </tr>
                {foreach $attributeArray as $attributes}
                <tr>
                  <td colspan="{$productCount+1}" class="subHead"><strong>
                    {$attributes['attributeGroupName']}
                    </strong>
                  </td>
                </tr>
                {foreach $attributes['attributes'] as $attribute}
                <tr>
                  <td width="{$attributeTdWidth}" >
                    {$attribute['attrName']}
                  </td>
                  <td width="{$tdWidth}" >
                    {if isset($attribute['attributes'][$productIDArray[0]]['attrValue'])}
                    {$attribute['attributes'][$productIDArray[0]]['attrValue']}
                    {else}
                    NA
                    {/if}
                  </td>
                  <td width="{$tdWidth}">
                    {if isset($attribute['attributes'][$productIDArray[1]]['attrValue'])}
                    {$attribute['attributes'][$productIDArray[1]]['attrValue']}
                    {else}
                    NA
                    {/if}
                  </td>
                  {if isset($productIDArray[2])}
                  <td width="{$tdWidth}">
                    {if isset($attribute['attributes'][$productIDArray[2]]['attrValue'])}
                    {$attribute['attributes'][$productIDArray[2]]['attrValue']}
                    {else}
                    NA
                    {/if}
                  </td>
                  {/if}
                  {if isset($productIDArray[3])}
                  <td width="{$tdWidth}">
                    {if isset($attribute['attributes'][$productIDArray[3]]['attrValue'])}
                    {$attribute['attributes'][$productIDArray[3]]['attrValue']}
                    {else}
                    NA
                    {/if}
                  </td>
                  {/if}
                </tr>
                {/foreach}
                {/foreach}
              </table>
            </div>
          </div>
          {*<!--------------------------- End : Content Pane ------------------------------>*}
        </div>
        {include file='addbanner/BannerLeaderboardFooter.tpl'}
      </div>
      {*<!------------------------- Begin : Footer	Pane ------------------------------->*} 
      {include file='CommonBottom.tpl'} 
      {*<!------------------------------- End : Footer Pane ------------------------------->*}
    </div>
    {*<!-------------------------------- End : Outer Pane ------------------------------>*} 
    <script type="text/javascript">
      {literal}
      $(".compareCommonDiv").html($(".imageTableRow").html());
      $(window).scroll(function () {
      	if($(".imageTableRow").next('tr').length>0){
      		var imageTableRowTop= $(".imageTableRow").next('tr').position().top;
      		if ( $(window).scrollTop() <= imageTableRowTop-50) {
      			$(".compareCommonDiv").removeClass('fixedtr').addClass('hide');
      		}
      		else{
      			$(".compareCommonDiv").addClass('fixedtr').removeClass('hide');
      		}
      	}
      });	
      {/literal}
    </script> 
    {include file='CommonJavaScriptBottom.tpl'}
  {html->script_group_start name="{$compiled_js_path}/compare.js"}
   {html->script src="{$common_frontend_js}/catalog.page.js"}
 {html->script_group_end} 
  </body>
</html>
