<script id="tpl-head" type="text/html">

<form action="#" class="form-info-general-annotation" style="background-color:{{color}}" data-id="{{id}}">

	<div class="row">

		<div class="span3 text-right">

			<input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">

			<textarea id="" name="description">{{description}}</textarea>

		</div>

		<div class="span3">

			<input type="text" class="tag-it" data-type="annotation" value="{{keywords}}">

			<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">{{begin}}</td>

						<td id="{{id}}-duration" class="span1">{{getDuration}}</td>

						<td id="{{id}}-end" class="span1">{{end}}</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">

			<a class="btn btn-danger btn-delete-annotation" data-id="{{id}}" data-no-render>

				<i class="icon-trash"></i> Delete

			</a>

			<a class="btn btn-primary btn-save-annotation" data-id="{{id}}">

				<i class="icon-ok"></i> Ok

			</a>

		</div>

	</div>

</form>

</script>

<script id="tpl-onglet" type="text/html">

<li id="onglet-{{id}}">

    <a data-id="{{id}}" data-toggle="annotation" href="#tab-annotation-{{id}}">

        <i class="icon-{{iconTab}}"></i> 

        <span id="onglet-title-{{id}}">{{title}}</span> 

        <span class="close-tab">&times;</span>

    </a>

</li>

</script>

<div class="edit-annotation-title row">

	<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>

</div>

<div class="row annotation-son-content">

		<div class="span6">

			<form class="form-horizontal">

				<div class="control-group">

					<label class="control-label" for="url-source">URL source :</label>

					<div class="controls">

						<input type="text" id="url-source" placeholder="http://">

					</div>

				</div>

				<div class="control-group">

					<label class="control-label" for="embed">Code embed :</label>

					<div class="controls">

						<textarea name="" id="embed" cols="30" rows="10"></textarea>

					</div>

				</div>

			</form>

		</div>

</div>

</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>

<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}}" style="background-color : {{color}};">

	<td>{{title}}</td>

	<td>{{type}}</td>

	<td>{{begin}}</td>

	<td>{{getDuration}}</td>

	<td>{{end}}</td>

	<td>

		<a href="#" data-id="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}">

			<i class="icon-pencil"></i></a>

		<a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete-annotation">

			<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}}" style="background-color : {{color}};">

	<td class="list-chapter-title">{{title}}</td>

	<td class="list-chapter-tags">{{keywords}}</td>

	<td class="begin">{{begin}}</td>

	<td class="duration">{{getDuration}}</td>

	<td class="end">{{end}}</td>

	<td>

		<table>

			<tr>

				<td>

					<a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a>

				</td>

				<td>

					<a data-title="{{title}}" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>

				</td>

			</tr>

		</table>

	</td>

</tr>

</script>

<script id="tpl-chapter-edit" type="text/html">

<form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}">

	<h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>

	<div class="row">

		<div class="span3 text-right">

			<input name="title" type="text" value="{{title}}">

			<input name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}">

		</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"><span {{#beginTangle}}class="time-tangle tangle-start begin" data-milliseconds="{{begin.milliseconds}}"{{/beginTangle}}>{{begin}}</span></td>

						<td class="span1"><span>{{getDuration}}</span></td>

						<td class="span1"><span {{#endTangle}}class="time-tangle tangle-end end" data-milliseconds="{{end.milliseconds}}"{{/endTangle}}>{{end}}</span></td>

					</tr>

				</tbody>

			</table>

		</div>

	</div>

	<div class="row">

		<div class="span6 text-center">

			<textarea class="" name="description" id="">{{description}}</textarea>

		</div>

	</div>

</form>

</script>