{% if sync_systems %}
<div class="card">
    <h5 class="card-header">
        Sync Status
    </h5>

    <div class="card-body text-right noprint">
        <table class="table table-hover">
            <tr>
                <th width="100">Status</th>
                <th>System</th>
                <th>Message</th>
                <th>Last Sync</th>
            </tr>
            {% for item in sync_systems %}
            <tr>
                <td>
                    {% if item.sync_status %}
                    {% badge item.sync_status.status bg_color=item.sync_status.get_status_color %}
                    {% else %}
                    {% badge "not-started" bg_color=item.sync_status.get_status_color %}
                    {% endif %}
                </td>

                <td>
                    <a
                        href="{% url 'plugins:netbox_sync_status:syncstatus_list' %}?object_id={{ object.id }}&system={{ item.system.id }}&object_type_id={{ object_type_id }}">{{
                        item.system.name }}</a>
                </td>

                <td>
                    {% if item.sync_status %}
                    {{ item.sync_status.message }}
                    {% else %}
                    N/A
                    {% endif %}
                </td>

                <td>
                    {% if item.sync_status %}
                    {{ item.sync_status.last_updated }}
                    {% else %}
                    Never
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>

    <div class="card-footer text-end noprint">
        <a href="{% url 'plugins:netbox_sync_status:syncstatus_list' %}?object_id={{ object.id }}&object_type_id={{ object_type_id }}"
            class="btn btn-primary btn-sm">Show all events</a>
    </div>
</div>
{% endif %}