{% extends "base.html" %}

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

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

        <div class="flex">
            <div class="flex flex-1">
                <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
                    {% if count == 1 %}
                        {{ locale.search_results_singular|replace({ '%q%':q, '%count%':count }) }}
                    {% else %}
                        {{ locale.search_results_plural|replace({ '%q%':q, '%count%':count }) }}
                    {% endif %}
                </h2>
            </div>

            <div class="flex justify-items-end">
                <label class="my-3">
                    <span class="text-gray-700 font-semibold dark:text-gray-400 mr-2">{{ locale.sort }}</span>
                    <select id="sorting" name="sorting" class="border-2 mt-2 px-2 py-2 rounded-lg text-sm focus:border-indigo-500 border-purple-400 focus:outline-none ease-linear dark:bg-gray-700 dark:text-gray-300 dark:focus:border-gray-400 dark:border-gray-600">
                        <option value='latest'>{{ locale.sort_latest }}</option>
                        <option value='desc'>{{ locale.sort_by_event_date_asc }}</option>
                        <option value='asc'>{{ locale.sort_by_event_date_desc }}</option>
                    </select>
                 </label>
             </div>
        </div>        

        <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.create }}</th>
                            <th class="px-4 py-3">{{ locale.event_title }}</th>
                            <th class="px-4 py-3">{{ locale.event_date }}</th>
                            <th class="px-4 py-3">{{ locale.event }}</th>
                            <th class="px-4 py-3">{{ locale.actions }}</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 event in events %}
                            <tr class="text-gray-700 dark:text-gray-400">

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

                                <td class="px-4 py-3 text-sm">
                                    <span @click="openModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')" aria-label="View details" id="view" class="dark:text-purple-400 text-purple-700 cursor-pointer">{{ event.event_title }}</span>
                                </td>

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

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

                                <td class="px-4 py-3">
                                    <div class="flex items-center space-x-4 text-sm">

                                        {% if event.filename is not null or event.filename is not empty %}

                                            <a aria-label="Download" id="download" class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray" href="download/f/{{ event.filename }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="" 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="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                                                    <polyline points="7 11 12 16 17 11"></polyline>
                                                    <line x1="12" y1="4" x2="12" y2="16"></line>
                                                </svg>
                                            </a>

                                        {% endif %}

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

                            </tr>

                            <!-- Modal -->
                            <div x-cloak 
                            class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
                            x-show="modals.{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                            x-transition:enter="transition ease-out duration-150"
                            x-transition:enter-end="opacity-100"
                            x-transition:enter-start="opacity-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-end="opacity-0"
                            x-transition:leave-start="opacity-100">

                            <div x-cloak 
                            @click.away="closeModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')"
                            @keydown.escape="closeModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')"
                            class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
                            id="{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                            role="dialog"
                            x-show="modals.{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                            x-transition:enter="transition ease-out duration-150"
                            x-transition:enter-end="opacity-100"
                            x-transition:enter-start="opacity-0 transform translate-y-1/2"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-end="opacity-0  transform translate-y-1/2"
                            x-transition:leave-start="opacity-100">

                                <div class="mt-4 mb-8">
                                    <!-- title -->
                                    <p class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-300">
                                        {{ event.event_title }}
                                    </p>
                                    <p class="flex text-sm text-gray-700 dark:text-gray-400 mb-2">
                                        <span class="w-1/5 font-semibold">{{ locale.event }}</span>
                                        <span class="w-4/5">{{ event.event }}</span>
                                    </p>
                                    <p class="flex text-sm text-gray-700 dark:text-gray-400 mb-2">
                                        <span class="w-1/5 font-semibold">{{ locale.feedback }}</span>
                                        <span class="w-4/5">{{ event.event_feedback }}</span>
                                    </p>
                                    <p class="flex text-sm text-gray-700 dark:text-gray-400">
                                        <span class="w-1/5 font-semibold">{{ locale.url }}</span>
                                        <span class="w-4/5">{{ event.url }}</span>
                                    </p>
                                </div>

                                <footer class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-200 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50">
                                    <button
                                    @click="closeModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')"
                                    class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-full dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray">
                                        {{ locale.close }}
                                    </button>
                                </footer>

                            </div>
                            <!-- Modal -->

                        {% 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 %}

{% block js %}

    <script src="{{ assets }}/js/popper.min.js"></script>
    <script src="{{ assets }}/js/tippy-bundle.umd.min.js"></script>
    <script defer src="{{ assets }}/js/focus-trap.js"></script>

    <script>
    tippy('#download', {
        content: '{{ locale.download }}',
        interactive: true,
    });
    tippy('#view', {
        content: '{{ locale.view_details }}',
        interactive: true,
    });
    </script>

{% endblock %}