<script lang="ts"></script>

<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
	<figure class="lg:w-1/2 min-h-72 skeleton"></figure>
	<div class="card-body lg:w-1/2">
		<div class="flex flex-row flex-wrap gap-2">
			<div class="w-32 skeleton h-4"></div>
			<div class="w-24 skeleton h-4"></div>
		</div>
		<div class="w-72 skeleton h-6"></div>
		<div class="mb-4 flex flex-row items-center gap-4">
			<div class="w-72 skeleton h-2"></div>
			<div class="w-6 skeleton h-2"></div>
		</div>
		<div class="flex flex-col gap-4">
			<div class="flex flex-row justify-between">
				<div class="w-28 skeleton h-2"></div>
				<div class="w-12 skeleton h-2"></div>
			</div>
			<div class="flex flex-row justify-between">
				<div class="w-40 skeleton h-2"></div>
				<div class="w-8 skeleton h-2"></div>
			</div>
			<div class="flex flex-row justify-between">
				<div class="w-24 skeleton h-2"></div>
				<div class="w-14 skeleton h-2"></div>
			</div>
			<div class="flex flex-row justify-between">
				<div class="w-32 skeleton h-2"></div>
				<div class="w-10 skeleton h-2"></div>
			</div>
			<div class="flex flex-row justify-between">
				<div class="w-16 skeleton h-2"></div>
				<div class="w-8 skeleton h-2"></div>
			</div>
		</div>
		<div class="card-actions justify-end mt-auto">
			<div class="w-48 skeleton h-12"></div>
			<div class="w-28 skeleton h-12"></div>
			<div class="w-32 skeleton h-12"></div>
			<div class="w-12 skeleton h-12"></div>
		</div>
	</div>
</div>
