<template>
    <div class="flex h-full w-full animate-pulse flex-col">
        <div class="mb-2 flex items-center space-x-4 py-1">
            <div class="h-[2.25rem] w-[40px] rounded bg-secondary"></div>
            <div class="h-[2.25rem] flex-grow rounded bg-secondary"></div>
        </div>
        <div class="flex flex-grow flex-col gap-2">
            <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
            <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
            <div class="my-1 h-[1.25rem] w-5/12 rounded bg-secondary"></div>
            <div class="mt-2 h-[2rem] w-full rounded bg-secondary"></div>
            <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
            <div class="my-1 h-[1.25rem] w-4/6 rounded bg-secondary"></div>
            <div class="my-1 ml-8 h-[1.25rem] w-5/12 rounded bg-secondary"></div>
            <div class="my-1 ml-8 h-[1.25rem] w-7/12 rounded bg-secondary"></div>
            <div class="my-1 ml-8 h-[1.25rem] w-6/12 rounded bg-secondary"></div>
            <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
        </div>
        <hr class="my-3" />
        <div class="flex gap-2">
            <div class="h-[1.25rem] w-2/12 rounded bg-secondary"></div>
            <div class="ml-auto h-[1.25rem] w-4/12 rounded bg-secondary"></div>
        </div>
    </div>
</template>
<style scoped>
.bg-secondary {
    @apply bg-secondary/25;
}
</style>
