{% if actions|length != 0 %}
    {% for action in actions %}
        <div class="tab-pane" id="tracability{{action.id}}" aria-labelledby="link-tab1" role="tabpanel">
            <!-- BEGIN: Content-->
            <div class="row">
                <div class="col-md-12">
                    <ul class="list-group list-group-flush">
                        {% if action.actionHistoriques|length != 0 %}
                            {% for key, tracability in action.actionHistoriques|sort((a, b) => b.id <=> a.id) %}

                                <div data-id="{{tracability.id}}" class="media-list">
                                    <div class="mb-4" style="border:solid 2px #9e9e9e; cursor:pointer;">
                                        <div class="card-header p-2" style="background-color:#f6fafa87;">
                                            <div class="row">
                                                <div class="col-6">
                                                    <!--début créateur -->
                                                    <span class="avatar avatar-online">
                                                        <img src="{{ asset('uploads/avatars/'~ tracability.createur.path) }}" width="30" height="30" alt="user">
                                                        <span>{{tracability.createur.getFullData()}} </span>
                                                    </span>
                                                    <!-- fin créateur -->
                                                </div>
                                                <div class="col-6">
                                                    <!-- début destinataire -->
                                                    <span class="avatar avatar-online">
                                                        <img src="{{ asset('uploads/avatars/'~ tracability.destinataire.path) }}" width="30" height="30" alt="user">
                                                        <span> {{tracability.destinataire.getFullData()}}</span>
                                                    </span>
                                                    <!-- fin destinataire -->
                                                </div>
                                            </div>
                                            <!-- début commentaire -->
                                            <div class="mt-1">
                                                {% if tracability.commentaire|length != 0 %}

                                                    <strong style="font-weight:530;font-size:13px;">Message</strong> :
                                                    <div> <br> {{tracability.commentaire[0].contenu|raw  }} </div> 

                                                    <!-- debut affichage fichier -->
                                                    {% if tracability.commentaire[0].actionCommentaireFiles|length != 0 %}
                                                        <hr>
                                                        <label for="input3">{% trans %}Pièces jointes{% endtrans %} :</label>
                                                        <div class="table-responsive">

                                                            <table class="table table_file table-hover table-bordered mb-0 ps-container ps-theme-default">
                                                                <thead style="background:#e0eeea57;">
                                                                    <tr>

                                                                        <th>Label</th>

                                                                        <th style="text-align:center;width:100px;min-width:90px;">Affichage</th>

                                                                    </tr>

                                                                </thead>

                                                                <tbody>

                                                                    {% for key, fichier in tracability.commentaire[0].actionCommentaireFiles %}

                                                                        <tr id="row_{{fichier.id}}" data-id="{{fichier.id}}">

                                                                            <td title="{{fichier.file}}" style="cursor:pointer;">{{fichier.file|truncate(110, true, '...')}}</td>

                                                                            <td style="width:100px;min-width:100px;text-align:center;">

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

                                                                                {% if extension in ["doc", "ppt", "xls", "docx", "pptx", "xlsx",'pdf','txt','sql'] %}

                                                                                    <a 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/actionfiles/AC_'~ action.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 class="show-fancybox btn btn-secondary btn-sm btn-not-load" title="Afficher" style="cursor:pointer;" href="{{asset('uploads/actionfiles/AC_'~ action.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="{{ asset('uploads/actionfiles/AC_'~ action.id~ '/'~ fichier.file)}}" target="_blank" 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 %}
                                                    <!-- end affichage fichier -->
                                                {% endif %}

                                            </div>
                                            <!-- fin commentaire -->
                                        </div>
                                        <span class="float-right text muted badge mt-1" style="background-color: {{ constant('App\\Entity\\ActionHistorique::STATUT_COLOR')[constant('App\\Entity\\ActionHistorique::'~tracability.statut)] }};">{{ constant('App\\Entity\\ActionHistorique::STATUT')[constant('App\\Entity\\ActionHistorique::'~tracability.statut)] }}</span>
                                        <span class="float-right text muted badge badge-light mt-1"><i class="fa fa-calendar-o"></i> {{tracability.dateCreation|date('d-m-Y H:i', false)|replace({' ':' à '})}}</span>
                                    </div>
                                </div>

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