{% if show_details %}
    {% if organigrammes|length %}
        <!-- debut légende -->
        <div class="row card-bottom ml-1 mr-1" style="background-color: #f3f3f3 ;border-radius: 0.25rem; border:solid 1px gray; padding:5px 0 5px 0;">
            <div class="col-4">
                <a class="media border-0">
                    <div class="media-left pr-1">
                        <span class="avatar avatar-md">
                            <span class="media-object rounded-circle text-circle" style="background-color:#7fc3c0;"></span>
                        </span>
                    </div>
                    <div class="media-body w-100">
                        <p class="list-group-item-text text-truncate text-bold-600 mb-0 ml-1" style="line-height:40px;">{% trans %}Bloc Primaire{% endtrans %}</p> <!-- product-dept -->
                    </div>
                </a>
            </div>
            <div class="col-4">
                <a class="media border-0">
                    <div class="media-left pr-1">
                        <span class="avatar avatar-md">
                            <span class="media-object rounded-circle text-circle" style="background-color:#F08080;"></span>
                        </span>
                    </div>
                    <div class="media-body w-100">
                        <p class="list-group-item-text text-truncate text-bold-600 mb-0 ml-1" style="line-height:40px;">{% trans %}Bloc Final{% endtrans %}</p> <!-- pipeline1-->
                    </div>
                </a>
            </div>
            <div class="col-4">
                <a class="media border-0">
                    <div class="media-left pr-1">
                        <span class="avatar avatar-md">
                            <span class="media-object rounded-circle text-circle" style="background-color:#cbb545"></span>
                        </span>
                    </div>
                    <div class="media-body w-100">
                        <p class="list-group-item-text text-truncate text-bold-600 mb-0 ml-1" style="line-height:40px;">{% trans %}Bloc intermédiaire{% endtrans %}</p> <!-- middle-level -->
                    </div>
                </a>
            </div>
        </div>
        <!-- end légende -->
        <div id="chart-container" style="min-height:700px !important;"></div>
        
    {% else %}
        <div class="alert alert-info mb-2" role="alert">
            <i class="fa fa-info-circle mr-1"></i> {% trans %}Aucun ordinogramme trouvé{% endtrans %} !
        </div>
    {% endif %}
{% else %}
<div class="alert alert-info mb-2" role="alert">
    <i class="fa fa-info-circle mr-1"></i> {% trans %}Aucun ordinogramme trouvé{% endtrans %} !
</div>
{% endif %}