<!DOCTYPE html>
<!--
Copyright (C) 2017 ss

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<div style="min-height: 100px;">
    
    <div [hidden]="result.length > 0">
        <h4 style="text-align: center;"
        [translate]="'transport-map.search-result.no-result'"></h4>
        <h5 [translate]="'transport-map.search-result.no-result-desc'"></h5>
        <h5 [translate]="'transport-map.search-result.no-result-geocoder'"></h5>
        <h5>{{'transport-map.search-result.no-result-plain-schedule' | translate}}
            <span class="sr-link" (click)="goToSchedule()">{{'transport-map.search-result.no-result-plain-schedule-link' | translate}}</span></h5>
        <h5 [translate]="'transport-map.search-result.no-result-tooltip'"></h5>
    </div>
    
    <md-list *ngIf="mapComponent.activeProfile && result.length === 0">
        <h3 md-subheader class="srl-result-h"
                [translate]="'transport-map.search-result.legend'"></h3>
        <md-list-item *ngFor="let typ of mapComponent.activeProfile.routeProfiles">
            <span md-list-icon [style.background-color]="typ.lineColor" class="srl-route-label-2"></span>
            <p md-line style="line-height: 30px;" [translate]="'route-type.' + typ.name"></p>
        </md-list-item>
    </md-list>
    
    <div [hidden]="result.length < 1">

        <md-list *ngIf="!flags.isDetailsOpen">
            <h3 md-subheader class="srl-result-h"
                [translate]="'transport-map.search-result.found-results'" [translateParams]="{count: result.length}"></h3>
            <md-list-item *ngFor="let op of result" class="srl-item" (click)="showPath(op)"
                [@flyInOut]="op.animationTrigger">
                <md-icon *ngIf="!mapComponent.isMobile()" md-list-icon
                    [ngClass]="{'srl-selected-path': op === activePath}">chevron_right</md-icon>
                <p md-line style="line-height: 30px; height: 30px;">
                    <span *ngFor="let path of op.path" class="srl-route-label"
                        [style.background-color]="path.route.type.lineColor"
                        [style.font-size]="mapComponent.isMobile() ? '12px' : null"
                        mdTooltip="{{path.description}}" mdTooltipPosition="above">{{path.route.namePrefix}}{{path.route.namePostfix}}</span>
                    <span class="srl-time-lbl">{{tripPeriod(op)}}</span>
                </p>
                <md-icon mdTooltip="{{'transport-map.search-result.open-details' | translate }}"
                     mdTooltipPosition="above" (click)="openDetails(op, $event)"
                     style="margin-left: 5px"
                     [ngClass]="{'srl-selected-path': op === activePath}">access_time</md-icon>
            </md-list-item>
        </md-list>

        <!-- DETAILS -->
        
        <div *ngIf="flags.isDetailsOpen" [@flyInOut]="detailsTrigger">
            <md-grid-list cols="7" rowHeight="56px" >
                <md-grid-tile>
                    <md-icon>schedule</md-icon>
                </md-grid-tile>
                <md-grid-tile colspan="5">
                    <h3 class="srl-details-h" [translate]="'transport-map.search-result.trip-details'"></h3>
                </md-grid-tile>
                <md-grid-tile>
                    <button md-mini-fab mdTooltip="{{'transport-map.search-result.back-to-summary' | translate }}"
                            mdTooltipPosition="above" (click)="closeDetails()" color="accent">
                        <md-icon>close</md-icon>
                    </button>
                </md-grid-tile>
            </md-grid-list>
            
            <hr/>
            
            <div *ngFor="let p of activePath.path; let i = index;">
                <md-grid-list cols="10" rowHeight="50px">
                    
                    <md-grid-tile colspan="2">
                        <img [src]="'/rest/data/transport-profile/route/marker/' + p.route.type.id">
                    </md-grid-tile>
                    <md-grid-tile colspan="6" class="srl-details-item"
                                  (click)="flyToBusStop(activePath.way[i][0])">
                        <p class="srl-d-bs-lbl">{{activePath.way[i][0].name}}</p>
                    </md-grid-tile>
                    <md-grid-tile colspan="2">{{getBusStopTime(i, 'start')}}</md-grid-tile>
                    
                    <md-grid-tile colspan="2">
                        <span class="srl-route-label"
                            [style.background-color]="p.route.type.lineColor">{{p.route.namePrefix}}{{p.route.namePostfix}}</span>
                    </md-grid-tile>
                    <md-grid-tile colspan="6" class="srl-details-item"
                                  (click)="flyToWay(activePath.way[i])">
                        <p class="srl-d-bs-lbl">{{p.description}}</p>
                    </md-grid-tile>
                    <md-grid-tile colspan="2">{{pathTripDuration(i, p)}} {{'common.time.min' | translate}}</md-grid-tile>
                    
                    <md-grid-tile colspan="2">
                        <img [src]="'/rest/data/transport-profile/route/marker/' + p.route.type.id">
                    </md-grid-tile>
                    <md-grid-tile colspan="6" class="srl-details-item"
                                  (click)="flyToBusStop(activePath.way[i][activePath.way[i].length - 1])">
                        <p class="srl-d-bs-lbl">{{activePath.way[i][activePath.way[i].length - 1].name}}</p>
                    </md-grid-tile>
                    <md-grid-tile colspan="2">{{getBusStopTime(i, 'end')}}</md-grid-tile>
                    
                </md-grid-list>
                <hr/>
            </div>
            <!-- Summary -->
            <md-grid-list cols="8" rowHeight="50px">

                <md-grid-tile>
                    <md-icon>directions_run</md-icon>
                </md-grid-tile>
                <md-grid-tile colspan="5">
                    <p class="srl-d-bs-lbl" [translate]="'transport-map.search-result.full-distance'"></p>
                </md-grid-tile>
                <md-grid-tile colspan="2">
                    {{summaryDistance()}} {{'common.unit.km' | translate}}
                </md-grid-tile>
                
                <md-grid-tile>
                    <md-icon>alarm</md-icon>
                </md-grid-tile>
                <md-grid-tile colspan="5">
                    <p class="srl-d-bs-lbl" [translate]="'transport-map.search-result.full-time'"></p>
                </md-grid-tile>
                <md-grid-tile colspan="2">
                    {{summaryTime()}} {{'common.time.min' | translate}}
                </md-grid-tile>
                
            </md-grid-list>
            
            <button md-raised-button (click)="closeDetails()" class="full-width">
                    <md-icon>chevron_left</md-icon> {{'transport-map.search-result.back-to-summary' | translate }}
            </button>
            
        </div>

    </div>
</div>

