{% load static i18n %}

<tbody id="log-entries-data" x-data="{ copiedValue: '' }">
{% if log_entries %}
    {% for log_entry in log_entries %}
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-500 dark:bg-slate-700 dark:text-white dark:border-gray-700">
            <td class="border p-2 dark:border-gray-700">{{ forloop.counter }}</td>
            <td class="border p-2 relative break-words dark:border-gray-700 dark:text-white">
                <div class="flex items-center">
                    <div class="flex-grow min-w-0">
                        <p class="log-entry-text">{{ log_entry }}</p>
                    </div>
                    <div x-data="{ showMsg: false }">
                        <i @click="copyText($event); showMsg = true; setTimeout(() => showMsg = false, 2000)"
                           class="fa-solid fa-copy copy-icon p-2 focus:outline-none cursor-pointer dark:text-white">
                        </i>
                        <div x-show="showMsg" @click.away="showMsg = false"
                             class="message fixed bottom-3 right-3 z-20 max-w-sm overflow-hidden bg-green-100 border
                                        border-green-300 rounded p-3 flex items-center justify-center text-green-600 dark:bg-green-700"
                             style="position: fixed; bottom: 20px; right: 20px; display: none;">
                            {% trans 'Copied to Clipboard' %}
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    {% endfor %}

{% else %}
    <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
        <td class="border p-2 hover:bg-gray-100 dark:hover:bg-gray-500 dark:bg-slate-700 dark:border-gray-700 dark:text-white"
            colspan="2">
            {% trans 'No entries!' %}
        </td>
    </tr>
{% endif %}

</tbody>

<tfoot id="log-entries-footer" hx-swap-oob="true" class="dark:bg-slate-800">
{% include 'log_inspector/pagination.html' %}
</tfoot>