From 86880f4849f2c9c30211af69dae254c3a8ccf16e Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Thu, 16 Jan 2020 19:23:38 +0100
Subject: [PATCH 2/5] templates: adapt custom connectors endpoints presentation
 (#39032)

---
 .../apps/bdp/templates/bdp/bdp_detail.html    |  58 +++--
 .../templates/clicrdv/clicrdv_detail.html     |  48 ++--
 .../templates/cmis/cmisconnector_detail.html  |  20 +-
 .../csvdatasource/csvdatasource_detail.html   |  30 +--
 .../family/genericfamily_detail.html          |  63 +++--
 .../apps/gdc/templates/gdc/gdc_detail.html    |  12 +-
 .../apps/mdel/templates/mdel/mdel_detail.html | 230 ++++++++++--------
 .../okina/templates/okina/okina_detail.html   |  78 +++---
 .../grandlyonstreetsections_detail.html       |   8 +-
 .../greco/templates/greco/greco_detail.html   |  37 +--
 .../iparapheur/iparapheur_detail.html         |  58 ++---
 .../templates/iws/iwsconnector_detail.html    |  20 +-
 .../templates/nancypoll/nancypoll_detail.html |  13 +-
 .../teamnet_axel/teamnetaxel_detail.html      |  48 ++--
 .../passerelle/manage/service_view.html       |   4 +-
 15 files changed, 388 insertions(+), 339 deletions(-)

diff --git a/passerelle/apps/bdp/templates/bdp/bdp_detail.html b/passerelle/apps/bdp/templates/bdp/bdp_detail.html
index c87b55a5..490b56fe 100644
--- a/passerelle/apps/bdp/templates/bdp/bdp_detail.html
+++ b/passerelle/apps/bdp/templates/bdp/bdp_detail.html
@@ -8,36 +8,46 @@ Service URL : {{ object.service_url }}
 {% endblock %}
 
 {% block endpoints %}
-<ul>
-<li>{% trans 'Listing resources:' %} <a
-        >{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='resources' %}</a> (GET)</li>
-<li>{% trans 'Creating a new user:' %} <a
-        >{{ site_base_uri }}{% url 'bdp-post-adherent' slug=object.slug %}</a> (POST)</li>
+<ul class="endpoints">
+{% url 'bdp-resources' slug=object.slug resources='resources' as resources_url%}
+<li class="get-method">
+  <span class="description">{% trans 'Listing resources:' %}</span>
+  <a class="example-url" href="{{ resources_url }}">{{ resources_url }}</a>
+</li>
+{% url 'bdp-post-adherent' slug=object.slug as adherent_url%}
+<li class="post-method">
+  <span class="description">{% trans 'Creating a new user:' %}</span>
+  <a class="example-url" href="adherent_url" >{{ adherent_url }}</a>
+</li>
 </ul>
 
-<div>
 <h3>{% trans 'Examples' %}</h3>
-<ul>
-<li>{% trans 'Libraries:' %} <a
-        href="{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='bibliotheques' %}"
-        >{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='bibliotheques' %}</a>
-</li>
-<li>{% trans 'Libraries with a text label:' %} <a
-        href="{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='bibliotheques' %}?text_key=nom"
-        >{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='bibliotheques' %}?text_key=nom</a>
-</li>
-<li>{% trans 'Members:' %} <a
-        href="{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='adherents' %}"
-        >{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='adherents' %}</a>
-</li>
-<li>{% trans 'Filtered Members:' %} <a
-        href="{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='adherents' %}?filter[0][field]=email&filter[0][operator]=eq&filter[0][value]=login@example.net"
-        >{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='adherents' %}?filter[0][field]=email&filter[0][operator]=eq&filter[0][value]=login@example.net</a>
-</li>
+<ul class="endpoints">
+  <li class="get-method">
+    <span class="description">{% trans 'Libraries:' %}</span>
+    <a class="example-url" href="{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='bibliotheques' %}"
+       >{{ site_base_uri }}{% url 'bdp-resources' slug=object.slug resources='bibliotheques' %}</a>
+  </li>
+  {% url 'bdp-resources' slug=object.slug resources='bibliotheques' as bibliotheques_url %}
+  <li class="get-method">
+    <span class="description">{% trans 'Libraries with a text label:' %}</span>
+    <a class="example-url" href="{{ bibliotheques_url }}?text_key=nom">{{ bibliotheques_url }}?text_key=nom</a>
+  </li>
+  {% url 'bdp-resources' slug=object.slug resources='adherents' as adherents_url %}
+  <li class="get-method">
+    <span class="description">{% trans 'Members:' %}</span>
+    <a class="example-url" href="{{ adherents_url }}">{{ adherents_url }}</a>
+  </li>
+  {% url 'bdp-resources' slug=object.slug resources='adherents' as adherents_filter_url %}
+  <li class="get-method">
+    <span class="description">{% trans 'Filtered Members:' %}</span>
+    <a class="example-url" href="{{ adherents_filter_url }}?filter[0][field]=email&filter[0][operator]=eq&filter[0][value]=login@example.net">{{ adherents_filter_url }}?filter[0][field]=email&filter[0][operator]=eq&filter[0][value]=login@example.net</a>
+  </li>
 </ul>
-</div>
+
 {% endblock %}
 
+
 {% block security %}
 <p>
 {% trans 'Accessing is limited to the following API users:' %}
diff --git a/passerelle/apps/clicrdv/templates/clicrdv/clicrdv_detail.html b/passerelle/apps/clicrdv/templates/clicrdv/clicrdv_detail.html
index c2874100..f590df0e 100644
--- a/passerelle/apps/clicrdv/templates/clicrdv/clicrdv_detail.html
+++ b/passerelle/apps/clicrdv/templates/clicrdv/clicrdv_detail.html
@@ -8,21 +8,39 @@ Server: {{ object.server }}
 {% endblock %}
 
 {% block endpoints %}
-<ul>
-<li>{% trans 'Listing all sets:' %} <a href="{% url 'generic-endpoint' connector="clicrdv" slug=object.slug endpoint="interventionsets" slug=object.slug %}"
-        >{{ site_base_uri }}{% url 'generic-endpoint' connector="clicrdv" slug=object.slug endpoint="interventionsets" slug=object.slug %}</a></li>
-<li>{% trans 'Listing interventions in a set:' %} <a
-        >{{ site_base_uri }}{% url 'generic-endpoint' connector="clicrdv" slug=object.slug endpoint="interventionsets" slug=object.slug %}/<i>&lt;set_id&gt;</i></a></li>
-<li>{% trans 'Listing of free dates and times for an intervention:' %} <a
-        >{{ site_base_uri }}{% url 'clicrdv-view' slug=object.slug %}interventions/<i>&lt;intervention_id&gt;</i>/datetimes</a></li>
-<li>{% trans 'Listing of free dates for an intervention:' %} <a
-        >{{ site_base_uri }}{% url 'clicrdv-view' slug=object.slug %}interventions/<i>&lt;intervention_id&gt;</i>/dates</a></li>
-<li>{% trans 'Listing of free times a given date for an intervention:' %} <a
-        >{{ site_base_uri }}{% url 'clicrdv-view' slug=object.slug %}interventions/<i>&lt;intervention_id&gt;</i>/<i>&lt;date&gt;</i>/times</a></li>
-<li>{% trans 'Creating a new appointment:' %} <a
-        >{{ site_base_uri }}{% url 'clicrdv-create-appointment-qs' slug=object.slug %}</a> (POST)</li>
-<li>{% trans 'Cancelling an appointment:' %} <a
-        >{{ site_base_uri }}{% url 'clicrdv-view' slug=object.slug %}<i>&lt;appointment_id&gt;</i>/cancel</a></li>
+<ul class="endpoints">
+  <li class="get-method">
+    <span class="description">{% trans 'Listing all sets:' %}</span>
+    {% url 'generic-endpoint' connector="clicrdv" slug=object.slug endpoint="interventionsets" slug=object.slug as interventionsets_url %}
+    <a class="example-url" href="{{ interventionsets_url }}">{{ site_base_uri }}{{ interventionsets_url }}</a>
+  </li>
+  <li class="get-method">
+    <span class="description">{% trans 'Listing interventions in a set:' %}</span>
+    <a class="example-url" href="{{ interventionsets_url }}">{{ site_base_uri }}{{ interventionsets_url }}/<i>&lt;set_id&gt;</i></a>
+  </li>
+  <li class="get-method">
+    {% url 'clicrdv-view' slug=object.slug as view_url %}
+    <span class="description">{% trans 'Listing of free dates and times for an intervention:' %}</span>
+    <a class="example-url">{{ site_base_uri }}{{ view_url }}interventions/<i>&lt;intervention_id&gt;</i>/datetimes</a></a>
+  </li>
+  <li class="get-method">
+    <span class="description">{% trans 'Listing of free dates for an intervention:' %}</span>
+    <a class="example-url">{{ site_base_uri }}{{ view_url }}interventions/<i>&lt;intervention_id&gt;</i>/dates</a>
+  </li>
+  <li class="get-method">
+    <span class="description">{% trans 'Listing of free times a given date for an intervention:' %}</span>
+    <a class="example-url">{{ site_base_uri }}{{ view_url }}interventions/<i>&lt;intervention_id&gt;</i>/<i>&lt;date&gt;</i></a>
+  </li>
+  <li class="post-method">
+    {% url 'clicrdv-create-appointment-qs' slug=object.slug as create_appointment_url %}
+    <span class="description">{% trans 'Creating a new appointment:' %}</span>
+    <a class="example-url" href="{{ create_appointment_url }}">{{ site_base_uri }}{{ create_appointment_url }}</a>
+  </li>
+  <li class="get-method">
+    {% url 'clicrdv-cancel-appointment' slug=object.slug appointment_id='000' as appointment_cancel_url %}
+    <span class="description">{% trans 'Cancelling an appointment:' %}</span>
+    <a class="example-url">{{ site_base_uri }}{{ view_url }}<i>&lt;appointment_id&gt;</i>/cancel</a>
+  </li>
 </ul>
 {% endblock %}
 
diff --git a/passerelle/apps/cmis/templates/cmis/cmisconnector_detail.html b/passerelle/apps/cmis/templates/cmis/cmisconnector_detail.html
index 577f9fa2..faaa971d 100644
--- a/passerelle/apps/cmis/templates/cmis/cmisconnector_detail.html
+++ b/passerelle/apps/cmis/templates/cmis/cmisconnector_detail.html
@@ -2,21 +2,23 @@
 {% load i18n passerelle %}
 
 {% block endpoints %}
-<ul>
-  <li>
-    <h4>{% trans 'Upload file' %}</h4>
+<ul class="endpoints">
+  <li class="post-method">
+    <span class="description">{% trans 'Upload file' %}</span>
     {% url "generic-endpoint" connector="cmis" slug=object.slug endpoint="uploadfile" as uploadfile %}
-    <p> <strong>POST</strong> <a href="{{uploadfile}}">{{uploadfile}}</a></p>
-    <pre>
-      data_send = {
+    <a class="example-url" href="{{uploadfile}}">{{uploadfile}}</a>
+    <ul class="params">
+      <li><span class="params-title">{% trans "Request body" %}</span>
+        <div class="body-schemas">
+          <pre>
       'path': '/a/path',
       'file': {
         'filename': 'test.txt',
         'content': 'ZmlsZSBjb250ZW50',
         'content_type': 'image/jpeg'
-       }
-    }
-    </pre>
+       }</pre>
+    </div>
+    </ul>
   </li>
 </ul>
 {% endblock %}
diff --git a/passerelle/apps/csvdatasource/templates/csvdatasource/csvdatasource_detail.html b/passerelle/apps/csvdatasource/templates/csvdatasource/csvdatasource_detail.html
index f771c1eb..e4660df0 100644
--- a/passerelle/apps/csvdatasource/templates/csvdatasource/csvdatasource_detail.html
+++ b/passerelle/apps/csvdatasource/templates/csvdatasource/csvdatasource_detail.html
@@ -13,22 +13,22 @@
 {% endblock %}
 
 {% block endpoints %}
+<ul class="endpoints">
 {% url 'generic-endpoint' connector='csvdatasource' slug=object.slug endpoint='data' as csvdatasource_data_url %}
-<ul>
-  <li>{% trans "Returning all file lines:" %}
-    <a href="{{ csvdatasource_data_url }}">{{ csvdatasource_data_url }}</a>
-  </li>
-  <ul>
-  <li>{% trans "Returning lines containing 'abc' in 'text' column (case insensitive):" %}
-    <a href="{{ csvdatasource_data_url }}?q=abc">{{ csvdatasource_data_url }}?q=abc</a>
-  </li>
-  </ul>
-  {% for query in object.query_set.all %}
-  <li>{{ query.label }}:
-    <a href="{% url 'generic-endpoint' connector='csvdatasource' slug=object.slug endpoint='query' rest=query.slug %}/">{% url 'generic-endpoint' connector='csvdatasource' slug=object.slug endpoint='query' rest=query.slug %}/</a>
-    {% if query.description %}&mdash; {{ query.description }}{% endif %}
-  </li>
-  {% endfor %}
+<li class="get-method">
+  <span class="description">{% trans "Returning all file lines:" %}</span>
+  <a class="example-url" href="{{ csvdatasource_data_url }}">{{ csvdatasource_data_url }}</a>
+</li>
+<li class="get-method">
+  <span class="description">{% trans "Returning lines containing 'abc' in 'text' column (case insensitive):" %}</span>
+  <a class="example-url" href="{{ csvdatasource_data_url }}?q=abc">{{ csvdatasource_data_url }}?q=abc</a>
+</li>
+{% for query in object.query_set.all %}
+<li class="get-method"><span class="description">{{ query.label }}:</span>
+  <a class="example-url" href="{% url 'generic-endpoint' connector='csvdatasource' slug=object.slug endpoint='query' rest=query.slug %}/">{% url 'generic-endpoint' connector='csvdatasource' slug=object.slug endpoint='query' rest=query.slug %}/</a>
+   {% if query.description %}&mdash; {{ query.description }}{% endif %}
+</li>
+{% endfor %}
 </ul>
 {% endblock %}
 
diff --git a/passerelle/apps/family/templates/family/genericfamily_detail.html b/passerelle/apps/family/templates/family/genericfamily_detail.html
index d992b18e..a7a33ec5 100644
--- a/passerelle/apps/family/templates/family/genericfamily_detail.html
+++ b/passerelle/apps/family/templates/family/genericfamily_detail.html
@@ -3,60 +3,59 @@
 
 {% block endpoints %}
 <h4>{% trans "Family" %}</h4>
-<ul>
-  <li>
+<ul class="endpoints">
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='family' rest='link/' as link_url %}
-    {% trans 'Link to a family:' %}
-    <a href="{{ link_url }}">{{ site_base_uri }}{{ link_url }}?NameID=...&login=...&password=...</a>
+    <span class="description">{% trans 'Link to a family:' %}</span>
+    <a class="example-url" href="{{ link_url }}">{{ site_base_uri }}{{ link_url }}?NameID=...&login=...&password=...</a>
   </li>
-  <li>
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='family' rest='unlink/' as unlink_url %}
-    {% trans 'Unlink from a family:' %}
-    <a href="{{ unlink_url }}">{{ site_base_uri }}{{ unlink_url }}?NameID=...</a>
+    <span class="description">{% trans 'Unlink from a family:' %}</span>
+    <a class="example-url" href="{{ unlink_url }}">{{ site_base_uri }}{{ unlink_url }}?NameID=...</a>
   </li>
-  <li>
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='family' as family_url %}
-    {% trans 'Get family informations:' %}
-    <a href="{{ family_url }}">{{ site_base_uri }}{{ family_url }}?NameID=...</a>
+    <span class="description">{% trans 'Get family informations:' %}</span>
+    <a class="example-url" href="{{ family_url }}">{{ site_base_uri }}{{ family_url }}?NameID=...</a>
   </li>
-  <li>
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='family' rest='adults/' as adults_url %}
-    {% trans 'Get family adults:' %}
-    <a href="{{ adults_url }}">{{ site_base_uri }}{{ adults_url }}?NameID=...</a>
+    <span class="description">{% trans 'Get family adults:' %}</span>
+    <a class="example-url" href="{{ adults_url }}">{{ site_base_uri }}{{ adults_url }}?NameID=...</a>
   </li>
-  <li>
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='family' rest='children/' as children_url %}
-    {% trans 'Get family children:' %}
-    <a href="{{ children_url }}">{{ site_base_uri }}{{ children_url }}?NameID=...</a>
+    <span class="description">{% trans 'Get family children:' %}</span>
+    <a class="example-url" href="{{ children_url }}">{{ site_base_uri }}{{ children_url }}?NameID=...</a>
   </li>
 </ul>
-
 <h4>{% trans "Invoices" %}</h4>
-<ul>
-  <li>
+<ul class="endpoints">
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='regie' rest='invoices/' as invoices_url %}
-    {% trans 'Get payable invoices:' %}
-    <a href="{{ invoices_url }}">{{ site_base_uri }}{{ invoices_url }}?NameID=...</a>
+    <span class="description">{% trans 'Get payable invoices:' %}</span>
+    <a class="example-url" href="{{ invoices_url }}">{{ site_base_uri }}{{ invoices_url }}?NameID=...</a>
   </li>
-  <li>
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='regie' rest='invoices/history/' as invoices_history_url %}
-    {% trans 'Get invoices history:' %}
-    <a href="{{ invoices_history_url }}">{{ site_base_uri }}{{ invoices_history_url }}?NameID=...</a>
+    <span class="description">{% trans 'Get invoices history:' %}</span>
+    <a class="example-url" href="{{ invoices_history_url }}">{{ site_base_uri }}{{ invoices_history_url }}?NameID=...</a>
   </li>
-  <li>
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='regie' rest='invoice/invoice_id/' as invoice_url %}
-    {% trans 'Get invoice details:' %}
-    <a href="{{ invoice_url }}">{{ site_base_uri }}{{ invoice_url }}</a>
+    <span class="description">{% trans 'Get invoice details:' %}</span>
+    <a class="example-url" href="{{ invoice_url }}">{{ site_base_uri }}{{ invoice_url }}</a>
   </li>
-  <li>
+  <li class="get-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='regie' rest='invoice/invoice_id/pdf/' as invoice_pdf_url %}
-    {% trans 'Get invoice PDF:' %}
+    <span class="description">{% trans 'Get invoice PDF:' %}</span>
     <a href="{{ invoice_pdf_url }}">{{ site_base_uri }}{{ invoice_pdf_url }}</a>
   </li>
-  <li>
+  <li class="post-method">
     {% url 'generic-endpoint' connector='family' slug=object.slug endpoint='regie' rest='invoice/invoice_id/pay/' as invoice_pay_url %}
-    {% trans 'Pay invoice:' %}
-    <a href="{{ invoice_pay_url }}">{{ site_base_uri }}{{ invoice_pay_url }}</a>
+    <span class="description">{% trans 'Pay invoice:' %}</span>
+    <a class="example-url" href="{{ invoice_pay_url }}">{{ site_base_uri }}{{ invoice_pay_url }}</a>
   </li>
 </ul>
 {% endblock %}
diff --git a/passerelle/apps/gdc/templates/gdc/gdc_detail.html b/passerelle/apps/gdc/templates/gdc/gdc_detail.html
index 8e1ff4db..91aee63b 100644
--- a/passerelle/apps/gdc/templates/gdc/gdc_detail.html
+++ b/passerelle/apps/gdc/templates/gdc/gdc_detail.html
@@ -15,15 +15,15 @@
 {% endblock %}
 
 {% block endpoints %}
-<ul>
-<li>{% trans 'Listing communes:' %} <a href="{% url 'generic-endpoint' connector="gdc" slug=object.slug endpoint="communes" %}"
+<ul class="endpoints">
+<li class="get-method"><span class="description">{% trans 'Listing communes:' %}</span> <a class="example-url" href="{% url 'generic-endpoint' connector="gdc" slug=object.slug endpoint="communes" %}"
         >{{ site_base_uri }}{% url 'generic-endpoint' connector="gdc" slug=object.slug endpoint="communes" %}</a></li>
-<li>{% trans 'Listing streets:' %} <a href="{% url 'gdc-voies' slug=object.slug insee=34022%}"
+<li class="get-method"><span class="description">{% trans 'Listing streets:' %}</span> <a class="example-url" href="{% url 'gdc-voies' slug=object.slug insee=34022%}"
         >{{ site_base_uri }}{% url 'gdc-view' slug=object.slug %}/voies/<i>&lt;insee&gt;</i></a></li>
-<li>{% trans 'Listing subjects:' %} <a href="{% url 'generic-endpoint' connector="gdc" slug=object.slug endpoint="objets" %}"
+<li class="get-method"><span class="description">{% trans 'Listing subjects:' %}</span> <a class="example-url" href="{% url 'generic-endpoint' connector="gdc" slug=object.slug endpoint="objets" %}"
         >{{ site_base_uri }}{% url 'generic-endpoint' connector="gdc" slug=object.slug endpoint="objets" %}</a></li>
-<li>{% trans 'Posting a new request:' %} <a href="{% url 'gdc-post' slug=object.slug %}"
-        >{{ site_base_uri }}{% url 'gdc-post' slug=object.slug %}</a> (POST)</li>
+<li class="post-method"><span class="description">{% trans 'Posting a new request:' %}</span> <a class="example-url" href="{% url 'gdc-post' slug=object.slug %}"
+        >{{ site_base_uri }}{% url 'gdc-post' slug=object.slug %}</a></li>
 </ul>
 {% endblock %}
 
diff --git a/passerelle/apps/mdel/templates/mdel/mdel_detail.html b/passerelle/apps/mdel/templates/mdel/mdel_detail.html
index f10d4a23..117928dd 100644
--- a/passerelle/apps/mdel/templates/mdel/mdel_detail.html
+++ b/passerelle/apps/mdel/templates/mdel/mdel_detail.html
@@ -2,113 +2,120 @@
 {% load i18n passerelle %}
 
 {% block endpoints %}
-<ul>
-    <li>
-        <h4>{%trans 'Create Demand'%}</h4>
+<ul class="endpoints">
+    <li class="post-method">
+        <span class="description">{%trans 'Create Demand'%}</span>
         {% url "generic-endpoint" connector="mdel" slug=object.slug endpoint="create" as create %}
-        <p> <strong>POST</strong> <a href="{{create}}">{{create}}</a></p>
-        <ul>
-            <li>
-                <p>ILE-LA PAYLOAD</p>
-                <ul style="font-size:smaller; font-style:oblique">
-                    <p>Extra</p>
-                    <ul>
-                        <li>demand_type (ile-la, rco-la, aec-la) *</li>
-                        <li>code_insee *</li>
-                    </ul>
-                    <p>Fields</p>
-                    <ul>
-                        <li>nom_famille *</li>
-                        <li>nom_usage *</li>
-                        <li>prenoms *</li>
-                        <li>date_naissance *</>
-                        <li>lieunaiss_localite *</>
-                        <li>lieunaiss_division_territoriale *</>
-                        <li>lieunaiss_code_postal *</>
-                        <li>lieunaiss_pays (iso3a) *</>
-                        <li>sexe (H/F) *</li>
-                        <li>nationalite (iso3a ie FRA) *</li>
-                        <li>adresse_num_voie *</li>
-                        <li>adresse_type_voie *</li>
-                        <li>adresse_nom_voie </li>
-                        <li>adresse_code_postal *</li>
-                        <li>adresse_localite *</li>
-                        <li>adresse_division_territoriale *</li>
-                        <li>contact_telephone (0650643793)</li>
-                        <li>contact_email (lucas@lucas.org)</li>
-                        <li>inscription_liste_type (p, ce, cm)*</li>
-                        <li>inscription_localite *</li>
-                        <li>inscription_division_territoriale *</li>
-                        <li>insription_code_insee *</li>
-                        <li>inscription_date *</li>
-                        <li>anterieur_situation (prem, cci)</li>
-                        <li>anterieur_consulat (consulat/amabassade)</li>
-                        <li>anterieur_consulat_pays</li>
-                        <li>anterieur_localite</li>
-                        <li>anterieur_division_territoriale</li>
-                        <li>anterieur_ue_localite</li>
-                        <li>anterieur_ue_division_territoriale</li>
-                        <li>anterieur_ue_localite_pays</li>
-                        <li>justificatif_identite</li>
-                        <li>justificatif_domicile</li>
-                    </ul>
-                </ul>
-            <li>
-                <p>RCO-LA PAYLOAD</p>
-            </li>
-            <li>
-                <p>AEC-LA PAYLOAD</p>
-                <ul style="font-size:smaller; font-style:oblique">
-                    <p>Extra</p>
-                    <ul>
-                        <li>demand_type (aec-la)</li>
-                        <li>code_insee</li>
-                        <li>code_postal</li>
-                        <li>aec_type</li>
-                        <li>aec_type_raw</li>
-                        <li>ville</li>
-                    </ul>
-                    <p>Fields</p>
-                    <ul>
-                        <li>aec_nature</li>
-                        <li>aec_nature_raw</li>
-                        <li>date_acte</li>
-                        <li>demandeur_adresse_code_postal</li>
-                        <li>demandeur_adresse_complement</li>
-                        <li>demandeur_adresse_ville</li>
-                        <li>demandeur_adresse_num</li>
-                        <li>demandeur_adresse_pays</li>
-                        <li>demandeur_adresse_pays_raw</li>
-                        <li>demandeur_adresse_voie</li>
-                        <li>demandeur_civilite</li>
-                        <li>demandeur_civilite_raw</li>
-                        <li>demandeur_email</li>
-                        <li>demandeur_nom</li>
-                        <li>demandeur_prenoms</li>
-                        <li>demandeur_telephone</li>
-                        <li>nombre_exemplaire</li>
-                        <li>qualite_demandeur</li>
-                        <li>qualite_demandeur_autre</li>
-                        <li>qualite_demandeur_raw</li>
-                        <li>titulaire_mere_nom</li>
-                        <li>titulaire_mere_prenoms</li>
-                        <li>titulaire_naiss_date</li>
-                        <li>titulaire_naiss_departement</li>
-                        <li>titulaire_naiss_departement_raw</li>
-                        <li>titulaire_naiss_ville</li>
-                        <li>titulaire_naiss_ville_raw</li>
-                        <li>titulaire_nom</li>
-                        <li>titulaire_pere_nom</li>
-                        <li>titulaire_pere_prenoms</li>
-                        <li>titulaire_prenoms</li>
-                    </ul>
-            </li>
+        <a class="example-url" href="{{create}}">{{create}}</a>
+        <ul class="params">
+          <li>ILE-LA PAYLOAD
+            <div class="body-schemas">
+              <ul style="font-size:smaller; font-style:oblique">
+                <li>Extra
+                  <ul>
+                    <li>demand_type (ile-la, rco-la, aec-la) *</li>
+                    <li>code_insee *</li>
+                  </ul>
+                </li>
+                <li>Fields
+                  <ul>
+                    <li>nom_famille *</li>
+                    <li>nom_usage *</li>
+                    <li>prenoms *</li>
+                    <li>date_naissance *</li>
+                    <li>lieunaiss_localite *</li>
+                    <li>lieunaiss_division_territoriale *</li>
+                    <li>lieunaiss_code_postal *</li>
+                    <li>lieunaiss_pays (iso3a) *</li>
+                    <li>sexe (H/F) *</li>
+                    <li>nationalite (iso3a ie FRA) *</li>
+                    <li>adresse_num_voie *</li>
+                    <li>adresse_type_voie *</li>
+                    <li>adresse_nom_voie </li>
+                    <li>adresse_code_postal *</li>
+                    <li>adresse_localite *</li>
+                    <li>adresse_division_territoriale *</li>
+                    <li>contact_telephone (0650643793)</li>
+                    <li>contact_email (lucas@lucas.org)</li>
+                    <li>inscription_liste_type (p, ce, cm)*</li>
+                    <li>inscription_localite *</li>
+                    <li>inscription_division_territoriale *</li>
+                    <li>insription_code_insee *</li>
+                    <li>inscription_date *</li>
+                    <li>anterieur_situation (prem, cci)</li>
+                    <li>anterieur_consulat (consulat/amabassade)</li>
+                    <li>anterieur_consulat_pays</li>
+                    <li>anterieur_localite</li>
+                    <li>anterieur_division_territoriale</li>
+                    <li>anterieur_ue_localite</li>
+                    <li>anterieur_ue_division_territoriale</li>
+                    <li>anterieur_ue_localite_pays</li>
+                    <li>justificatif_identite</li>
+                    <li>justificatif_domicile</li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li>RCO-LA PAYLOAD</li>
+          <li>AEC-LA PAYLOAD
+            <div class="body-schemas">
+              <ul style="font-size:smaller; font-style:oblique">
+                <li>Extra
+                  <ul>
+                    <li>demand_type (aec-la)</li>
+                    <li>code_insee</li>
+                    <li>code_postal</li>
+                    <li>aec_type</li>
+                    <li>aec_type_raw</li>
+                    <li>ville</li>
+                  </ul>
+                </li>
+                <li>Fields
+                  <ul>
+                    <li>aec_nature</li>
+                    <li>aec_nature_raw</li>
+                    <li>date_acte</li>
+                    <li>demandeur_adresse_code_postal</li>
+                    <li>demandeur_adresse_complement</li>
+                    <li>demandeur_adresse_ville</li>
+                    <li>demandeur_adresse_num</li>
+                    <li>demandeur_adresse_pays</li>
+                    <li>demandeur_adresse_pays_raw</li>
+                    <li>demandeur_adresse_voie</li>
+                    <li>demandeur_civilite</li>
+                    <li>demandeur_civilite_raw</li>
+                    <li>demandeur_email</li>
+                    <li>demandeur_nom</li>
+                    <li>demandeur_prenoms</li>
+                    <li>demandeur_telephone</li>
+                    <li>nombre_exemplaire</li>
+                    <li>qualite_demandeur</li>
+                    <li>qualite_demandeur_autre</li>
+                    <li>qualite_demandeur_raw</li>
+                    <li>titulaire_mere_nom</li>
+                    <li>titulaire_mere_prenoms</li>
+                    <li>titulaire_naiss_date</li>
+                    <li>titulaire_naiss_departement</li>
+                    <li>titulaire_naiss_departement_raw</li>
+                    <li>titulaire_naiss_ville</li>
+                    <li>titulaire_naiss_ville_raw</li>
+                    <li>titulaire_nom</li>
+                    <li>titulaire_pere_nom</li>
+                    <li>titulaire_pere_prenoms</li>
+                    <li>titulaire_prenoms</li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </li>
         </ul>
     </li>
-    <li>
-        <h4>{%trans 'Get Demand Status'%}</h4>
+    <li class="get-method">
+        <span class="description">{%trans 'Get Demand Status'%}</span>
         {% url "generic-endpoint" connector="mdel" slug=object.slug endpoint="status" as get_status %}
-        <p><strong>GET</strong> <a href="{{get_status}}?demand_id=1-14-ILE-LA">{{get_status}}?demand_id=1-14-ILE-LA</a></p>
+        <a class="example-url" href="{{get_status}}?demand_id=1-14-ILE-LA">{{get_status}}?demand_id=1-14-ILE-LA</a>
+        <div>
         <samp>
             {
                 "data": {
@@ -119,15 +126,22 @@
                 "err": 0
             }
         </samp>
+        </div>
     </li>
-    <li>
-        <h4>{%trans 'Data Sources'%}</h4>
+</ul>
+<h4>{%trans 'Data Sources'%}</h4>
+<ul class="endpoints">
+    <li class="get-method">
         {% url "generic-endpoint" connector="mdel" slug=object.slug endpoint="applicants" as get_applicants %}
-        <p><strong>GET</strong> <a href="{{get_applicants}}?without=PersonneConcernee,Representant">{{get_applicants}}?without=PersonneConcernee,Representant</a></p>
+      <a class="exaple-url" href="{{get_applicants}}?without=PersonneConcernee,Representant">{{get_applicants}}?without=PersonneConcernee,Representant</a>
+    </li>
+    <li class="get-method">
         {% url "generic-endpoint" connector="mdel" slug=object.slug endpoint="certificates" as get_certificates %}
-        <p><strong>GET</strong> <a href="{{get_certificates}}">{{get_certificates}}</a></p>
+        <a class="example-url" href="{{get_certificates}}">{{get_certificates}}</a>
+    </li>
+    <li class="get-method">
         {% url "generic-endpoint" connector="mdel" slug=object.slug endpoint="certificate-types" as get_certificates_type %}
-        <p><strong>GET</strong> <a href="{{get_certificates_type}}">{{get_certificates_type}}</a></p>
+        <a class="example-url" href="{{get_certificates_type}}">{{get_certificates_type}}</a>
     </li>
 </ul>
 {% endblock %}
diff --git a/passerelle/apps/okina/templates/okina/okina_detail.html b/passerelle/apps/okina/templates/okina/okina_detail.html
index f1afee57..5427840a 100644
--- a/passerelle/apps/okina/templates/okina/okina_detail.html
+++ b/passerelle/apps/okina/templates/okina/okina_detail.html
@@ -14,71 +14,71 @@ This API provides an access to <a href="https://www.okina.fr/">Okina</a> API.
 
 {% block endpoints %}
 <h4>{% trans 'General' %}</h4>
-<ul>
-<li>{% trans 'Cities:' %} <a href="cities/"
+<ul class="endpoints">
+<li class="get-method"><span class="description">{% trans 'Cities:' %}</span> <a class="example-url" href="cities/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}cities</a></li>
-<li>{% trans 'Classes:' %} <a href="classes/"
+<li class="get-method"><span class="description">{% trans 'Classes:' %}</span><a class="example-url" href="classes/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}classes</a></li>
-<li>{% trans 'Institutions:' %}
-  <a href="institutions/"
+<li class="get-method"><span class="description">{% trans 'Institutions:' %}</span>
+  <a class="example-url" href="institutions/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}institutions</a></li>
 </ul>
 
-<h4>{% trans 'Journeys' %}</h4>
-<ul>
-<li>{% trans 'Institutions accessible from a city:' %}
-  <a href="institutions/from-city/36005/"
+<h4><span class="description">{% trans 'Journeys' %}</h4>
+<ul class="endpoints">
+<li class="get-method"><span class="description">{% trans 'Institutions accessible from a city:' %}</span>
+  <a class="example-url" href="institutions/from-city/36005/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}institutions/from-city/<i>city-insee-code</i>/</a></li>
 
-<li>{% trans 'Stop areas from a city to an institution:' %}
-  <a href="stop-areas/from-city/36005/to-institution/276/"
+<li class="get-method"><span class="description">{% trans 'Stop areas from a city to an institution:' %}</span>
+  <a class="example-url" href="stop-areas/from-city/36005/to-institution/276/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}stop-areas/from-city/<i>city-insee-code</i>/to-institution/<i>institution_id</i>/</a></li>
 
-<li>{% trans 'Origin/Destinations:' %} <a href="origin-destinations/"
+<li class="get-method"><span class="description">{% trans 'Origin/Destinations:' %}</span><a class="example-url" href="origin-destinations/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}origin-destinations</a></li>
-<li>{% trans 'Origin/Destinations to an institution:' %}
-  <a href="origin-destinations/to-institution/276/"
+<li class="get-method"><span class="description">{% trans 'Origin/Destinations to an institution:' %}</span>
+  <a class="example-url" href="origin-destinations/to-institution/276/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}origin-destinations/to-institution/<i>institution_id</i>/</a></li>
-<li>{% trans 'Origin/Destinations from a stop area to an institution:' %}
-  <a href="origin-destinations/from-stop-area/3282/to-institution/276/"
+<li class="get-method"><span class="description">{% trans 'Origin/Destinations from a stop area to an institution:' %}</span>
+  <a class="example-url" href="origin-destinations/from-stop-area/3282/to-institution/276/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}origin-destinations/from-stop-area/<i>stop_area_id</i>/to-institution/<i>institution_id</i>/</a></li>
-<li>{% trans 'Origin/Destinations from a city to an institution:' %}
-  <a href="origin-destinations/from-city/36005/to-institution/276/"
+<li class="get-method"><span class="description">{% trans 'Origin/Destinations from a city to an institution:' %}</span>
+  <a class="example-url" href="origin-destinations/from-city/36005/to-institution/276/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}origin-destinations/from-city/<i>city_insee_code</i>/to-institution/<i>institution_id</i></a></li>
-<li>{% trans 'Origin/Destinations from a city:' %}
-  <a href="origin-destinations/from-city/36005/"
+<li class="get-method"><span class="description">{% trans 'Origin/Destinations from a city:' %}</span>
+  <a class="example-url" href="origin-destinations/from-city/36005/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}origin-destinations/from-city/<i>city_insee_code</i>/</a></li>
 </ul>
 
-<h4>{% trans 'Subscriptions' %}</h4>
-<ul>
-<li>{% trans 'Create a subscriber:' %}
-  POST <a href="subscriber/"
+<h4><span class="description">{% trans 'Subscriptions' %}</h4>
+<ul class="endpoints">
+<li class="post-method"><span class="description">{% trans 'Create a subscriber:' %}</span>
+  <a class="example-url" href="subscriber/"
           >{{ site_base_uri }}{{ object.get_absolute_url }}subscriber/</a>
-  <br/>{% trans 'Same payload as for the Okina POST /b2b/subscribers endpoint' %}</li>
-<li>{% trans 'Informations about a subscriber:' %}
-  <a href="subscriber/284/"
+  <div class="body-schemas">{% trans 'Same payload as for the Okina POST /b2b/subscribers endpoint' %}</div></li>
+<li class="get-method"><span class="description">{% trans 'Informations about a subscriber:' %}</span>
+  <a class="example-url" href="subscriber/284/"
      >{{ site_base_uri }}{{ object.get_absolute_url }}subscriber/<i>id</i>/</a></li>
-<li>{% trans "Get subscriber's QR Code:" %}
-  <a href="subscriber/284/qrcode/"
+<li class="get-method"><span class="description">{% trans "Get subscriber's QR Code:" %}</span>
+  <a class="example-url" href="subscriber/284/qrcode/"
      >{{ site_base_uri }}{{ object.get_absolute_url }}subscriber/<i>id</i>/qrcode/</a></li>
-<li>{% trans 'Create a subscription:' %}
-  POST <a href="subscription/"
+<li class="post-method"><span class="description">{% trans 'Create a subscription:' %}</span>
+  <a class="example-url" href="subscription/"
           >{{ site_base_uri }}{{ object.get_absolute_url }}subscription/</a>
-  <br/>{% trans 'Same payload as for the Okina POST /b2b/subscriptions endpoint' %}</li>
-<li>{% trans 'Informations about a subscription:' %}
-  <a href="subscription/283/"
+  <div class="body-schemas">{% trans 'Same payload as for the Okina POST /b2b/subscriptions endpoint' %}</div></li>
+<li class="get-method"><span class="description">{% trans 'Informations about a subscription:' %}</span>
+  <a class="example-url" href="subscription/283/"
      >{{ site_base_uri }}{{ object.get_absolute_url }}subscription/<i>id</i>/</a></li>
 </ul>
 
 
-<h4>{% trans 'Topology' %}</h4>
-<ul>
-<li>{% trans 'Lines:' %} <a href="topology/lines/"
+<h4><span class="description">{% trans 'Topology' %}</h4>
+<ul class="endpoints">
+<li class="get-method"><span class="description">{% trans 'Lines:' %}</span><a class="example-url" href="topology/lines/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}topology/lines/</a></li>
-<li>{% trans 'Networks:' %} <a href="topology/networks/"
+<li class="get-method"><span class="description">{% trans 'Networks:' %}</span><a class="example-url" href="topology/networks/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}topology/networks/</a></li>
-<li>{% trans 'Vehicle journeys:' %} <a href="topology/vehicle-journeys/"
+<li class="get-method"><span class="description">{% trans 'Vehicle journeys:' %}</span><a class="example-url" href="topology/vehicle-journeys/"
   >{{ site_base_uri }}{{ object.get_absolute_url }}topology/vehicle-journeys/</a></li>
 </ul>
 
diff --git a/passerelle/contrib/grandlyon_streetsections/templates/grandlyon_streetsections/grandlyonstreetsections_detail.html b/passerelle/contrib/grandlyon_streetsections/templates/grandlyon_streetsections/grandlyonstreetsections_detail.html
index cabadd1b..d8bc6232 100644
--- a/passerelle/contrib/grandlyon_streetsections/templates/grandlyon_streetsections/grandlyonstreetsections_detail.html
+++ b/passerelle/contrib/grandlyon_streetsections/templates/grandlyon_streetsections/grandlyonstreetsections_detail.html
@@ -2,11 +2,11 @@
 {% load i18n passerelle %}
 
 {% block endpoints %}
-<ul>
-    <li>
-        {% trans "Details on a section:" %}
+<ul class="endpoints">
+    <li class="get-method">
+        <span class="description">{% trans "Details on a section:" %}</span>
         {% url "generic-endpoint" connector="grandlyon-streetsections" slug=object.slug endpoint="section_info" as endpoint_path %}
-        <a href="{{endpoint_path}}?streetname=Boulevard du Raquin&streetnumber=12&commune=Chassieu"
+        <a class="example-url" href="{{endpoint_path}}?streetname=Boulevard du Raquin&streetnumber=12&commune=Chassieu"
            >{{endpoint_path}}?streetname=Boulevard du Raquin&streetnumber=12&commune=Chassieu</a>
 <pre>
 {
diff --git a/passerelle/contrib/greco/templates/greco/greco_detail.html b/passerelle/contrib/greco/templates/greco/greco_detail.html
index 219f37db..0f748490 100644
--- a/passerelle/contrib/greco/templates/greco/greco_detail.html
+++ b/passerelle/contrib/greco/templates/greco/greco_detail.html
@@ -6,33 +6,35 @@
 {% endblock %}
 
 {% block endpoints %}
-<ul>
-    <li>
+<ul class="endpoints">
+    <li class="get-method">
         {% url "generic-endpoint" connector="greco" slug=object.slug endpoint="ping" as ping %}
-        GET <a href="{{ ping }}">{{ ping }}</a>
+        <a class="example-url" href="{{ ping }}">{{ ping }}</a>
         <br />
         {% trans 'Response:' %} <samp>
           {"data": "…[ping]", "err": 0}
         </samp>
     </li>
-    <li>
+    <li class="post-method">
         {% url "generic-endpoint" connector="greco" slug=object.slug endpoint="create" as create %}
-        POST <a href="{{ create }}">{{ create }}</a>
+        <a class="example-url" href="{{ create }}">{{ create }}</a>
         <br />
-        {% trans 'JSON payload:' %} <samp>
+        <span class="params-title">{% trans 'JSON payload:' %}</span>
+        <div class="body-schemas"><samp>
           { {% for field in object.creation_fields %}"{{ field }}":&nbsp;"…", {% endfor %}
           "fichier1":&nbsp;{"filename":&nbsp;"….…", "content_type":&nbsp;"…/…", "content":&nbsp;"…base64…" },
           "fichier2":&nbsp;{ … }
           }
-        </samp>
+          </samp>
+          </div>
         <br />
         {% trans 'Response:' %} <samp>
           {"data": {"application": "…", "etat": "1 - Créée", "iddemande": "…", "idgreco": "…", "motifsrejet": null}, "err": 0}
         </samp>
     </li>
-    <li>
+    <li class="get-method">
         {% url "generic-endpoint" connector="greco" slug=object.slug endpoint="status" as status %}
-        GET <a href="{{ status }}?idgreco=…&iddemande=…">{{ status }}?idgreco=…[&iddemande=…]</a>
+        <a class="example-url" href="{{ status }}?idgreco=…&iddemande=…">{{ status }}?idgreco=…[&iddemande=…]</a>
         <br />
         {% trans 'Response:' %} <samp>
           {"data": {"commentaireReponse": null, "comptesRendus": null, "dateResolutionEffective": null, "dateResolutionPrevue": "YYYY-MM-DD",
@@ -40,18 +42,18 @@
           "err": 0}
         </samp>
     </li>
-    <li>
+    <li class="get-method">
         {% url "generic-endpoint" connector="greco" slug=object.slug endpoint="answer" as answer %}
-        GET <a href="{{ answer }}?idgreco=…&iddemande=…">{{ answer }}?idgreco=…&iddemande=…&code=…</a>
+        <a class="example-url" href="{{ answer }}?idgreco=…&iddemande=…">{{ answer }}?idgreco=…&iddemande=…&code=…</a>
         <br />
         {% trans 'Response:' %} <samp>
           {"data": {"etat": null, "idgreco": "…", "iddemande": "…", "motifsrejet": null, "message": "…"},
           "err": 0}
         </samp>
     </li>
-    <li>
+    <li class="post-method">
         {% url "generic-endpoint" connector="greco" slug=object.slug endpoint="add-information" as addinfo %}
-        POST <a href="{{ addinfo }}">{{ addinfo }}</a>
+        <a class="example-url" href="{{ addinfo }}">{{ addinfo }}</a>
         <br />
         {% trans 'JSON payload:' %} <samp>
           {"idgreco": "…", "iddemande": "…", "information": "…"}
@@ -61,13 +63,14 @@
           {"data": {"iddemande": "…", "idgreco": "…", "motifsrejet": null}, "err": 0}
         </samp>
     </li>
-    <li>
+    <li class="post-method">
         {% url "generic-endpoint" connector="greco" slug=object.slug endpoint="update" as update %}
-        POST <a href="{{ update }}">{{ update }}</a>
+        <a class="example-url" href="{{ update }}">{{ update }}</a>
         <br />
-        {% trans 'JSON payload:' %} <samp>
+        <span class="params-title">{% trans 'JSON payload:' %}</span>
+        <div class="body-schemas"><samp>
           {"idgreco": "…", "iddemande": "…", "comment": "…"}
-        </samp>
+        </samp></div>
         <br />
         {% trans 'Response:' %} <samp>
           {"data": {"iddemande": "…", "idgreco": "…", "motifsrejet": null}, "err": 0}
diff --git a/passerelle/contrib/iparapheur/templates/iparapheur/iparapheur_detail.html b/passerelle/contrib/iparapheur/templates/iparapheur/iparapheur_detail.html
index d33d1aeb..0f10e2de 100644
--- a/passerelle/contrib/iparapheur/templates/iparapheur/iparapheur_detail.html
+++ b/passerelle/contrib/iparapheur/templates/iparapheur/iparapheur_detail.html
@@ -5,53 +5,53 @@
 {% endblock %}
 
 {% block endpoints %}
-<ul>
+<ul class="endpoints">
   {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='wsdl' as wsdl_url %}
-  <li>{% trans 'Download WSDL file:' %}
-    <a href="{{ wsdl_url }}">{{ site_base_uri }}{{ wsdl_url }}</a>[?debug]
+  <li class="get-method"><span class="description">{% trans 'Download WSDL file:' %}</span>
+    <a class="example-url" href="{{ wsdl_url }}">{{ site_base_uri }}{{ wsdl_url }}</a>[?debug]
   </li>
   {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='ping' as ping_url %}
-  <li>{% trans 'Check WS availability:' %}
-    <a href="{{ ping_url }}">{{ site_base_uri }}{{ ping_url }}</a>[?debug]
+  <li class="get-method"><span class="description">{% trans 'Check WS availability:' %}</span>
+    <a class="example-url" href="{{ ping_url }}">{{ site_base_uri }}{{ ping_url }}</a>[?debug]
   </li>
 {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='types' as types_url %}
-  <li>{% trans 'Get technical types:' %}
-    <a href="{{ types_url }}">{{ site_base_uri }}{{ types_url }}</a>
+  <li class="get-method"><span class="description">{% trans 'Get technical types:' %}</span>
+    <a class="example-url" href="{{ types_url }}">{{ site_base_uri }}{{ types_url }}</a>
   </li>
 {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='subtypes' as subtypes_url %}
-  <li>{% trans 'Get sub types of a given technical type:' %}
-    <a href="{{ subtypes_url }}">{{ site_base_uri }}{{ subtypes_url }}</a>[?type=type]</li>
-<li>
+  <li class="get-method"><span class="description">{% trans 'Get sub types of a given technical type:' %}</span>
+    <a class="example-url" href="{{ subtypes_url }}">{{ site_base_uri }}{{ subtypes_url }}</a>[?type=type]</li>
+<li class="get-method">
   {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='files' as files_url %}
-  {% trans 'List files by status:' %}
-  <a href="{{ files_url }}">{{ site_base_uri }}{{ files_url }}</a>[?status=status]
+  <span class="description">{% trans 'List files by status:' %}</span>
+  <a class="example-url" href="{{ files_url }}">{{ site_base_uri }}{{ files_url }}</a>[?status=status]
 </li>
-<li>
+<li class="post-method">
   {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='create-file' as create_file_url %}
-  {% trans 'Create file:' %}
-  <a href="{{ create_file_url }}">{{ site_base_uri }}{{ create_file_url }}</a> [POST]
-  <p>{% trans "In the payload" %}
+  <span class="description">{% trans 'Create file:' %}</span>
+  <a class="example-url" href="{{ create_file_url }}">{{ site_base_uri }}{{ create_file_url }}</a>
+  <p><span class="description">{% trans "In the payload" %}
   <ul>
-    <li><em>type</em> - {% trans "file type" %}</li>
-    <li><em>subtype</em> - {% trans "file subtype" %}</li>
-    <li><em>title</em> - {% trans "file title" %}</li>
-    <li><em>visibility</em> - {% trans "file visibility" %}</li>
-    <li><em>data</em> - {% trans "base64 encoded data" %}</li>
-    <li><em>content_type</em> - {% trans "file mime type (optional)" %}</li>
-    <li><em>email</em> - {% trans "optional issuer's email" %}</li>
+    <li><em>type</em> - <span class="description">{% trans "file type" %}</li>
+    <li><em>subtype</em> - <span class="description">{% trans "file subtype" %}</li>
+    <li><em>title</em> - <span class="description">{% trans "file title" %}</li>
+    <li><em>visibility</em> - <span class="description">{% trans "file visibility" %}</li>
+    <li><em>data</em> - <span class="description">{% trans "base64 encoded data" %}</li>
+    <li><em>content_type</em> - <span class="description">{% trans "file mime type (optional)" %}</li>
+    <li><em>email</em> - <span class="description">{% trans "optional issuer's email" %}</li>
   </ul>
   </p>
 </li>
-<li>
+<li class="get-method">
   {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='get-file' rest="5e6fc120-f2f7-4dfa-91d0-44414205a2b9" as get_file_url %}
-  {% trans 'Get file:' %}
-  <a href="{{ get_file_url }}">{{ site_base_uri }}{{ get_file_url }}</a><br />
+  <span class="description">{% trans 'Get file:' %}</span>
+  <a class="example-url" href="{{ get_file_url }}">{{ site_base_uri }}{{ get_file_url }}</a><br />
   <em>5e6fc120-f2f7-4dfa-91d0-44414205a2b9</em> - file id
 </li>
-<li>
+<li class="get-method">
   {% url 'generic-endpoint' connector='iparapheur' slug=object.slug endpoint='get-file-status' rest="5e6fc120-f2f7-4dfa-91d0-44414205a2b9" as get_file_status_url %}
-  {% trans 'Get file status:' %}
-  <a href="{{ get_file_status_url }}">{{ site_base_uri }}{{ get_file_status_url }}</a><br />
+  <span class="description">{% trans 'Get file status:' %}</span>
+  <a class="example-url" href="{{ get_file_status_url }}">{{ site_base_uri }}{{ get_file_status_url }}</a><br />
   <em>5e6fc120-f2f7-4dfa-91d0-44414205a2b9</em> - file id
 </li>
 </ul>
diff --git a/passerelle/contrib/iws/templates/iws/iwsconnector_detail.html b/passerelle/contrib/iws/templates/iws/iwsconnector_detail.html
index 8961c040..a33dfdfc 100644
--- a/passerelle/contrib/iws/templates/iws/iwsconnector_detail.html
+++ b/passerelle/contrib/iws/templates/iws/iwsconnector_detail.html
@@ -3,13 +3,16 @@
 
 {% block extra-sections %}
 <div class="section">
-  <ul>
-    <li>
-      <h4>{% trans 'Book date' %}</h4>
+  <div>
+  <ul class="endpoints">
+    <li class="post-method">
+      <span class="description">{% trans 'Book date' %}</span>
       {% url "generic-endpoint" connector="iws" slug=object.slug endpoint="bookdate" as bookdate %}
-      <p> <strong>POST</strong> <a href="{{bookdate}}">{{bookdate}}</a></p>
-      <pre>
-        data_send = {
+      <a class="example-url" href="{{bookdate}}">{{bookdate}}</a>
+      <div class="body-schemas">
+        <span class="params-title">{% trans "Request body" %}</span>
+        <pre>
+        {
           'firstname': 'jon'
           'lastname': 'doe'
           'email': 'jon.doe@jondoe.com'
@@ -17,10 +20,11 @@
           'tel_number': '0102030405',
           'date': '26/10/2018',
           'token': 'XBNDNFT34'
-        }
-      </pre>
+        }</pre>
+      </div>
     </li>
   </ul>
+  </div>
 </div>
 {% endblock %}
 
diff --git a/passerelle/contrib/nancypoll/templates/nancypoll/nancypoll_detail.html b/passerelle/contrib/nancypoll/templates/nancypoll/nancypoll_detail.html
index 1d37e567..501ec097 100644
--- a/passerelle/contrib/nancypoll/templates/nancypoll/nancypoll_detail.html
+++ b/passerelle/contrib/nancypoll/templates/nancypoll/nancypoll_detail.html
@@ -31,14 +31,13 @@
 {% endblock %}
 
 {% block endpoints %}
-<ul>
-    <li>
-        {%trans "Request : "%}
+<ul class="endpoints">
+    <li class="get-method">
+        <span class="description">{% trans "Request : "%}</span>
         {% url "generic-endpoint" connector="nancypoll" slug=object.slug endpoint="data" as get_poll %}
-        <a href="{{get_poll}}?street_no=37&street_name=Marechal Juin">{{get_poll}}?street_no=37&street_name=Marechal Juin</a>
-    </li>
-    <li>
-    {%trans "Response : "%}
+        <a class="example-url" href="{{get_poll}}?street_no=37&street_name=Marechal Juin">{{get_poll}}?street_no=37&street_name=Marechal Juin</a>
+        <br />
+    {% trans "Response : "%}
         <samp>{
             "data": [{
                     "text": "GYMNASE BOURGUIGNON",
diff --git a/passerelle/contrib/teamnet_axel/templates/teamnet_axel/teamnetaxel_detail.html b/passerelle/contrib/teamnet_axel/templates/teamnet_axel/teamnetaxel_detail.html
index 6c9f16b0..2d70c80e 100644
--- a/passerelle/contrib/teamnet_axel/templates/teamnet_axel/teamnetaxel_detail.html
+++ b/passerelle/contrib/teamnet_axel/templates/teamnet_axel/teamnetaxel_detail.html
@@ -3,58 +3,58 @@
 
 {% block endpoints %}
 <h4>{% trans "Family related" %}</h4>
-<ul>
+<ul class="endpoints">
     {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="ping" as endpoint_ping %}
-    <li>{% trans 'Check WSDL availability:' %} <a href="{{ endpoint_ping }}">{{ endpoint_ping }}</a>[?debug]</li>
+    <li class="get-method"><span class="description">{% trans 'Check WSDL availability:' %}</span> <a class="example-url" href="{{ endpoint_ping }}">{{ endpoint_ping }}</a>[?debug]</li>
 
     {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="auth" as endpoint_auth %}
-    <li>{% trans 'Authentication:' %} <a href="{{ endpoint_auth }}?login=foo&password=bar">{{ endpoint_auth }}?login=foo&password=bar</a></li>
+    <li class="get-method"><span class="description">{% trans 'Authentication:' %}</span> <a class="example-url" href="{{ endpoint_auth }}?login=foo&password=bar">{{ endpoint_auth }}?login=foo&password=bar</a></li>
 
     {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="family" rest="link/" as endpoint_link %}
-    <li>{% trans 'Link:' %} <a href="{{ endpoint_link }}?NameID=...&login=foo&password=bar">{{ endpoint_link }}?NameID=...&login=foo&password=bar</a></li>
+    <li class="get-method"><span class="description">{% trans 'Link:' %}</span> <a class="example-url" href="{{ endpoint_link }}?NameID=...&login=foo&password=bar">{{ endpoint_link }}?NameID=...&login=foo&password=bar</a></li>
 
     {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="family" rest="unlink/" as endpoint_unlink %}
-    <li>{% trans 'Unlink:' %} <a href="{{ endpoint_unlink }}?NameID=...">{{ endpoint_unlink }}?NameID=...</a></li>
+    <li class="get-method"><span class="description">{% trans 'Unlink:' %}</span> <a class="example-url" href="{{ endpoint_unlink }}?NameID=...">{{ endpoint_unlink }}?NameID=...</a></li>
 
     {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="family" rest="" as endpoint_family %}
-    <li>{% trans 'Get all family informations:' %} <a href="{{ endpoint_family }}?NameID">{{ endpoint_family }}?NameID=...</a></li>
+    <li class="get-method"><span class="description">{% trans 'Get all family informations:' %}</span> <a class="example-url" href="{{ endpoint_family }}?NameID">{{ endpoint_family }}?NameID=...</a></li>
 
     {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="family" rest="adults/" as endpoint_family %}
-    <li>{% trans 'Get family adults informations:' %} <a href="{{ endpoint_family }}?NameID">{{ endpoint_family }}?NameID=...</a></li>
+    <li class="get-method"><span class="description">{% trans 'Get family adults informations:' %}</span> <a class="example-url" href="{{ endpoint_family }}?NameID">{{ endpoint_family }}?NameID=...</a></li>
     {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="family" rest="children/" as endpoint_family %}
-    <li>{% trans 'Get family children informations:' %} <a href="{{ endpoint_family }}?NameID">{{ endpoint_family }}?NameID=...</a></li>
+    <li class="get-method"><span class="description">{% trans 'Get family children informations:' %}</span> <a class="example-url" href="{{ endpoint_family }}?NameID">{{ endpoint_family }}?NameID=...</a></li>
 </ul>
 
 <h4>{% trans "Invoices related" %}</h4>
-    <ul>
-        <li>{% trans 'Get invoice history list:' %}
+    <ul class="endpoints">
+        <li class="get-method"><span class="description">{% trans 'Get invoice history list:' %}</span>
             {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="regie"  rest="42/invoices/history/" as invoices_history_url %}
-            <a href="{{ invoices_history_url }}?NameID"> {{ invoices_history_url }}?NameID=...</a>
-            <em>42</em> {% trans 'is regie identifier' %}
+            <a class="example-url" href="{{ invoices_history_url }}?NameID"> {{ invoices_history_url }}?NameID=...</a>
+            <em>42</em> <span class="description">{% trans 'is regie identifier' %}
         </li>
 
-        <li>{% trans 'Get invoice list:' %}
+        <li class="get-method"><span class="description">{% trans 'Get invoice list:' %}</span>
             {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="regie" rest="42/invoices/" as invoices_url %}
-            <a href="{{ invoices_url }}?NameID"> {{ invoices_url }}?NameID=...  </a>
-            <em>42</em> {% trans 'is regie identifier' %}
+            <a class="example-url" href="{{ invoices_url }}?NameID"> {{ invoices_url }}?NameID=...  </a>
+            <em>42</em> <span class="description">{% trans 'is regie identifier' %}
         </li>
 
-        <li>{% trans 'Show invoice details:' %}
+        <li class="get-method"><span class="description">{% trans 'Show invoice details:' %}</span>
             {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="regie" rest="42/invoices/2345-20150916/" as invoice_details_url %}
-            <a href="{{ invoice_details_url }}"> {{ site_base_uri }}{{ invoice_details_url }} </a>
-            <em>42</em> {% trans 'is regie identifier' %},
-            <em>2345</em> {% trans 'is family identifier' %},
-            <em>20150916</em> {% trans 'is invoice identifier' %}
+            <a class="example-url" href="{{ invoice_details_url }}"> {{ site_base_uri }}{{ invoice_details_url }} </a>
+            <em>42</em> <span class="description">{% trans 'is regie identifier' %},
+            <em>2345</em> <span class="description">{% trans 'is family identifier' %},
+            <em>20150916</em> <span class="description">{% trans 'is invoice identifier' %}
         </li>
 
-        <li>{% trans 'Get invoice pdf:' %}
+        <li class="get-method"><span class="description">{% trans 'Get invoice pdf:' %}</span>
             {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="regie" rest="42/invoices/2345-20150916/pdf/" as invoice_download_url %}
-            <a href="{{ invoice_download_url }}"> {{ site_base_uri }}{{ invoice_download_url }} </a>
+            <a class="example-url" href="{{ invoice_download_url }}"> {{ site_base_uri }}{{ invoice_download_url }} </a>
         </li>
 
-        <li>{% trans 'Pay invoice:' %}
+        <li class="post-method"><span class="description">{% trans 'Pay invoice:' %}</span>
             {% url "generic-endpoint" connector="teamnet-axel" slug=object.slug endpoint="regie" rest="42/invoices/2345-20150916/pay/" as payment_url %}
-            <a href="{{ payment_url }}"> {{ site_base_uri }}{{ payment_url }}?NameID=...  </a>
+            <a class="example-url" href="{{ payment_url }}"> {{ site_base_uri }}{{ payment_url }}?NameID=...  </a>
         </li>
 </ul>
 {% endblock %}
diff --git a/passerelle/templates/passerelle/manage/service_view.html b/passerelle/templates/passerelle/manage/service_view.html
index 5a8a6244..0709b05e 100644
--- a/passerelle/templates/passerelle/manage/service_view.html
+++ b/passerelle/templates/passerelle/manage/service_view.html
@@ -58,7 +58,7 @@
   <div>
   {% if object.api_description %}<p>{{object.api_description|safe}}</p>{% endif %}
   {% block endpoints %}
-    <ul>
+  <ul class="endpoints">
     {% for endpoint in object.get_endpoints_infos %}
     <li class="{{ endpoint.http_method|default:"get" }}-method">{% if endpoint.description %}<span class="description">{{endpoint.description}}{% trans ':' %}</span>{% endif %}
        <a href="{{endpoint.example_url}}" class="example-url">{{ site_base_uri }}{{endpoint.example_url_as_html}}</a>
@@ -92,7 +92,7 @@
        {% endif %}
     </li>
     {% endfor %}
-    </ul>
+  </ul>
   {% endblock %}
   </div>
 </div>
-- 
2.25.0

