{% if opportunity is defined %}
    {% if opportunity.instanceOrganigrammeCRMs|length %}
        
        <!-- debut légende -->
        <div class="row pl-2 pr-2 ml-1 mr-1 mt-2" 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 %}Traité{% 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:#006699"></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 %}En cours{% 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:#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 %}Pas encore{% endtrans %}</p> <!-- pipeline1-->
                    </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:#993366"></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 %}En attente{% endtrans %}</p> <!-- frontend1 -->
                    </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:#ff7588"></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 %}Bloqué{% endtrans %}</p> <!-- rd-dept -->
                    </div>
                </a>
            </div>
        </div>
        <!-- end légende -->

       <div id="chart-container" style="min-height:1160px !important;"></div>
    {% else %}
        <div class="alert alert-info mb-2 mt-1" 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-1 mt-1" role="alert">
        <i class="fa fa-info-circle mr-1"></i> {% trans %}Aucune opportunité sélectionnée{% endtrans %} !
    </div>
{% endif %}