<div class="slide row">
    <div class="slide-title">
        <h1>{{slide.title}} - {{slide.details.title}}</h1>
    </div>
    <div class="slide-nav">
        <a id="back" href="#/books/{{slide.book}}">&laquoRetour galerie</a>
        <a id="next" href="#">Suivant&raquo</a>
        <a id="previous" href="#">&laquoPrecedents</a>
    </div>
    <div class="container slide-content">
        <div class="col-md-8 media">
            <figure ng-if="slide.details.images && !slide.details.video" ng-repeat="image in slide.details.images">
                <img ng-src="{{image}}" style="margin: auto;">
                  <figcaption>{{slide.details.captions[$index]}}</figcaption>
            </figure> 
            <audio ng-if="slide.details.audio" ng-src="{{ slide.details.audio }}" style="margin: auto; controls loop"></audio>
            <video ng-if="slide.details.video" ng-src="{{ slide.details.video }}" style="margin: auto;" controls></video>
        </div>
        <div class="col-md-4 caption">
            <slide-editor index="{{$index}}"></slide-editor>
            <hr />
            <div class="details">
                <p><strong>Titre&nbsp;:&nbsp;</strong><small>{{slide.details.title}}</small></p>
                <p><strong>Description&nbsp;:&nbsp;</strong><small>{{slide.details.description}}</small></p>
                <p><strong>Numéro d'Inventaire&nbsp;:&nbsp;</strong><small>{{slide.details.idInventory}}</small></p>
            </div>
        </div>
    </div>
</div>