{% if organigrammes|length %}
    <!-- debut légende -->
    <div class="row pl-2 pr-2 m-1" style="background-color: #f3f3f3 ;border-radius: 0.25rem; border:solid 1px black; padding:5px 0 5px 0;display:flex; justify-content:space-between;">
        <div>
            <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>
            <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>
            <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>
    <!-- end légende -->
    
    <div class="m-0" id="chart-container" style="height:700px !important;"></div>

{% else %}
    <div class="alert alert-info mt-2" role="alert">
        <i class="fa fa-info-circle mr-1"></i> {% trans %}Aucun organigramme trouvé !{% endtrans %}
    </div>
{% endif %}