{% set trackingLength = 0%}
{% set deliveryEvent = null%}
<div class="tracking-order" >
    <ul class="tracking-order-title">
        <li class="approve">{{'track_order.approval' | trans }}</li>
        <li class="shipping">{{'track_order.shipping' | trans }}</li>
        <li class="delivery">{{'track_order.delivery' | trans }}</li>
    </ul>
    <div class="clearfix"></div>
    <ul class="tracking-order-progress-step">
        <li class="approve">
            <ul class="line">
                <li id="your-order-placed" class="order-step processed js_show_status" data-index="1"></li>
            </ul>
        </li>
        {% if data.statusCode != 'pending' %}
        	<li class="shipping">
				<ul class="line">
	        	{% if data.shippingTypeAdmin == 'fedex'%}
			    	{%if trackingResult == 'SUCCESS'%}
			    		{% set trackingLength = shippingDetail.TrackDetails.Events | length %}
		    			{% for index , events in shippingDetail.TrackDetails.Events|reverse %}
		    				{% if events.EventType != 'DL' %}
		    		        	<li id="your-item-confirmed" class="order-step processed block1 js_show_status" data-index="{{loop.index+1}}"></li>
		    		        {%endif%}
			            {% endfor %}
			    	{%else%}
			    		{% set trackingLength = 0 %}
			    	{% endif %}
		    	{% endif %}
	    		</ul>
			</li>
        {%endif%}
    </ul>
    
    <div class="rposition">
    	<div id="your-order-placed01" class="granular-info-box order-placed " style="display: none;">
            <p>Your order has been placed.</p>
            <ul class="order-states-details">
                <li>Fri, 13th Feb</li>
                <li>01:54 pm</li>
                <li>Payment Approved </li>
            </ul>
        </div>
        {% if data.statusCode != 'pending' %}
	        {% if data.shippingTypeAdmin == 'fedex'%}
	        	{%if shippingDetail.TrackDetails is defined %}
		    	{% for index , events in shippingDetail.TrackDetails.Events|reverse %}
		    		{% if events.EventType != 'DL' %}
						<div id="your-order-placed0{{loop.index+1}}" class="granular-info-box item-confirmed" style="display: none;">
				            <p>{{events.EventDescription}}</p>
				            <ul class="order-states-details">
				                <li>{{events.Timestamp}}</li>
				                <li>
				                	{% if events.Address.City is defined%}
				                		{{events.Address.City}}
				                	{% endif %}
				                	{{events.Address.PostalCode}}
				                </li>
				            </ul>
				        </div>
				     {% else %}
				     	{% set deliveryEvent = events %}
			        {% endif %}
				{% endfor %}
				
				{#<div id="your-order-placed0{{trackingLength+2}}" class="granular-info-box item-delivery" style="display: none;">
			            <p>Your item has been delivery. </p>
			            <ul class="order-states-details">
			                <li>Fri, 13th Feb</li>
			                <li>01:54 pm</li>
			                <li>Delhi </li>
			                <li>Your item is out for delivery </li>
			            </ul>
			            <div class="view-more-order-detail">
			                <h2 class="more">View More</h2>
			                <div class="complete">
			                    <ul class="order-states-details">
			                        <li>Fri, 13th Feb</li>
			                        <li>01:54 pm</li>
			                        <li>New Delhi </li>
			                        <li>Expected at Delhi Sort Facility</li>
			                    </ul>
			                </div>
			            </div>
			        </div>
			    </div> #}
			    {% endif %}
			{% endif %}
		{% endif %}

        
    {% if data.statusCode == 'delivery' %}
	    <div class="delivery-date">
	        <div class="my-order-delivery">
	            <p>{{deliveryEvent.Timestamp}} </p>
	        </div>
	        <p>{{data.shippingTypeAdmin}}</p>
	    </div>
    {%endif%}
</div>