<section class="site-restaurants">

    <div class="restaurants-box">
        <a *ngFor="let item of restaurants | async">
            <md-card>

                <md-card-header>
                    <img md-card-avatar [src]="item.avatar">
                    <md-card-title>{{item.name}}</md-card-title>
                    <md-card-subtitle>{{item.distance}} entfernt</md-card-subtitle>
                </md-card-header>

                <agm-map [latitude]="item.lat"
                         [longitude]="item.lng"
                         [styles]="mapStyle"
                         [zoom]="zoom"
                         [zoomControl]="zoomControl"
                         [clickableIcons]="clickableIcons"
                         [scrollwheel]="scrollwheel"
                         [streetViewControl]="streetViewControl"
                         [disableDoubleClickZoom]="disableDoubleClickZoom"
                         [gestureHandling]="gestureHandling">

                    <agm-marker [latitude]="item.lat" [longitude]="item.lng"></agm-marker>
                </agm-map>

                <md-card-content>
                    <p *ngFor="let tip of restaurants[item.$key].tips" [innerHTML]="tip.description"></p>
                    <p *ngFor="let tip of tips | async" [innerHTML]="tip.description"></p>
                </md-card-content>

                <md-card-actions>
                    <button md-icon-button [routerLink]="['/restaurant/'+item.$key]">
                        <i class="material-icons">edit</i>
                    </button>
                    <button md-icon-button (click)="deleteItem(item.$key)">
                        <i class="material-icons">delete</i>
                    </button>
                </md-card-actions>

            </md-card>
        </a>
    </div>

</section>