{% extends "base.html" %}

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

{% block head_js %}
    <script src="{{ assets }}/js/popper.min.js"></script>
    <script src="{{ assets }}/js/tippy-bundle.umd.min.js"></script>
{% endblock %}

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

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

        {% if count > 0 %}

            <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.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.status }}</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">
                                            {% if event.event_title == '' %}
                                                {% set str = random('abasdjoohodneruiweosndweiqbdwe') %}
                                                <span @click="openModal('{{ str|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ str }}')" aria-label="View details" id="view" class="dark:text-purple-400 text-purple-700 cursor-pointer"></span>
                                            {% else %}
                                                <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>
                                            {% endif %}
                                        </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 text-xs w-40">
                                            {% if event.status == 0 %}
                                                <span class="px-2 py-1 font-semibold leading-tight text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-500 dark:text-gray-800" id="in_review">{{ locale.in_review }}</span>
                                            {% elseif event.status == 1 %}
                                                <span class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100" id="event_approved">{{ locale.event_approved }}</span>
                                            {% elseif event.status == 2 %}
                                                <span class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-700" id="event_blocked">{{ locale.blocked }}</span>
                                            {% elseif event.status == 3 %}
                                                <span class="px-2 py-1 font-semibold leading-tight text-gray-100 bg-gray-500 rounded-full dark:text-gray-100 dark:bg-gray-500" id="event_draft">{{ locale.draft }}</span>
                                            {% endif %}
                                        </td>

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

                                                {% for attachment in events_attachments %}

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

                                                            <a aria-label="Download" id='{{ attachment.hashed_id|replace({"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":""}) }}' 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/a/{{ attachment.hashed_id }}">
                                                                <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>

                                                            <script>
                                                                tippy('#{{ attachment.hashed_id|replace({"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":""}) }}', {
                                                                    content: '{{ locale.download }} ' + '{{ attachment.filename }}',
                                                                    interactive: true,
                                                                });
                                                            </script>

                                                        {% endif %}

                                                    {% endif %}

                                                {% endfor %}

                                            </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"

                                    {% if event.event_title == "" %}
                                        {% set str = random("abasdjoohodneruiweosndweiqbdwe") %}
                                        x-show="modals.{{ str|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                                    {% else %}
                                        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 }}"
                                    {% endif %}
                                    
                                    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"

                                    {% if event.event_title == "" %}
                                        {% set str = random("abasdjoohodneruiweosndweiqbdwe") %}
                                        x-show="modals.{{ str|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                                    {% else %}
                                        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 }}"
                                    {% endif %}
                                    
                                    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-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>

        {% else %}
            <span class="mt-4 text-xl font-semibold text-center tracking-wide text-gray-500 dark:text-gray-400">{{ locale.no_event_found }}</span>
            
        {% endif %}

    </div>

{% endblock %}

{% block js %}

    <script src="{{ assets }}/js/focus-trap.js"></script>

    <script>
        tippy('#view', {
            content: '{{ locale.view_details }}',
            interactive: true,
        });
        tippy('#in_review', {
            content: '{{ locale.in_review_popup }}',
            interactive: true,
        });
        tippy('#event_approved', {
            content: '{{ locale.event_approved_popup }}',
            interactive: true,
        });
        tippy('#event_blocked', {
            content: '{{ locale.event_blocked_popup }}',
            interactive: true,
        });
    </script>

{% endblock %}