{% if organigrammes is defined %}

    {% if  organigrammes|length %}

        <!-- debut légende -->
        <div class="row ml-1 mr-1" style="background-color: #f3f3f3 ;border-radius: 0.25rem; border:solid 1px black; padding:5px 0 5px 0;">
            <div class="col-3">
                <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;">Traité</p> <!-- product-dept -->
                    </div>
                </a>
            </div>
            <div class="col-3">
                <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:#4682B4"></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;">Actif</p> <!-- middle-level -->
                    </div>
                </a>
            </div>
            <div class="col-3">
                <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;">Pas encore</p> <!-- pipeline1-->
                    </div>
                </a>
            </div>
            <div class="col-3">
                <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;">Refusé</p> <!--  -->
                    </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> Aucun ordinogramme trouvé !
        </div>

    {% endif %}

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