<ion-header class="theme_background">
    <button ion-button class="nav_btn floatLeft" (click)="back()">
        <ion-icon name="arrow-back"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
        <h5>{{'common.Shop_Details' | translate}}</h5>
    </div>
    <div class="clear"></div>
</ion-header>
<ion-content>
    <div *ngIf="result">
        <ion-card>
            <div class="shop_banner">
                <div class="no_service" *ngIf ="result.shop.status == 0">
                        Салон временно недоступен
                </div>
                <img src="{{result.shop.image}}" onError="this.src='assets/imgs/advance-card-tmntr.jpg';" />
                <div class="shop_detail">

                    <ion-row>
                        <ion-col col-9 class="p0">
                            <h4> {{result.shop.shop_name}}</h4>
                        </ion-col>
                        <ion-col   col-3 class="p0">  
                            <div *ngIf ="result.shop.status == 1">
                                <button ion-button small class="book_nw" (click)="book()">
                                    {{'common.Book' | translate}}</button>
                            </div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-9 class="p0">
                            <p>
                                {{result.shop.location}}, {{result.shop.city}}, {{result.shop.state}}, {{result.shop.country}}
                            </p>
                        </ion-col>
                        <ion-col col-3 class="p0">
                        </ion-col>
                    </ion-row>
                </div>
            </div>
            <div class="shop_other_details">
                <p>
                    {{result.shop.description}}
                </p>
                <p><strong>
                        {{'common.Working_Hours' | translate}}
                    &nbsp;:&nbsp;</strong> {{result.shop.working_time}}</p>
            </div>
        </ion-card>
        <ion-card>
            <div class="services">
                <h6>{{'common.Services_Available' | translate}}</h6>
                <ion-list *ngFor="let service of result.services">
                    <ion-row>
                        <ion-col col-8 class="p0">
                            <p>{{service.service_name}}</p>
                        </ion-col>
                        <ion-col col-4 class="p0 textRight">
                            <p><strong> <span item-end>{{service.price}}</span></strong></p>
                        </ion-col>
                    </ion-row>
                </ion-list>
            </div>
        </ion-card>
        <ion-card>
            <div class="services">
                <h6> {{'common.Gallery' | translate}}</h6>
                <div class="gallery">
                    <ion-slides *ngIf="result.gallery" autoplay="1" loop="1" slidesPerView="1.5">
                        <ion-slide *ngFor="let images of result.gallery">
                            <img [src]="images.image_path" onError="this.src='assets/imgs/advance-card-tmntr.jpg';" />
                        </ion-slide>
                    </ion-slides>
                </div>
            </div>
        </ion-card><!-- 
        <span (click)="navv()">view map</span> -->
        <ion-card (click)="navv()" padding>
            <div #maps id="maps" style="height:300px;"></div>
              
        </ion-card>
        <ion-card *ngIf="result.review">
            <div class="services">
                <h6> {{'common.Reviews' | translate}}</h6>
                <ul class="reviews">
                    <li *ngFor="let rev of result.review">
                        <div class="review_pic">
                            <img [src]="rev.profile_pic" onError="this.src='assets/imgs/advance-card-tmntr.jpg';">
                        </div>
                        <div class="review_detail">
                            <h2>{{rev.username}}</h2>
                            <p>{{rev.comments}}</p>
                        </div>
                        <div class="clear"></div>
                    </li>
                </ul>
            </div>
        </ion-card>
    </div>
</ion-content>