<!--View Information-->
<!--View name : Contract List-->
<!--Controller name : contractListCtrl-->
<!--Controller path : www/templates/application-storage/sqLite/js/controllers.js-->
<!--State name : app.contractlist-->
<!--URL : #app/contractlist-->

<ion-view view-title="">
    <!--right button on navigation bar-->
    <ion-nav-buttons side="right">
        <md-button ng-disabled="isLoading" class="md-icon-button ion-nav-button-right" ng-click="navigateTo('app.contractsetting')"
                   aria-label="Setting">
            <i class="ion-android-more-vertical"></i>
        </md-button>
    </ion-nav-buttons> <!--end right button on navigation bar-->

    <!--toolbar section-->
    <md-toolbar class="bar-subheader md-tall md-primary toolbar-medium">
        <div>
            <h1>Pokedex Helper</h1>

            <h2>Dein Trainertool deluxe</h2>
        </div>
        <a class="md-button md-accent md-fab fab-toolbar-medium"
           ng-click="navigateTo('app.contractdetail',contract)"
           aria-label="Add">
            <i class="icon ion-plus"></i>
        </a>
    </md-toolbar><!--end toolbar section-->

    <!--contract list section-->
    <ion-content id="contract-list-content" class="fade-in">
        <!--list section-->
        <md-list>

            <md-list-item>
                <md-input-container md-no-float="" class="md-list-item-full-width">
                    <input ng-model="filterText" placeholder="Finde Pokemon...">
                </md-input-container>
            </md-list-item>

            <!--Below code it will disable animation to better performance-->
            <div ng-if="!isAnimated" class="row contract-list-item"
                 ng-repeat="pokemon in pokemons  | filter: filterText | orderBy: 'pokemonname'">
                <div class="col-25 icon-user">
                    <img ng-src="{{ pokemon.pokemonimage }}" class="image-list-thumb"/>
                </div>
                <div class="col-50">
                    <h3>{{ pokemon.pokemonname }}</h3>
                    <div ng-if="pokemon.pokemontypa > 0" class="chip">
                        <img src="{{ pokemon.pokemonimage }}" alt="PokemonTyp" width="96" height="96">
                        {{ pokemon.pokemontypaString }}
                    </div>
                    <div ng-if="pokemon.pokemontypb > 0" class="chip">
                        <img src="{{ pokemon.pokemonimage }}" alt="PokemonTyp" width="96" height="96">
                        {{ pokemon.pokemontypbString }}
                    </div>
                </div>
                <div class="col-25 status-button">
                    <md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
                        <p ng-click="$mdOpenMenu()">
                            <md-icon md-menu-origin md-svg-icon="more"></md-icon>
                        </p>
                        <md-menu-content width="1">
                            <md-menu-item>
                                <a class="md-button md-default-theme" ng-click="navigateTo('app.contractdetail',contract)">
                                    <span class="menu-item-button">Edit</span>
                                </a>
                            </md-menu-item>
                            <md-menu-item>
                                <a class="md-button md-default-theme" ng-click="callTo(contract.telephone)">
                                    <span class="menu-item-button" >Call {{pokemon.telephone}}</span>
                                </a>
                            </md-menu-item>
                        </md-menu-content>
                    </md-menu>
                </div>
            </div>

            <!--Below code it will show animation when selecting row.-->
            <md-list-item ng-if="isAnimated" class="md-list-item-default"
                          ng-click="navigateTo('app.contractdetail',pokemon)"
                          ng-repeat="pokemon in pokemons  | filter: filterText | orderBy: 'pokemonname'">

                <img ng-src="{{ pokemon.pokemonimage }}" class="image-list-thumb"/>

                <p>{{ pokemon.pokemonname }} {{ pokemon.pokemonimage }}</p>
                <md-switch class="md-secondary"
                           ng-model="pokemon.isEnable"
                           ng-change="updateContract(pokemon)">
                </md-switch>
            </md-list-item>

        </md-list>
        <!--end list section-->
        
    </ion-content><!--end contract list section-->

    <!--loading progress-->
    <div id="contract-list-loading-progress" class="loading-progress fade-in">
        <ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
        <md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
    </div><!--end loading progress-->

</ion-view>