{% load static i18n %}

<table id="log-entries-table"
       class="mt-6 w-full border-collapse dark:bg-slate-800">
    <thead>
    <tr>
        <th scope="col"
            class="border p-2 dark:border-gray-700 dark:bg-slate-700 dark:text-white">
            {% trans 'No.' %}
        </th>
        <th scope="col"
            class="border p-2 dark:border-gray-700 dark:bg-slate-700 dark:text-white">
            {% trans 'Log entries' %}
        </th>
    </tr>
    </thead>
    <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">{{ start_index|add: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">
                            </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"
                                 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" class="dark:bg-slate-800">
    {% include 'log_inspector/pagination.html' %}
    </tfoot>
</table>