<ion-header-bar align-title="center" class="bar-dark">
    <h1 class="title">{{AccueilCtrl.titre}}</h1>
    <div class="buttons">
        <button class="button" ui-sref="rechercheFilm">Recherche</button>
    </div>
</ion-header-bar>
<ion-content class="has-header">
    <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>
    <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.id)">
            <img src="img/ionic.png"> {{film.titre}}
            <button class="button button-clear button-positive" ng-click="AccueilCtrl.afficherDetails(film.id)">
                Détails
            </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.titre}}
            </div>
            <div class="item item-body">
                <img class="full-image" src="img/ionic.png">
                <p>{{film.description}}</p>
                <button class="button button-block button-clear button-positive" ng-click="AccueilCtrl.afficherDetails(film.id)">
                    En savoir plus
		</button>
            </div>
        </div>
    </ion-list>
</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>