<ion-view hide-nav-bar="true">
    <ion-header-bar align-title="center" class="bar-dark hide-on-keyboard-open">
        <div class="buttons">
            <button class="button button-icon icon ion-navicon-round" menu-toggle="left"></button>
        </div>
        <h1 class="title">{{AccueilCtrl.titre}}</h1>
        <div class="buttons">
            <button class="button" ui-sref="tabs.rechercheFilm" nav-transition="android" nav-direction="enter">Recherche</button>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">
        <ion-refresher on-refresh="AccueilCtrl.rechercherFilms()" pulling-text="Rafraîchir la recherche" pulling-icon="ion-loop"
            spinner="lines">
        </ion-refresher>
        <div class="item item-input-inset">
            <label class="item-input-wrapper">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" ng-model="AccueilCtrl.titreFilm" placeholder="Titre du film">
        </label>
            <button class="button button-small" ng-click="AccueilCtrl.rechercherFilms()">Rechercher</button>
        </div>
        <div style="text-align: center;">
            <ion-spinner ng-if="AccueilCtrl.isLoading"></ion-spinner>
        </div>
        <ion-list ng-show="!modeCarte">
            <ion-item class="item-thumbnail-left item-button-right" ng-repeat="film in AccueilCtrl.films" ng-click="AccueilCtrl.afficherDetails(film.imdbID)">
                <img ng-src="{{film.Poster}}"> {{film.Title}}
                <ion-option-button class="button-energized icon-left ion-star" ng-click="AccueilCtrl.ajouterFavoris()">
                    Favoris
                </ion-option-button>
                <ion-option-button class="button-balanced icon-left ion-play" ng-click="AccueilCtrl.ouvrirModalPlanification()">
                    Ma liste
                </ion-option-button>
            </ion-item>
        </ion-list>
        <ion-list ng-show="modeCarte">
            <div class="card" ng-repeat="film in AccueilCtrl.films">
                <div class="item item-divider">
                    {{film.Title}}
                </div>
                <div class="item item-body">
                    <img class="full-image" ng-src="{{film.Poster}}">
                    <p>{{film.Year}}</p>
                    <button class="button button-block button-clear button-positive" ng-click="AccueilCtrl.afficherDetails(film.imdbID)">
                    En savoir plus
		</button>
                </div>
            </div>
        </ion-list>
        <ion-infinite-scroll on-infinite="AccueilCtrl.chargerPageSuivante()" distance="20%" immediate-check="false" ng-if="AccueilCtrl.nbFilms() > 0">
        </ion-infinite-scroll>
    </ion-content>
    <ion-footer-bar align-title="right" class="bar-stable">
        <button class="button button-clear icon ion-eye" ng-click="modeCarte = !modeCarte"></button>
        <h1 class="title">{{AccueilCtrl.nbFilms()}} films disponibles</h1>
    </ion-footer-bar>
</ion-view>