{% if opportunity is defined %}

    {% if opportunity.tracabilityCRMs|length %}

        {% for tracability in opportunity.tracabilityCRMs %}

            <div class="media-list mt-1">
                <div class="mb-4" style="border:solid 2px #8ecbdd; cursor:pointer;">
                    <div class="card-header p-2" style="background-color:#fff;">
                        <div class="row">

                            {% if tracability.userTracabilityEmetteur %}
                                <div class="col-6">
                                    <span class="avatar avatar-online">
                                        {% if tracability.usertracabilityEmetteur %}
                                            <img src="{{ asset('uploads/avatars/'~tracability.usertracabilityEmetteur.path) }}" width="30" height="30" alt="user" />
                                            <span> {{ tracability.usertracabilityEmetteur.fullName }}
                                                ( {{ tracability.groupTracabilityEmetteur.name }} {% if tracability.isInterimEmetteur %} - {% trans %}Intérim{% endtrans %} {% endif %})</span>
                                        {% else %}
                                            <img src="{{ asset('uploads/avatars/user_not_found.png')}}" width="30" height="30" alt="not defined" style="border : solid 2px #887474" />
                                            <span> Utilisateur non défini ( {{ tracability.groupTracabilityEmetteur.name }} )</span>
                                        {% endif %}
                                    </span>
                                </div>
                            {% endif %}

                            {% if tracability.userTracabilityRecepteur %}
                                <div class="col-6">
                                    <span class="avatar avatar-online">
                                        <img src="{{ asset('uploads/avatars/'~tracability.userTracabilityRecepteur.path) }}" width="30" height="30" alt="user" />
                                        <span> {{ tracability.userTracabilityRecepteur.fullName }}
                                            ( {{ tracability.groupTracabilityRecepteur.name }} )</span>
                                    </span>
                                </div>
                            {% endif %}

                        </div>

                        <div class="mt-1">

                            {% if tracability.etape %}
                                <strong style="font-weight:600;font-size:13px;">{% trans %}Étape{% endtrans %}</strong> : <span class="badge badge-facebook"> {{ tracability.etape.name }} </span> <br><br> 
                            {% elseif tracability.statut == 'S01' %}
                                <strong style="font-weight:600;font-size:13px;">{% trans %}Étape{% endtrans %}</strong> : <span class="badge badge-facebook"> {{ tracability.instanceCRM.functionalityEmetteur.name }} </span> <br><br> 
                            {% endif %}

                            {% if tracability.etatOpportunity %} 
                                <strong style="font-weight:600;font-size:13px;">{% trans %}Le nouveau état d'opportunité{% endtrans %}</strong> : <span class="badge badge-facebook"> {{ tracability.etatOpportunityValue }} </span> <br><br> 
                            {% endif %}

                            {% if tracability.tracabilityFilesCRMs|length %}

                                <div class="table-responsive" >
                                    <table id="recent-orders" class="table table-hover mb-1 ps-container ps-theme-default">
                                        <thead class="bg-light bg-gradient">
                                            <tr class="border-double">
                                                <th>{% trans %}Pièce jointe{% endtrans %}</th>
                                                <th style="width:140px;min-width:140px; text-align:center;">{% trans %}Actions{% endtrans %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for fichier in tracability.tracabilityFilesCRMs %}
                                                <tr data-id="{{ fichier.id }}">
                                                    <td title="{{ fichier.file }}" style="cursor:pointer;">{{ fichier.file|truncate(75, true, '...') }} </td>
                                                    <td style="width:140px;min-width:140px;text-align:center;">

                                                        {% set extension = fichier.file | split(".") | last | lower %}

                                                        {% if extension in ["doc", "ppt", "xls", "docx", "pptx", "xlsx",'pdf','txt','sql'] %}
                                                            <a target="_blank" class="word btn btn-secondary btn-sm btn-not-load" title="Afficher" style="cursor:pointer;"
                                                                href="https://docs.google.com/viewerng/viewer?url={{ absolute_url(asset('uploads/opportunities/Opportunity-'~ opportunity.id ~'/'~ fichier.file)) }}&embedded=true">
                                                                <i class="fa fa-desktop" aria-hidden="true" style="color:white;"></i>
                                                            </a>
                                                        {% elseif extension in ['png','jpg','jpeg','gif'] %}
                                                            <a target="_blank" class="show-fancybox btn btn-secondary btn-sm btn-not-load" title="Afficher" style="cursor:pointer;"
                                                                href="{{asset('uploads/opportunities/Opportunity-'~ opportunity.id ~'/'~ fichier.file) }}">
                                                                <i class="fa fa-desktop" aria-hidden="true" style="color:white;"></i>
                                                            </a>
                                                        {% endif %}

                                                        <a class="btn btn-info btn-sm btn-not-load" href="{{ path('download_file_opportunity_crm',{ id_opportunity:opportunity.id, file_name:fichier.file })}}" title="Télécharger" style="cursor:pointer;">
                                                            <i class="fa fa-cloud-download" aria-hidden="true" style="color:white;"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>

                            {% endif %}

                            <strong style="font-weight:600;font-size:13px;">{% trans %}Message{% endtrans %}</strong> :
                            {% if tracability.commentaire is not null and tracability.commentaire != '' %} 
                                <div> <br> {{ tracability.commentaire|raw }} </div>
                            {% else %}
                                <span class="badge badge-light"> {% trans %}Rien à signaler{% endtrans %} </span>
                            {% endif %}
                        </div>

                    </div>

                    <span class="float-right text muted badge mt-1" style="background-color:{{ tracability.statutColor }}">{{ tracability.statutValue }}</span>
                    <span class="float-right text muted badge badge-light mt-1">{{ tracability.dateAction|date('Y-m-d H:i') }}</span>
                
                </div>
            </div><!-- end div media-list -->

        {% endfor %}

    {% else %}

        <div class="alert alert-info mb-1 mt-1" role="alert">
            <i class="fa fa-info-circle mr-1"></i> {% trans %}Aucune traçabilité trouvée{% 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 %}