{% extends 'base.html.twig' %}
{% import '_sidebar_tables.html.twig' as macros %}

{% block title %}Create Table · Jormun Admin{% endblock %}

{% block breadcrumbs %}
    <a href="{{ path('dashboard') }}"><i class="bi bi-house-fill"></i> Home</a>
    <span class="sep">/</span>
    <span class="current">Create Table</span>
{% endblock %}

{% block sidebar_tables %}
    {{ macros.sidebar_table_links(tables, null) }}
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-lg-7 col-xl-6">
        <div class="content-card">
            <div class="content-card-header">
                <h6><i class="bi bi-plus-square me-1" style="color:var(--jormun-teal);"></i> Create New Table</h6>
            </div>
            <div style="padding:1.25rem;">
                {% if error %}
                <div style="background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;padding:0.65rem 0.85rem;margin-bottom:1rem;font-size:0.78rem;">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>{{ error }}
                </div>
                {% endif %}

                <form method="POST" x-data="{ hasSk: false }">
                    {# Table name #}
                    <div class="mb-3">
                        <label class="form-label" style="font-size:0.72rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:#374151;">Table Name</label>
                        <input type="text" name="table_name" class="jormun-input" placeholder="my-table" required
                               pattern="[a-zA-Z0-9_.-]+" title="Letters, numbers, underscores, dots, hyphens">
                        <div style="font-size:0.68rem;color:#94a3b8;margin-top:0.25rem;">Letters, numbers, hyphens, underscores, dots. 3–255 chars.</div>
                    </div>

                    <hr style="border-color:#f1f5f9;margin:1rem 0;">

                    {# Partition key #}
                    <div style="font-family:'Syne',sans-serif;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#374151;margin-bottom:0.75rem;">
                        <i class="bi bi-key" style="color:var(--jormun-teal);"></i> Partition Key
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-8">
                            <input type="text" name="pk_name" class="jormun-input" placeholder="id" required>
                        </div>
                        <div class="col-4">
                            <select name="pk_type" class="jormun-select w-100">
                                <option value="S">String (S)</option>
                                <option value="N">Number (N)</option>
                                <option value="B">Binary (B)</option>
                            </select>
                        </div>
                    </div>

                    <hr style="border-color:#f1f5f9;margin:1rem 0;">

                    {# Sort key toggle #}
                    <div class="mb-3">
                        <label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer;font-size:0.78rem;">
                            <input type="checkbox" x-model="hasSk" style="accent-color:var(--jormun-teal);">
                            Add Sort Key
                        </label>
                    </div>

                    <div x-show="hasSk" x-transition>
                        <div style="font-family:'Syne',sans-serif;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#374151;margin-bottom:0.75rem;">
                            <i class="bi bi-sort-down" style="color:var(--jormun-teal);"></i> Sort Key
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-8">
                                <input type="text" name="sk_name" class="jormun-input" placeholder="createdAt" :required="hasSk">
                            </div>
                            <div class="col-4">
                                <select name="sk_type" class="jormun-select w-100">
                                    <option value="S">String (S)</option>
                                    <option value="N">Number (N)</option>
                                    <option value="B">Binary (B)</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <hr style="border-color:#f1f5f9;margin:1rem 0;">

                    <div style="background:var(--jormun-teal-xlight);border:1px solid var(--jormun-teal-light);border-radius:6px;padding:0.6rem 0.85rem;margin-bottom:1.25rem;font-size:0.75rem;color:#374151;">
                        <i class="bi bi-lightning-charge" style="color:var(--jormun-teal);"></i>
                        Table will be created with <strong>PAY_PER_REQUEST</strong> billing mode.
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn-jormun">
                            <i class="bi bi-plus-lg"></i> Create Table
                        </button>
                        <a href="{{ path('dashboard') }}" class="btn-jormun-outline">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}