{% extends "base.html" %}

{% block title %}{{ locale.drafts }} - {{ 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.drafts }}
        </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.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 draft in drafts %}
                                    <tr class="text-gray-700 dark:text-gray-400">

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

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

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

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

                                                <a aria-label="Download" id="edit" 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="drafts/edit/{{ draft.event_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 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path>
                                                        <path d="M13.5 6.5l4 4"></path>
                                                     </svg>
                                                </a>

                                            </div>
                                        </td>
                                        
                                        <td class="px-4 py-3 text-sm">
                                            {{ draft.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.{{ draft.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ draft.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('{{ draft.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ draft.event_id }}')"
                                    @keydown.escape="closeModal('{{ draft.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ draft.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="{{ draft.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ draft.event_id }}"
                                    role="dialog"
                                    x-show="modals.{{ draft.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ draft.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">
                                                {{ draft.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">{{ draft.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">{{ draft.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">{{ draft.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('{{ draft.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ draft.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_drafts_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('#edit', {
            content: '{{ locale.edit }}',
            interactive: true,
        });
    </script>

{% endblock %}