<div class="flex flex-col min-h-screen">
<div class="flex-1 flex gap-8">
<div class="wine-cellar flex-1">
<div class="flex justify-between items-center mb-6">
<div class="flex items-center gap-4">
<h1 id="cellar-title" class="text-2xl font-bold" onclick="editTitle()">My Wine Cellar</h1>
</div>
<div class="flex gap-2">
<button
onclick="showBulkUpload()"
class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-md"
>
Wine List or Label Upload
</button>
<button
onclick="shareWineCellar()"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md"
>
Share
</button>
</div>
</div>
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Standard Storage</h3>
<button class="px-3 py-1 text-sm border rounded hover:bg-gray-50" onclick="addStandardSlot()">Add Slot</button>
</div>
<div class="grid gap-4 grid-cols-4">
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="standard-1"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('standard-1')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="standard-2"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('standard-2')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="standard-3"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('standard-3')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="standard-4"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('standard-4')"
>
+
</button>
</div>
</div>
</div>
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Diamond Storage</h3>
<button class="px-3 py-1 text-sm border rounded hover:bg-gray-50" onclick="addDiamondSlot()">Add Slot</button>
</div>
<div class="grid gap-4 grid-cols-4">
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="diamond-1"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('diamond-1')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="diamond-2"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('diamond-2')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="diamond-3"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('diamond-3')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="diamond-4"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('diamond-4')"
>
+
</button>
</div>
</div>
</div>
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Bulk Storage</h3>
<button class="px-3 py-1 text-sm border rounded hover:bg-gray-50" onclick="addBulkSlot()">Add Slot</button>
</div>
<div class="grid gap-4 grid-cols-4">
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="bulk-1"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('bulk-1')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="bulk-2"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('bulk-2')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="bulk-3"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('bulk-3')"
>
+
</button>
</div>
<div
class="storage-spot relative w-24 h-24 border border-gray-300 rounded-lg shadow-sm flex items-center justify-center bg-white hover:bg-gray-50"
data-position="bulk-4"
>
<button
class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
onclick="showWineForm('bulk-4')"
>
+
</button>
</div>
</div>
</div>
</div>
<div class="w-64 bg-white p-6 shadow-sm rounded-lg h-fit space-y-6">
<div>
<h3 class="font-semibold">Categories</h3>
<hr class="w-48 h-1 my-3 bg-gray-100 border-0 rounded dark:bg-gray-700">
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-gray-600">Red</span>
<span class="font-medium">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">White</span>
<span class="font-medium">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">Champagne</span>
<span class="font-medium">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">Sparkling</span>
<span class="font-medium">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">Rosé</span>
<span class="font-medium">0</span>
</div>
</div>
</div>
<div>
<h3 class="font-semibold">Vintages</h3>
<hr class="w-48 h-1 my-3 bg-gray-100 border-0 rounded dark:bg-gray-700">
<div class="space-y-2">
<div class="text-gray-500 text-sm">No vintage wines</div>
</div>
</div>
</div>
</div>
</div>