<ion-header class="theme_background">
    <button ion-button class="nav_btn floatLeft">
        <ion-icon name="close" (click)="close()"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
        <h5>{{'common.Filter' | translate}}</h5>
    </div>
    <div class="clear"></div>
</ion-header>
<ion-content>
    <div>
        <ion-segment [(ngModel)]="filter">
            <ion-segment-button value="service">
                {{'common.Services' | translate}}
            </ion-segment-button>
            <ion-segment-button value="sort">
                {{'common.Offers' | translate}}
            </ion-segment-button>
            <ion-segment-button value="gender">
                {{'common.Gender' | translate}}
            </ion-segment-button>
            <ion-segment-button value="location">
                {{'common.Location' | translate}}
            </ion-segment-button>
        </ion-segment>
    </div>
    <div [ngSwitch]="filter">
        <ion-list *ngSwitchCase="'service'" padding>
            <ion-card-content *ngIf="response">
                <ion-item *ngFor="let service of response">
                    <ion-label>{{service.service_name}}</ion-label>
                    <ion-checkbox (ionChange)="filter_select('service',service.id,$event)"></ion-checkbox>
                </ion-item>
            </ion-card-content>
        </ion-list>
        <ion-list *ngSwitchCase="'sort'" padding radio-group>
            <ion-item (click)="filter_select('offer','0-10')">
                <ion-radio value="1"></ion-radio>
                <ion-label>0 - 10%</ion-label>
            </ion-item>
            <ion-item (click)="filter_select('offer','10-20')">
                <ion-radio value="2"></ion-radio>
                <ion-label>10 - 20%</ion-label>
            </ion-item>
            <ion-item (click)="filter_select('offer','20-30')">
                <ion-radio value="3"></ion-radio>
                <ion-label>20 - 30%</ion-label>
            </ion-item>
            <ion-item (click)="filter_select('offer','30-40')">
                <ion-radio value="4"></ion-radio>
                <ion-label>30 - 40%</ion-label>
            </ion-item>
            <ion-item (click)="filter_select('offer','40-50')">
                <ion-radio value="5"></ion-radio>
                <ion-label>40 - 50%</ion-label>
            </ion-item>
            <ion-item (click)="filter_select('offer','50-100')">
                <ion-radio value="6"></ion-radio>
                <ion-label>Above 50%</ion-label>
            </ion-item>
        </ion-list>
        <ion-list *ngSwitchCase="'gender'" padding>
            <ion-item (click)="filter_select('gender',2)">
                <ion-radio value="7"></ion-radio>
                <ion-label>{{'common.Male' | translate}}</ion-label>
            </ion-item>
            <ion-item (click)="filter_select('gender',3)">
                <ion-radio value="8"></ion-radio>
                <ion-label>{{'common.Female' | translate}}</ion-label>
            </ion-item>
            <ion-item (click)="filter_select('gender',1)">
                <ion-radio value="9"></ion-radio>
                <ion-label>{{'common.Unisex' | translate}}</ion-label>
            </ion-item>
        </ion-list>
        <ion-list *ngSwitchCase="'location'" padding radio-group>
            <ion-row >
                <ion-col col-1>
                    <ion-radio value="1" (click)="filter_select('location',1)" class="s_radio"></ion-radio>
                </ion-col>
                <ion-col col-11>
                    <input id="address_signup" (click)="initialize($event)"  class="s_signup_input s_signup_location" placeholder="{{'common.enter_your_address' | translate}}">
                </ion-col>
            </ion-row>
            <ion-row >
                <ion-col col-1>
                    <ion-radio value="0" (click)="filter_select('location',0)"  class="s_radio"></ion-radio>
                </ion-col>
                <ion-col col-11>
                    <ion-label class="s_signup_input">{{selected_location}}</ion-label>
                </ion-col>
            </ion-row>
        </ion-list>
    </div>
    <ion-fab right bottom>
        <button ion-fab (click)="dismiss()"><ion-icon name="checkmark"></ion-icon></button>
    </ion-fab>
</ion-content>