{% extends "base.html" %}

{% block title %}{{ locale.activity_logs }} - {{ locale.app_name }}{% endblock %}

{% block content %}
    
    <div class="container grid px-6 mx-auto">

        {% if logs_status == false %}
            <div class="flex items-center justify-between p-4 mt-8 text-sm font-semibold dark:text-white dark:bg-gray-600 text-white bg-indigo-500 rounded-lg shadow-xl focus:outline-none focus:shadow-outline-purple">
                <div class="flex items-center">

                    <svg xmlns="http://www.w3.org/2000/svg" class="mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 8h.01"></path>
                        <path d="M11 12h1v4h1"></path>
                        <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
                    </svg>
                    <span>{{ locale.logs_status_msg }}</span>

                </div>
            </div>
        {% endif %}

        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            {{ locale.activity_logs }}
        </h2>

        <div class="w-full overflow-hidden rounded-lg shadow-2xl">

            <div class="w-full overflow-x-auto">
                <table class="w-full whitespace-no-wrap">

                    <thead>
                        <tr class="text-sm font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-white dark:text-gray-400 dark:bg-gray-800">
                            <th class="px-4 py-3">{{ locale.email_text }}</th>
                            <th class="px-4 py-3">{{ locale.action }}</th>
                            <th class="px-4 py-3">{{ locale.description }}</th>
                            <th class="px-4 py-3">{{ locale.ip }}</th>
                            <th class="px-4 py-3">{{ locale.date }}</th>
                        </tr>
                    </thead>

                    <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                        {% for log in logs %}
                            <tr class="text-gray-700 dark:text-gray-400">

                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">
                                        <div>
                                            <!--<a class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline" href="{{ site_url }}/profile/view/{{ log.user_id_enc }}">
                                                <p class="font-semibold">{{ log.email }}</p>
                                            </a>-->
                                            <p class="font-semibold">{{ log.email }}</p>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-4 py-3 text-sm">
                                    {{ log.action }}
                                </td>

                                <td class="px-4 py-3 text-sm">
                                    {{ log.description }}
                                </td>

                                <td class="px-4 py-3 text-sm">
                                    {{ log.ip }}
                                </td>

                                <td class="px-4 py-3 text-sm">
                                    {{ log.time_created|date('d-m-Y \\a\\t H:i') }}
                                </td>

                            </tr>
                        {% endfor %}
                    </tbody>

                </table>
            </div>

            <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-white sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
                {{ pagination|raw }}
            </div>

        </div>

    </div>

{% endblock %}