<!--
    AngularJS template. Created by fran lopez on 9/1/16.

    This is the view to show details of a film, a result of a search it using
    one route parameter, named "filmId". This parameter has information about
    an internal identifier associated to a film.

-->

    <section data-ng-controller="FilmsController" data-ng-init="getFilmDetails()">
        <h1>Detalles de la película</h1><hr>
        <div class="formElement">
            <label class="staticLabel">Título original:</label>
            <label data-ng-bind="film.title"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Año:</label>
            <label data-ng-bind="film.year"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Duración (minutos):</label>
            <label data-ng-bind="film.runningTime"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">País:</label>
            <label data-ng-bind="film.country"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Género:</label>
            <label data-ng-bind="film.genre"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Director:</label>
            <label data-ng-bind="film.director"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Guionista:</label>
            <label data-ng-bind="film.screenWriter"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Protagonista:</label>
            <label data-ng-bind="film.protagonist"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Productora:</label>
            <label data-ng-bind="film.productionCompany"></label>
        </div>
        <div class="formElement">
            <label class="staticLabel">Sinopsis:</label>
            <table><tr data-ng-bind="film.synopsis"></tr></table>
        </div>
        <div class="formElement">
            <label class="staticLabel">Valoración:</label>
            <label data-ng-bind="film.rating"></label>
        </div>
        <hr><br>
        <a data-ng-href="#!/filmTrailers/{{filmId}}">Ver los trailers de la película</a><br>
        <a data-ng-href="#!/filmImages/{{filmId}}">Ver las imágenes de la película</a><br>
        <a data-ng-href="#!/filmReviews/{{filmId}}">Ver las críticas de la película</a><br><br>
        <a data-ng-href="#!/films">Volver al menú de búsqueda de películas</a>
    </section>