{% if not opportunites|length %}

    <div class="alert alert-info" role="alert">
        <i class="icon fa fa-info-circle mr-1"></i> {% trans %}Aucune opportunité trouvée{% endtrans %}
    </div>

{% else %}

    <div class="col-12">
        <div class="row d-flex justify-content-center"> <!-- justify-content-center -->

            {% set idx = 0 %}

            {% for opportunity in opportunites %}

                {% set idx = idx + 1 %}

                <div class="card col-xl-3 col-lg-3 col-md-5 col-sm-10 p-1 mt-2">

                    <div id="opportunity-card" {% if selected_opportunity == opportunity.id %} class="selected_opportunity" {% endif %}>

                        <div id="borderTopGray"></div>
                        <div id="borderLeftGray"></div>
                        <div id="borderRightGray"></div>
                        <div id="borderBottomGray"></div>

                        <div id="borderTop"></div>
                        <div id="borderLeft"></div>
                        <div id="borderRight"></div>
                        <div id="borderBottom"></div>

                        <div class="card-header box-header">

                            <div style='position:absolute; left:35px; top:1px;' class="alarme_relance_{{ opportunity.id }} d-none">
                                <a class="btn btn-action btn-sm pull-right mt-1" id="relances_opportunity" data-id="{{ opportunity.id }}" data-title="{{ opportunity.title }}" data-toggle="modal" data-target="#modal_relances_opportunity" style="cursor:pointer;" title="Relances">
                                    <i class="fa fa-bell clignote_action" style="color:#e57112;"></i>
                                </a>
                            </div>

                            <div style='position:absolute; right:35px; top:1px;'>
                                {% if app.user and is_granted('ROLE_TRAITER_OPPORTUNITY_CRM') and opportunity.id in is_next_level and app.request.get('nature') == 'mine' %}
                                    <a class="btn btn-action btn-sm pull-right mt-1" id="next_level_opportunity" data-id="{{ opportunity.id }}" data-title="{{ opportunity.title }}" data-is-qualification="{% if opportunity.id in is_qualification %}true{% else %}false{% endif %}" data-qualification="{{ opportunity.qualification }}" data-toggle="modal" data-target="#modal_next_level" style="cursor:pointer;" title="Passer vers le niveau suivant">
                                        <i class="fa fa-level-down clignote_action" style="color:#e57112;"></i>
                                    </a>
                                {% elseif app.user and is_granted('ROLE_TRAITER_OPPORTUNITY_CRM') and opportunity.id in is_finish and app.request.get('nature') == 'mine'  %}
                                    <a class="btn btn-action btn-sm pull-right mt-1" id="finish_opportunity" data-id="{{ opportunity.id }}" data-responsable="{{ opportunity.responsableCommerciale.fullName }}" data-title="{{ opportunity.title }}" data-type="{{ opportunity.type }}" data-abreviation="{{ opportunity.client.abreviation }}" data-montant-offre="{{ opportunity.montantOffre }}" data-montant-contractualise="{{ opportunity.montantContractualise }}" 
                                        data-type-soumission="{{ opportunity.typeSoumission }}" data-toggle="modal" data-target="#modal_finish_opportunity" style="cursor:pointer;" title="Clôture l'opportunité">
                                        <i class="fa fa-power-off clignote_action" style="color:#e57112;"></i> 
                                    </a> 
                                {% endif %}
                            </div>
                    
                            <button type="button" class="btn btn-action btn-sm pull-right mt-1 pr-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        
                            {% include('CRM/OpportunityCRM/tabs/tab_action.html.twig') %}  

                            {% if app.user and app.request.get('nature') == 'mine' %} <!-- Mes opportunités -->

                                <img src="{{ asset('uploads/logo_client/'~opportunity.client.logo) }}" title="{{ opportunity.client.name }}" alt="logo client" class="profil" {% if selected_opportunity == opportunity.id %} id="selected_opportunity" {% endif %}/>

                            {% elseif app.user and app.request.get('nature') == 'all' %} <!-- Supervision des opportunités -->
                        
                                <img src="{{ asset('uploads/avatars/'~opportunity.responsableCommerciale.path) }}" title="Responsable commercial : {{ opportunity.responsableCommerciale.fullName }}" alt="profile-image" class="profil rounded-circle" {% if selected_opportunity == opportunity.id %} id="selected_opportunity" {% endif %}/>

                            {% endif %}

                            <div class="info-header">
                                <h5 style="font-size: 15px !important">{{ opportunity.client.abreviation }} - {{ opportunity.client.paysName }}</h5>
                                
                                <strong class="btn btn-sm" style="background-color: {{ opportunity.statutColor }};color:#fff;min-width: 80px;">{{ opportunity.statutValue }}</strong>
                        
                                <hr>
                            </div>

                        </div>

                        <div class="card-body">

                            <p style="text-align: justify;" title="Titre : {{ opportunity.title }}"><i class="fa fa-briefcase" style="color:#e57112;"> </i> Titre : {{ opportunity.title[:50] }}
                                {% if opportunity.title|length > 50 %}...{% endif %}</p>

                            <p><i class="fa fa-flag" style="color:#e57112;"> </i> Type : {{ opportunity.typeValue }} {% if opportunity.type == 'T02' and opportunity.typeSoumission %}- {{ opportunity.typeSoumissionAbreviation }} {% endif %}</p>

                            {#% if opportunity.type == 'T02' and opportunity.typeSoumission %}
                                <p><i class="fa fa-flag" style="color:#e57112;"> </i> Type de soumission : {{ opportunity.typeSoumissionValue }} </p>
                            {% endif %#}
                            
                            <p><i class="fa fa-calendar" style="color:#e57112;"> </i> Date de création : {{ opportunity.dateCreation|date('Y-m-d')}} </p>

                            {% if opportunity.dateSoumission %}
                                <p><i class="fa fa-calendar" style="color:#e57112;"> </i> Date de soumission : {{ opportunity.dateSoumission|date('Y-m-d')}} </p>
                            {% endif %}

                            {% if opportunity.projet|length %}
                                <p {% set cpt = 0 %} ><i class="fa fa-folder-open" style="color:#e57112;"> </i> Projet(s) : 
                                    {% for projet in opportunity.projet %}
                                        {% if cpt > 0 %} - {% endif %}{{ projet.intitule }} 
                                        {% set cpt = cpt + 1 %}
                                    {% endfor %}
                                </p>
                            {% endif %}

                            {% if opportunity.budget %}
                                <p><i class="fa fa-usd" style="color:#e57112;"> </i> Budget : {{ opportunity.budget|number_format(0,'',' ') }} {{ opportunity.unityAbreviation }}</p>
                            {% endif %}

                            {% if opportunity.montantCaution %}
                                <p><i class="fa fa-usd" style="color:#e57112;"> </i> Montant caution : {{ opportunity.montantCaution|number_format(0,'',' ') }} {{ opportunity.unityAbreviation }}</p>
                            {% endif %}

                        </div>
                    </div>

                </div>
                 
            {% endfor %}

        </div>
    </div>

{% endif %}