<template>
    <div>
        <h2 class="intro-y text-lg font-medium mt-10">Lista de Usuarios</h2>
        <div class="grid grid-cols-12 gap-6 mt-5">
            <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">
                <router-link :to="{ name: 'users-add'}">
                    <button class="btn btn-primary shadow-md mr-2">Agregar Nuevo Usuario</button>
                </router-link>
                <div class="hidden md:block mx-auto text-slate-500"> Mostrando 1 a 10 de 150 registros </div>
                <select class="w-20 form-select box mt-3 sm:mt-0 mr-1">
                    <option>10</option>
                    <option>25</option>
                    <option>35</option>
                    <option>50</option>
                </select>
                <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
                    <div class="w-56 relative text-slate-500">
                        <input type="text" class="form-control w-56 box pr-10" placeholder="Buscar...">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="intro-y col-span-12 md:col-span-6" v-for="(user, index) in users" :key="index + 'user'">
                <div class="box">
                    <div class="flex flex-col lg:flex-row items-center p-5">
                        <div class="w-24 h-24 lg:w-12 lg:h-12 image-fit lg:mr-1">
                            <img alt="Midone - HTML Admin Template" class="rounded-full" src="@/assets/user.svg">
                        </div>
                        <div class="lg:ml-2 lg:mr-auto text-center lg:text-left mt-3 lg:mt-0">
                            <a href="" class="font-medium">{{ user }}</a>
                            <div class="text-slate-500 text-xs mt-0.5">0416-2222222</div>
                        </div>
                        <div class="flex mt-4 lg:mt-0">
                            <router-link :to="{ name: 'vehicles-add'}">
                                <button class="btn btn-primary py-1 px-2 mr-2">Registrar Vehiculo</button>
                            </router-link>
                            <router-link :to="{ name: 'users-history'}">
                                <button class="btn btn-outline-secondary py-1 px-2">Historial</button>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
            <div class="intro-y col-span-12 flex flex-wrap sm:flex-row sm:flex-nowrap items-center">
                <nav class="w-full sm:w-auto sm:mr-auto">
                    <ul class="pagination">
                        <!-- <li class="page-item">
                            <a class="page-link" href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
                                    <polyline points="11 17 6 12 11 7"></polyline>
                                    <polyline points="18 17 13 12 18 7"></polyline>
                                </svg>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
                                    <polyline points="15 18 9 12 15 6"></polyline>
                                </svg>
                            </a>
                        </li> -->
                        <li class="page-item active">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">...</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
                                    <polyline points="9 18 15 12 9 6"></polyline>
                                </svg>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
                                    <polyline points="13 17 18 12 13 7"></polyline>
                                    <polyline points="6 17 11 12 6 7"></polyline>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>


        <!-- BEGIN: Slide Over Toggle -->
        <div class="text-center">
            <a @click="showSlideOver" data-tw-toggle="modal" data-tw-target="#header-footer-slide-over-preview" class="btn btn-primary">Mostrar</a>
        </div>
        <!-- END: Slide Over Toggle -->
        <!-- BEGIN: Slide Over Content -->
        <div id="header-footer-slide-over-preview" class="modal modal-slide-over" data-tw-backdrop="static" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <a data-tw-dismiss="modal" href="javascript:;">
                        <i data-lucide="x" class="w-8 h-8 text-slate-400"></i>
                    </a>
                    <!-- BEGIN: Slide Over Header -->
                    <div class="modal-header">
                        <h2 class="font-medium text-base mr-auto">Broadcast Message</h2>
                        <button class="btn btn-outline-secondary hidden sm:flex">
                            <i data-lucide="file" class="w-4 h-4 mr-2"></i> Download Docs
                        </button>
                        <div class="dropdown sm:hidden">
                            <a class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false" data-tw-toggle="dropdown">
                                <i data-lucide="more-horizontal" class="w-5 h-5 text-slate-500"></i>
                            </a>
                            <div class="dropdown-menu w-40">
                                <ul class="dropdown-content">
                                    <li>
                                        <a href="javascript:;" class="dropdown-item">
                                            <i data-lucide="file" class="w-4 h-4 mr-2"></i> Download Docs
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- END: Slide Over Header -->
                    <!-- BEGIN: Slide Over Body -->
                    <div class="modal-body">
                        <div>
                            <label for="modal-form-1" class="form-label">From</label>
                            <input id="modal-form-1" type="text" class="form-control" placeholder="example@gmail.com">
                        </div>
                        <div class="mt-3">
                            <label for="modal-form-2" class="form-label">To</label>
                            <input id="modal-form-2" type="text" class="form-control" placeholder="example@gmail.com">
                        </div>
                        <div class="mt-3">
                            <label for="modal-form-3" class="form-label">Subject</label>
                            <input id="modal-form-3" type="text" class="form-control" placeholder="Important Meeting">
                        </div>
                        <div class="mt-3">
                            <label for="modal-form-4" class="form-label">Has the Words</label>
                            <input id="modal-form-4" type="text" class="form-control" placeholder="Job, Work, Documentation">
                        </div>
                        <div class="mt-3">
                            <label for="modal-form-5" class="form-label">Doesn't Have</label>
                            <input id="modal-form-5" type="text" class="form-control" placeholder="Job, Work, Documentation">
                        </div>
                        <div class="mt-3">
                            <label for="modal-form-6" class="form-label">Size</label>
                            <select id="modal-form-6" class="form-select">
                                <option>10</option>
                                <option>25</option>
                                <option>35</option>
                                <option>50</option>
                            </select>
                        </div>
                    </div>
                    <!-- END: Slide Over Body -->
                    <!-- BEGIN: Slide Over Footer -->
                    <div class="modal-footer w-full absolute bottom-0">
                        <button type="button" data-tw-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1">Cancel</button>
                        <button type="button" class="btn btn-primary w-20">Send</button>
                    </div>
                    <!-- END: Slide Over Footer -->
                </div>
            </div>
        </div>
        <!-- END: Slide Over Content -->
    </div>
</template>

<script>

    export default {
        data() {
            return {

            }
        },
        methods: {
            showSlideOver() {
                const mySlideOver = tailwind.Modal.getOrCreateInstance(document.querySelector("#mySlideOver"));
                console.log(mySlideOver)
            }
        },
        computed: {
            users() {
                return [
                    'Catherine Zeta-Jones', 'Bruce Willis', 'Robert De Niro', 'Vin Diesel', 'Denzel Washington', 'Edward Norton', 'Richard Gere', 'Sean Connery', 'Christian Bale', 'Keira Knightley'
                ]
            }
        }
    }

</script>