<div class="heading-holder">
	<div class="name"> MY ORDERS </div>
	<ion-button fill="clear"> SORT / FILTER </ion-button>
</div>

<ul class="orders">
	<li *ngFor="let order of orders" class="order" (click)="selected_order = order">
		<div class="heading"> Order ID: {{ order.id }} </div>
		<div class="time-details"> Ordered on {{ getFormattedDate(order.creation_time, 'DD MMMM YYYY @ hh:mm A') }} </div>

		<ul class="ordered-items">
			<li *ngFor="let item of order.order_items">
				<div class="order-item-details">
					<label class="name"> {{ item.menu_details.name }} x {{ item.quantity }} </label>
					<label class="time">
						Pickup on {{ getFormattedDate(item.pickup_time, 'hh:mm A') }}
					</label>
				</div>
			</li>
		</ul>
		<ul class="ordered-items">
			<li *ngIf="order.promocode">
				<div class="order-item-details">
					<label class="name"> <strong> PROMOCODE </strong> </label>
					<label class="time"> <strong> {{ order.promocode }} </strong> </label>
				</div>
			</li>
			<li>
				<div class="order-item-details">
					<label class="name"> <strong> TOTAL </strong> </label>
					<label class="time"> <strong> &#8377; {{ order.calculated_total }} </strong> </label>
				</div>
			</li>
		</ul>

		<p class="note">
			We will notify you each time a order is ready for pickup
		</p>

		<div class="action-buttons-holder">
			<ion-button shape="round"> Reorder </ion-button>
			<ion-button shape="round" fill="outline" (click)="show_rate_modal = true"> Rate &amp; Review </ion-button>
		</div>
	</li>
</ul>

<section class="common-semi-modal rating-modal" [ngClass]="{'active': show_rate_modal}">
	<header> Rate &amp; Review <button (click)="show_rate_modal = false"> Close </button> </header>
	<div class="rating">
		<div class="semi-heading"> Rating </div>
		<p> Rating the food will help us give you personalised recommendation </p>
		<div class="star-holder" (click)="setRating()">
			<ion-icon name="star" (click)="selected_rating = 1"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 2"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 3"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 4"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 5"></ion-icon>
		</div>
	</div>
	<div class="review">
		<div class="semi-heading"> Review </div>
		<textarea placeholder="Please tell something about the food..."></textarea>
	</div>
	<ion-button size="block" shape="round"> Submit Feedback </ion-button>
</section>
