<script id="tpl-head" type="text/html">
<form action="#" class="form-info-general-annotation">
	<div class="row">
		<div class="span3 text-right">
			<input type="text" placeholder="Titre de l'annotation.." value="{{titre}}">
			<textarea name="" id=""></textarea>
		</div>
		<div class="span3">
			<input type="text" placeholder="Titre de l'annotation..">
			<table class="table text-right">
				<thead>
					<tr>
						<th class="span1">Début</th>
						<th class="span1">Durée</th>
						<th class="span1">Fin</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td id="{{id}}-begin" class="span1">4:20</td>
						<td id="{{id}}-duration" class="span1">4:20</td>
						<td id="{{id}}-end" class="span1">4:20</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="span6 text-center">
			<div data-id="{{id}}" id="" class="slider-duration"></div>
		</div>
		<div class="span6 text-right">
			<button data-id="{{id}}" type="submit" class="btn btn-primary btn-save-annotation">
				<i class="icon-save"></i> Enregistrer annotation
			</button>
		</div>
	</div>
</form>
</script>

<script id="tpl-video" type="text/html">
<div class="edit-annotation-title row">
	<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
	<span class="span3">
		Ajouter une vidéo 
		<a data-id="annotation-{{id}}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
	</span>
</div>
<div class="row annotation-video-content">

</div>
</script>

<script id="tpl-html" type="text/html">
<div class="edit-annotation-title row">
	<h3 class="span3"><i class="icon-link"></i> Html</h3>
</div>
<div class="row edit-annotation-html">
	<div class="span6">
		<textarea class="" name="" id="" cols="30" rows="10"></textarea>
	</div>
	<div class="span6 text-right">
		<a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
	</div>
	<div class="html-apercu span6"></div>
</div>
</script>

<script id="tpl-text" type="text/html">
<div class="edit-annotation-title row">
	<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
</div>
<div class="row">
	<div class="span6 wysiwyg-wrap">
		<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
	</div>
</div>
</script>

<script id="tpl-diaporama" type="text/html">
<div class="edit-annotation-title row">
	<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
	<span class="span3">
		Ajouter une image 
		<a data-type-media="image" data-diaporama="diaporama-{{id}}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
	</span>
</div>
<div class="row config-diaporama">
	<form action="">
		<div class="span3">
			<label for="">Diaporama :</label>
		    <div class="btn-group" data-toggle="buttons-radio">
			    <button type="button" class="btn btn-primary">Manuel</button>
			    <button type="button" class="btn btn-primary active">Auto</button>
		    </div>	
		</div>
		<div class="span3">
			<label for="">Durée image : </label>
			<input pattern="[0-9]*" class="span1 number-spin" type="text" value="1"> sec
		</div>
	</form>
</div>
<div class="row">
	<div class="span6">
		<table class="table">
			<thead>
				<tr>
					<th>Aperçu</th>
					<th>Titre</th>
					<th>Description</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody id="diaporama-{{id}}" class="list-image-diaporama ui-sortable">

			</tbody>
		</table>
	</div>
</div>
</script>

<script id="tpl-diaporama-row" type="text/html">
<tr id="rid-{{ridid}}" class="row-image-diaporama">
	<td><img src="img/60x60.gif" alt=""> </td>
	<td>Titre annotation 1</td>
	<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
	<td>
		<table>
			<tr>
				<td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
				<td><a data-title="une image" href="#rid-{{ridid}}" class="btn btn-delete"><i class="icon-trash"></i></a></td>
			</tr>
			<tr>
				<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
				<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
			</tr>
		</table>
	</td>
</tr>
</script>

<script id="tpl-video-row" type="text/html">
<div class="span6">
	<img src="img/460x345.gif" alt="">
	<table class="table">
		<tbody>
			<tr>
				<th>Titre</th>
				<td>Titre de la vidéo Azerty</td>
			</tr>
			<tr>
				<th>Date</th>
				<td>14 / 05 / 2016</td>
			</tr>
			<tr>
				<th>Durée</th>
				<td>25 m 35 s</td>
			</tr>
			<tr>
				<th>Description</th>
				<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td>
			</tr>
		</tbody>
	</table>
</div>
</script>

<script id="tpl-list-annotation-row" type="text/html">
<tr id="row-list-annotation-{{id}}">
	<td>Titre annotation</td>
	<td>Vidéo</td>
	<td>4:26</td>
	<td>4:26</td>
	<td>4:26</td>
	<td>
		<a href="#" data-id="annotation-{{id}}" class="btn btn-edit-annotation" data-type="video">
			<i class="icon-pencil"></i></a>
		<a data-id="annotation-{{id}}" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-{{id}}" class="btn btn-delete">
			<i class="icon-trash delete-annotation"></i>
		</a>
	</td>
</tr>
</script>

<script id="tpl-chapter-row" type="text/html">
<tr id="row-list-chapter-{{id}}">
	<td>Titre chapitre</td>
	<td>Tags, Tags, Tags</td>
	<td>79:55</td>
	<td>79:55</td>
	<td>79:55</td>
	<td>
		<table>
			<tr>
				<td>
					<a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
				</td>
				<td>
					<a data-title="Chapitre 1" href="#row-list-chapter-{{id}}" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
				</td>
			</tr>
		</table>
	</td>
</tr>
</script>

<script id="tpl-chapter-edit" type="text/html">
<div class="row">
	<div class="span3 text-right">
		<input type="text" value="{{titre}}">
		<input type="text" value="{{tags}}">
	</div>
	<div class="span3">
		<table class="table text-right">
			
			<thead>
				<tr>
					<th class="span1">Début</th>
					<th class="span1">Durée</th>
					<th class="span1">Fin</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="span1">4:20</td>
					<td class="span1">4:20</td>
					<td class="span1">4:20</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<div class="row">
	<div class="span6 text-center">
		<textarea name="">{{description}}</textarea>
	</div>
</div>
</script>