<style>
.autocomplete {
	width: 100%;
	padding-bottom: 30px;
}
ion-searchbar {
	padding: 1px !important;
}
ion-list {
	position: absolute;
	width: inherit;
	overflow-y: scroll;
	max-height: 150%;
	z-index: 999;
}
ion-item:active:after {
	cursor: pointer;
	background-color: #ff7d00 !important;
}
</style>
<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{'dashboard.header' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <div class="autocomplete">
	  <ion-searchbar
      (ionInput)="search($event)"
  		debounce="300"
			placeholder="{{'dashboard.searchbox_placeholder' | translate}}">
	 </ion-searchbar>
	 <ion-list *ngIf="showList">
		<ion-item button=true (click)="check(category)" *ngFor="let category of categories">
			{{category}}
		</ion-item>
	 </ion-list>
  </div>
	<ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
	  <ion-refresher-content></ion-refresher-content>
	</ion-refresher>
	<ng-container *ngIf="authService.isLoggedIn">
	  <div *ngIf="!isContract">
			<ion-card style="box-shadow:none">
				<img class="ion-justify-content-center" src="/assets/slides/ic_dashboard.svg" style="max-width:22.5em; margin:auto"/>
				<ion-text color="dark" class="ion-text-center"><h2>{{'dashboard.slogan' | translate}}</h2></ion-text>
				<h3 class="ion-text-center" color="medium">{{'dashboard.welcome' | translate}} {{ authService.userName }}</h3>
			</ion-card>
	  </div>
	</ng-container>
	<ng-container *ngIf="pcontracts?.length > 0">
		<h2 class="ion-text-capitalize" style="padding-bottom: 0.5em">{{'contracts.header_1' | translate}}</h2>
	</ng-container>
	<ion-card *ngFor="let pcontract of pcontracts; let i = index">
    <ion-item>
      <ion-label>
        <h2 class="ion-text-capitalize">{{ pcontract.category }}</h2>
				<ion-progress-bar type="indeterminate"></ion-progress-bar>
				<p class="ion-text-wrap"><ion-icon name="search"></ion-icon> {{'contracts.postulating' | translate}}</p>
        <p class="ion-text-wrap">{{pcontract.address}}</p>
        <p class="ion-text-wrap ion-text-capitalize">{{pcontracts_dates[i]}}</p>
      </ion-label>
      <ion-button style="height: 3em; padding-left: 0.5em;" color="secondary" (click)="viewsuppliers(pcontract.id)">{{'contracts.viewsuppliers_1.1' | translate}}<br>{{'contracts.viewsuppliers_1.2' | translate}}</ion-button>
    </ion-item>
  </ion-card>
	<ng-container *ngIf="ccontracts?.length > 0">
		<h2 class="ion-text-capitalize" style="padding-bottom: 0.5em">{{'contracts.header_2' | translate}}</h2>
	</ng-container>
	<ng-container *ngFor="let ccontract of ccontracts; let i = index">
    <ion-card *ngIf="ccontract.status==1">
      <ion-item style="--border-color: #fff">
        <ion-label>
          <h2 *ngIf="lang===true" class="ion-text-capitalize">{{ ccontract.category }}</h2>
					<h2 *ngIf="lang===false" class="ion-text-capitalize">{{ ccontract.en_category }}</h2>
					<p class="ion-text-wrap"><ion-icon name="briefcase"></ion-icon> {{'contracts.hired' | translate}}</p>
          <p class="ion-text-wrap">{{ ccontract.address }}</p>
          <p class="ion-text-wrap ion-text-capitalize">{{ ccontracts_dates[i] }}</p>
          <p class="ion-text-wrap ion-text-capitalize">{{'contracts.supplier' | translate}}: {{ ccontract.supplier }}</p>
          <p class="ion-text-wrap">{{'contracts.phone' | translate}}: <a href="tel:{{ ccontract.phone }}">{{ ccontract.phone }}</a></p>
					<p class="ion-text-wrap">{{'contracts.amount' | translate}}: ${{ ccontract.amount }}</p>
					<h2 class="ion-text-wrap">{{'contracts.start_pin' | translate}}<b>{{ ccontract.code }}</b></h2>
          <p class="ion-text-wrap">{{'contracts.info_pin' | translate}}</p>
        </ion-label>
        </ion-item>
        <ion-button *ngIf="ccontract.past_due < 0" style="height: 4.0em; padding-right: 1.0em; padding-bottom:1.0em; float: right" color="danger" (click)="cancelContract(ccontract.id, ccontract.date)">{{'contracts.cancel_1.1' | translate}}<br>{{'contracts.cancel_1.2' | translate}}</ion-button>
    </ion-card>
  </ng-container>
</ion-content>
