{% macro render_value(field, value) %}
    {% if is_object(value) %}
        {% if 'DateTime' == get_class(value) %}
            <span class="badge badge-info">
                <i class="far fa-calendar-alt"></i>
                {{ value|date('d/m/Y H:i') }}
            </span>
        {% else %}
            {{ value|serialize }}
        {% endif %}
    {% elseif value is iterable %}
        {% for key, v in value %}
            <div><code>{{ key }}</code> => {{ v|raw }}</div>
        {% endfor %}
    {% elseif value is same as(true) %}
        <span class="badge badge-success"><i class="fas fa-check"></i> Oui</span>
    {% elseif value is same as(false) %}
        <span class="badge badge-secondary"><i class="fas fa-times"></i> Non</span>
    {% elseif value is null %}
        <span class="text-muted"><em>vide</em></span>
    {% elseif field matches '/amount|montant/i' %}
        <span class="badge badge-primary">
            <i class="fas fa-euro-sign"></i>
            {{ value|number_format(2, ',', ' ') }} EUR
        </span>
    {% elseif field matches '/day|jour/i' %}
        <span class="badge badge-info">
            <i class="far fa-calendar"></i>
            Jour {{ value }}
        </span>
    {% else %}
        {{ value }}
    {% endif %}
{% endmacro %}

{% import _self as history %}

{% set logentries = admin.getLogEntries(object) %}
<td>
{% block field %}
    {% if logentries|length > 0 %}
        <div class="timeline">
            {% for log in logentries %}
                {% set user = getLogUser(log.username) %}
                {% set currentLogIndex0 = loop.index0 %}

                <div class="time-label">
                    <span class="bg-blue">
                        {{ log.loggedAt|date('d/m/Y') }}
                    </span>
                </div>
                <div>
                    <i class="fas {% if log.action == 'create' %}fa-plus bg-green{% elseif log.action == 'update' %}fa-edit bg-yellow{% elseif log.action == 'remove' or log.action == 'delete' %}fa-trash bg-red{% else %}fa-info-circle bg-gray{% endif %}"></i>
                    <div class="timeline-item">
                        <span class="time">
                            <i class="fas fa-clock"></i> {{ log.loggedAt|date('H:i') }}
                        </span>
                        <h3 class="timeline-header">
                            {% if user is not null %}
                                <strong>{{ user.fullname }}</strong>
                            {% else %}
                                <strong>{{ log.username }}</strong>
                            {% endif %}

                            {% if log.action == 'create' %}
                                <span class="badge badge-success">Création</span>
                            {% elseif log.action == 'update' %}
                                <span class="badge badge-warning">Modification</span>
                            {% elseif log.action == 'remove' or log.action == 'delete' %}
                                <span class="badge badge-danger">Suppression</span>
                            {% else %}
                                <span class="badge badge-secondary">{{ log.action }}</span>
                            {% endif %}
                        </h3>

                        <div class="timeline-body">
                            {% set hasData = log.data is iterable and log.data|length > 0 %}

                            {% if hasData %}
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th style="width: 30%">Champ</th>
                                            <th style="width: 35%">Ancienne valeur</th>
                                            <th style="width: 35%">Nouvelle valeur</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for field, value in log.data %}
                                        {% set oldValue = null %}
                                        {# search last known value for this field in all older log entries #}
                                        {% for candidate in logentries|slice(currentLogIndex0 + 1) %}
                                            {% if oldValue is null and candidate.data is defined and candidate.data is iterable and (field in candidate.data|keys) %}
                                                {% set oldValue = attribute(candidate.data, field) %}
                                            {% endif %}
                                        {% endfor %}
                                        <tr>
                                            <td><strong>{{ field|replace({'_': ' '})|title }}</strong></td>
                                            <td>{{ history.render_value(field, oldValue) }}</td>
                                            <td>{{ history.render_value(field, value) }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                {% if log.action == 'create' %}
                                    <div class="alert alert-success mb-0">
                                        <i class="fas fa-check-circle"></i> <strong>Enregistrement créé</strong>
                                    </div>
                                {% elseif log.action == 'remove' or log.action == 'delete' %}
                                    <div class="alert alert-danger mb-0">
                                        <i class="fas fa-trash"></i> <strong>Enregistrement supprimé</strong>
                                    </div>
                                {% else %}
                                    <div class="text-muted"><em>Aucun détail disponible pour cette entrée.</em></div>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
            <div>
                <i class="fas fa-clock bg-gray"></i>
            </div>
        </div>
    {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> <strong>Aucun historique disponible</strong>
            <p class="mb-0 mt-2">Les modifications futures seront enregistrées et affichées ici.</p>
        </div>
    {% endif %}
{% endblock %}
</td>

<style>
.timeline {
    position: relative;
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
}

.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ddd;
    left: 31px;
    margin: 0;
    border-radius: 2px;
}

.timeline > div {
    position: relative;
    margin-right: 10px;
    margin-bottom: 15px;
}

.timeline > div > .timeline-item {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-top: 0;
    background: #fff;
    color: #444;
    margin-left: 60px;
    margin-right: 15px;
    padding: 0;
    position: relative;
}

.timeline > div > .timeline-item > .time {
    color: #999;
    float: right;
    padding: 10px;
    font-size: 12px;
}

.timeline > div > .timeline-item > .timeline-header {
    margin: 0;
    color: #555;
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
    font-size: 16px;
    line-height: 1.1;
}

.timeline > div > .timeline-item > .timeline-body {
    padding: 10px;
}

.timeline > div > .fa,
.timeline > div > .fas,
.timeline > div > .far,
.timeline > div > .fab,
.timeline > div > .glyphicon,
.timeline > div > .ion {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    position: absolute;
    color: #666;
    background: #d2d6de;
    border-radius: 50%;
    text-align: center;
    left: 18px;
    top: 0;
}

.timeline > .time-label > span {
    font-weight: 600;
    padding: 5px;
    display: inline-block;
    background-color: #fff;
    border-radius: 4px;
}

.bg-blue {
    background-color: #0073b7 !important;
    color: #fff !important;
}

.bg-green {
    background-color: #00a65a !important;
    color: #fff !important;
}

.bg-yellow {
    background-color: #f39c12 !important;
    color: #fff !important;
}

.bg-red {
    background-color: #dd4b39 !important;
    color: #fff !important;
}

.bg-gray {
    background-color: #d2d6de !important;
    color: #fff !important;
}
</style>