<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Users</a>
            </li>
            <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                <span>List User</span>
            </li>
        </ul>
        <div class="pt-5">
            <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-1 gap-5 mb-5">
                <div class="panel lg:col-span-2 xl:col-span-3">
                    <div class="mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Task</h5>
                    </div>
                    <div class="mb-5">
                        <div class="table-responsive text-[#515365] dark:text-white-light font-semibold">
                            <table class="whitespace-nowrap">
                                <thead>
                                    <tr>
                                        <th>User ID</th>
                                        <th>Checklist Serambi</th>
                                        <th>Point</th>
                                        <th class="text-center">Rank</th>
                                    </tr>
                                </thead>
                                <tbody class="dark:text-white-dark">
                                    <tr>
                                        <td>Figma Design</td>
                                        <td>
                                            <div class="h-1.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex w-full">
                                                <div class="bg-danger rounded-full w-[50%]"></div>
                                            </div>
                                            <span class="text-danger font-semibold whitespace-nowrap">3/6</span>
                                        </td>
                                        <td class="text-danger">1200</td>
                                        <td class="text-center">2 mins ago</td>
                                    </tr>
                                    <tr>
                                        <td>Vue Migration</td>
                                        <td>
                                            <div class="h-1.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex w-full">
                                                <div class="bg-info rounded-full w-1/2"></div>
                                            </div>
                                        </td>
                                        <td class="text-success">50%</td>
                                        <td class="text-center">4 hrs ago</td>
                                    </tr>
                                    <tr>
                                        <td>Flutter App</td>
                                        <td>
                                            <div class="h-1.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex w-full">
                                                <div class="bg-warning rounded-full w-[39%]"></div>
                                            </div>
                                        </td>
                                        <td class="text-danger">39%</td>
                                        <td class="text-center">a min ago</td>
                                    </tr>
                                    <tr>
                                        <td>API Integration</td>
                                        <td>
                                            <div class="h-1.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex w-full">
                                                <div class="bg-success rounded-full w-[78.03%]"></div>
                                            </div>
                                        </td>
                                        <td class="text-success">78.03%</td>
                                        <td class="text-center">2 weeks ago</td>
                                    </tr>

                                    <tr>
                                        <td>Blog Update</td>
                                        <td>
                                            <div class="h-1.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex w-full">
                                                <div class="bg-secondary rounded-full w-full"></div>
                                            </div>
                                        </td>
                                        <td class="text-success">100%</td>
                                        <td class="text-center">18 hrs ago</td>
                                    </tr>
                                    <tr>
                                        <td>Landing Page</td>
                                        <td>
                                            <div class="h-1.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex w-full">
                                                <div class="bg-danger rounded-full w-[19.15%]"></div>
                                            </div>
                                        </td>
                                        <td class="text-danger">19.15%</td>
                                        <td class="text-center">5 days ago</td>
                                    </tr>
                                    <tr>
                                        <td>Shopify Dev</td>
                                        <td>
                                            <div class="h-1.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex w-full">
                                                <div class="bg-primary rounded-full w-[60.55%]"></div>
                                            </div>
                                        </td>
                                        <td class="text-success">60.55%</td>
                                        <td class="text-center">8 days ago</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { useAppStore } from '@/stores/index';
    import { useMeta } from '@/composables/use-meta';

    import IconPencilPaper from '@/components/icon/icon-pencil-paper.vue';
    import IconCoffee from '@/components/icon/icon-coffee.vue';
    import IconCalendar from '@/components/icon/icon-calendar.vue';
    import IconMapPin from '@/components/icon/icon-map-pin.vue';
    import IconMail from '@/components/icon/icon-mail.vue';
    import IconPhone from '@/components/icon/icon-phone.vue';
    import IconTwitter from '@/components/icon/icon-twitter.vue';
    import IconDribbble from '@/components/icon/icon-dribbble.vue';
    import IconGithub from '@/components/icon/icon-github.vue';
    import IconShoppingBag from '@/components/icon/icon-shopping-bag.vue';
    import IconTag from '@/components/icon/icon-tag.vue';
    import IconCreditCard from '@/components/icon/icon-credit-card.vue';
    import IconClock from '@/components/icon/icon-clock.vue';
    import IconHorizontalDots from '@/components/icon/icon-horizontal-dots.vue';

    useMeta({ title: 'User Profile' });
    const store = useAppStore();
</script>
