{% load 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">
            <td class="p-2 dark:border-b-gray-100/50 ">{{ start_index|add:forloop.counter }}</td>
            <td class="p-2 dark:border-b-gray-100/50 relative break-words dark:text-white">
                <div class="flex items-center">
                    <div class="flex-grow min-w-0 mr-8">
                        <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 absolute top-0 right-0">
                        </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-gray-700 dark:border-gray-600 dark:text-white fixed bottom-15 right-15">
                            {% trans 'Copied to Clipboard' %}
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    {% endfor %}

{% else %}
    <tr class="hover:bg-gray-100 dark:hover:bg-gray-500">
        <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 %}