---

layout: default

---

{% include nav.html search=true %}

<div class="container">

	<div class="row justify-content-center">

		<div class="col col-6">

		<h3 class="mt-5">

			Protocole d'annotation 

		</h3>

		<p class="text-muted small">Le procole d'annotation est ensemble de méta-catégories définies par le groupe afin d'avoir un langage commun d'intentions.</p>

		<p class="small text-muted mb-1">Méta-catégories obligatoires</p>

		<ul class="list-group mb-3" id="metacategories">

		{% for metacategory in site.data.metacategories %}

			<li class="list-group-item">

			<p class="mb-1"><span class="badge" style="background-color: rgb{{ metacategory.color  }};">{{ metacategory.label }}</span></p>

			<p class="small text-muted mb-0">{{ metacategory.description }}</p>

			</li>

		{% endfor %}

		</ul>

		<p class="small text-muted mb-1">Méta-catégories propres au groupe</p>

		<ol class="list-group mb-2" id="metacategories-extra">

		{% for metacategory in site.data.metacategories-extra %}

			<li class="list-group-item">

			<p class="mb-1 d-flex w-100 justify-content-between">

				<span class="badge" style="background-color: rgb{{ metacategory.color  }};">{{ metacategory.label }}</span>

				<a class="small" href="metacategory-edit.html" data-toggle="modal" data-target="#exampleModal">éditer</a>

			</p>

			<p class="small text-muted mb-0">{{ metacategory.description }}</p>

			</li>

		{% endfor %}

		</ol>

		<div class="text-right mb-3">

				<a href="#" class="" data-toggle="modal" data-target="#exampleModal">Ajouter une nouvelle méta-catégorie</a>

			</div>

		<div class="d-flex w-100 justify-content-between">

			<div> </div>

			<div>

				<span class="mr-2"><a href="#">voir l'historique</a></span><button type="submit" class="btn btn-primary">Enregistrer</button> 

			</div>

		</div>

		</div>

	</div>

</div>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Ajouter ou modifier</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

            <div class="modal-body">

        			<form>

          			<div class="form-group">

            			<label for="metacategory-label" class="form-control-label">Étiquette</label>

            			<input type="text" class="form-control" id="metacategory-label">

          			</div>

          			<div class="form-group">

            			<label for="metacategory-color" class="form-control-label">Couleur</label>

            			<input type="text" class="form-control" id="metacategory-color">

          			</div>

          			<div class="form-group">

            			<label for="message-text" class="form-control-label">Description</label>

            			<textarea class="form-control" id="message-text"></textarea>

          		</div>

        			</form>

      			</div>

			</div>

      <div class="modal-footer">

				<a href="#" class="mr-auto text-danger">supprimer</a>

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>

        <button type="button" class="btn btn-primary">Enregistrer</button>

      </div>

    </div>

  </div>

</div>

<style>

body.dragging, body.dragging * {

  cursor: move !important;

}

.dragged {

  position: absolute;

  opacity: 0.5;

  z-index: 2000;

}

#metacategories-extra li.placeholder {

  position: relative;

  /** More li styles **/

	background-color: rgba(0,0,0,.125);

	list-style-type: none;

	height: 10px;

}

#metacategories-extra li.placeholder:before {

  position: absolute;

  /** Define arrowhead **/

	color: red;

	content: "";

	width:0;

	height: 0;

}

</style>