{% extends "workspace_layout.html" %}
{% block content %}
<div class="w-full max-w-lg mx-auto">
    <div class="p-4 sm:p-6">
        <div class="flex items-center justify-between mb-4 border-b border-base-200 pb-4">
            <h2 class="text-2xl font-bold">Create New Table</h2>
            <button type="button" onclick="up.layer.dismiss()" class="btn btn-sm btn-circle btn-ghost">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
        
        <form up-submit up-target=":main" action="/workspace/meta/tables" method="post" class="space-y-4">
            <div class="form-control w-full">
                <label class="label">
                    <span class="label-text font-medium">Table Name</span>
                </label>
                <input type="text" name="table_name" placeholder="e.g. users" class="input input-bordered w-full" required />
            </div>
            
            <div class="flex gap-4">
                <div class="form-control w-1/2">
                    <label class="label">
                        <span class="label-text font-medium">First Column</span>
                    </label>
                    <input type="text" name="col_name" value="id" class="input input-bordered w-full" required />
                </div>
                <div class="form-control w-1/2">
                    <label class="label">
                        <span class="label-text font-medium">Data Type</span>
                    </label>
                    <select name="col_type" class="select select-bordered w-full">
                        <option value="INTEGER">INTEGER</option>
                        <option value="TEXT">TEXT</option>
                        <option value="BOOLEAN">BOOLEAN</option>
                        <option value="FLOAT">FLOAT</option>
                        <option value="TIMESTAMP">TIMESTAMP</option>
                    </select>
                </div>
            </div>
            
            <div class="flex justify-end gap-2 mt-6">
                <button type="button" class="btn btn-ghost" onclick="up.layer.dismiss()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Table</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}