--- a/design/group-protocol-edit.html	Wed Jul 19 16:20:29 2017 +0200
+++ b/design/group-protocol-edit.html	Tue Jul 18 18:15:51 2017 +0200
@@ -7,44 +7,121 @@
 <div class="container">
 	<div class="row justify-content-center">
 		<div class="col col-6">
-
-		<h2>Lorem ipsum</h2>
-		
-		<p class="lead">Nostrud esse amet deserunt exercitation proident in cupidatat ipsum reprehenderit adipisicing do ipsum aute. Dolor est elit voluptate voluptate velit cillum laborum eiusmod nisi.</p>
-
-		<form>
-			<div class="form-group">
-    		<label for="formGroupExampleInput">Nom du groupe</label>
-    		<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
-  		</div>
-  		<div class="form-group">
-    		<label for="formGroupExampleInput2">Description</label>
-    		<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
-  		</div>
-
-			<button type="submit" class="btn btn-primary">Enregistrer</button>
-		</form>
 	
 		<h3 class="mt-5">
-			Protocole d'annotations 
+			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 %}
-			<h4><span style="border-bottom: 3px solid rgb{{ metacategory.color  }};">{{ metacategory.label }}</span></h4>
+			<li class="list-group-item">
+			<p class="mb-1"><span class="badge" style="background-color: rgb{{ metacategory.color  }};">{{ metacategory.label }}</span></p>
 
-			<p>{{ metacategory.description  }}</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 %}
-			<h4><span style="border-bottom: 3px solid rgb{{ metacategory.color  }};">{{ metacategory.label }}</span></h4>
+			<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>
 
-			<p>{{ metacategory.description  }}</p>
-		{% endfor %}
+		<div class="text-right mb-3">
+				<a href="#" class="" data-toggle="modal" data-target="#exampleModal">Ajouter une nouvelle méta-catégorie</a>
+			</div>
 
-		<button type="submit" class="btn btn-primary">Enregistrer</button> <span class="small ml-2"><a href="#">voir l'historique</a></span>
+		<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>