<div class="flex items-end">
    <div class="w-2/3 pr-4">
        {% include 'lib/inputs/text.twig' with { 
            name: 'title', 
            label: 'Title', 
            placeholder: 'Enter product title',
            value: product.title,
            required: true
        } %}
    </div>
    <div class="w-1/3 mb-3">
        {% include 'lib/inputs/toggle.twig' with { 
            name: 'is_enabled', 
            label: 'Enable Product?', 
            on: product.is_enabled
        } %}
    </div>
</div>
{% include 'lib/inputs/text.twig' with { 
    name: 'description', 
    label: 'Description', 
    placeholder: 'Enter product description',
    value: product.description,
    required: true
} %}
{% include 'lib/inputs/select.twig' with { 
    name: 'category_id', 
    label: 'Category', 
    options: categories,
    value: product.category_id,
    no_option: { 'label': '-- None --', 'value': null},
    required: true
} %}
{% include 'lib/inputs/number.twig' with { 
    name: 'stock_qty', 
    label: 'Stock Quantity', 
    placeholder: 'Enter stock quantity',
    value: product.stock_qty,
    required: true
} %}
{% include 'lib/inputs/toggle.twig' with { 
    name: 'is_umlimited', 
    label: 'Unlimited Quantity?', 
    on: product.is_umlimited
} %}
{% include 'lib/inputs/text.twig' with { 
    name: 'image_url_0', 
    label: 'Primary Photo URL', 
    placeholder: 'Enter image URL 0 - (required)',
    value: attribute(product, 'image_url_0'),
    required: true
} %}

<h3 class="text-xl font-semibold mt-4 mb-2">
    Pricing
</h3>
{% include 'lib/inputs/toggle.twig' with { 
    name: 'is_quote_only', 
    label: 'Buyer Must Ask for Quote?', 
    on: product.is_quote_only
} %}

<div class="grid grid-cols-2 gap-4">
    <div class="col-span-1">
        <h4 class="font-semibold mb-2">
            Sats Pricing
        </h4>
        {% include 'lib/inputs/toggle.twig' with { 
            name: 'is_accepting_sats', 
            label: 'Accept Sats?', 
            on: product.is_accepting_sats
        } %}
        {% include 'lib/inputs/number.twig' with { 
            name: 'price_sats', 
            label: 'Price (Sats)',
            desc: 'Leave empty to auto-convert from cents price.',
            placeholder: 'Price sats',
            value: product.price_sats,
        } %}
        {% include 'lib/inputs/number.twig' with { 
            name: 'sats_back_percent', 
            label: 'Sats Back Percent',
            desc: 'Promotional reward when paid with sats', 
            placeholder: 'Sats Back %',
            value: product.sats_back_percent,
        } %}
        {% include 'lib/inputs/toggle.twig' with { 
            name: 'is_sats_back_only', 
            label: 'Only give sats back?', 
            on: product.is_sats_back_only
        } %}
    </div>
    <div class="col-span-1">
        <h4 class="font-semibold mb-2">
            Cents Pricing
        </h4>
        {% include 'lib/inputs/toggle.twig' with { 
            name: 'is_accepting_cents', 
            label: 'Accept Cents?', 
            on: product.is_accepting_cents
        } %}
        {% include 'lib/inputs/number.twig' with { 
            name: 'price_cents', 
            label: 'Price (Cents)', 
            desc: 'Leave empty to auto-convert from sats price.',
            placeholder: 'Price cents',
            value: product.price_cents,
        } %}
        {% include 'lib/inputs/number.twig' with { 
            name: 'cents_back_percent', 
            label: 'Cents Back %', 
            desc: 'Promotional reward when paid with cents',
            placeholder: 'Cents Back %',
            value: product.cents_back_percent,
        } %}
        {% include 'lib/inputs/toggle.twig' with { 
            name: 'is_cents_back_only', 
            label: 'Only give cents back?', 
            on: product.is_cents_back_only
        } %}
    </div>
</div>
<h3 class="text-xl font-semibold mt-4 mb-2">
    Subscription
</h3>
<div class="grid grid-cols-1 gap-4">
    {% include 'lib/inputs/toggle.twig' with { 
        name: 'is_subscription', 
        label: 'Enable Subscriptions?', 
        on: product.is_subscription
    } %}
    {% include 'lib/inputs/toggle.twig' with { 
        name: 'is_subscription_only', 
        label: 'Subscription Only?',
        on: product.is_subscription_only
    } %}
    {% include 'lib/inputs/select.twig' with { 
        name: 'subscription_frequency', 
        label: 'Subscription Frequency',
        options: [
            { 'label': 'Per Minute', 'value': 'minute' },
            { 'label': 'Hourly', 'value': 'hour' },
            { 'label': 'Daily', 'value': 'day' },
            { 'label': 'Weekly', 'value': 'week' },
            { 'label': 'Monthly', 'value': 'month' },
            { 'label': 'Yearly', 'value': 'year' }
        ],
        value: product.subscription_frequency,
        no_option: { 'label': '-- Select Frequency --', 'value': null }
    } %}
</div>
<h3 class="text-xl font-semibold mt-4 mb-2">
    Shipping
</h3>
<p>
    Non-digital products require shipping information.
</p>
{% include 'lib/inputs/toggle.twig' with { 
    name: 'is_digital', 
    label: 'Digital Product?', 
    on: product.is_digital
} %}
<div class="grid grid-cols-2 gap-4">
    <div class="col-span-1">
        {% include 'lib/inputs/number.twig' with { 
            name: 'lbs', 
            label: 'Weight (lbs)', 
            placeholder: 'Enter pounds',
            value: product.lbs,
        } %}
    </div>
    <div class="col-span-1">
        {% include 'lib/inputs/number.twig' with { 
            name: 'oz', 
            label: 'Weight (oz)', 
            placeholder: 'Enter ounces',
            value: product.oz,
        } %}
    </div>
</div>
<div class="grid grid-cols-3 gap-4">
    <div class="col-span-1">
        {% include 'lib/inputs/number.twig' with { 
            name: 'length', 
            label: 'Length', 
            placeholder: 'Enter length',
            value: product.length,
        } %}
    </div>
    <div class="col-span-1">
        {% include 'lib/inputs/number.twig' with { 
            name: 'width', 
            label: 'Width', 
            placeholder: 'Enter width',
            value: product.width,
        } %}
    </div>
    <div class="col-span-1">
        {% include 'lib/inputs/number.twig' with { 
            name: 'height', 
            label: 'Height', 
            placeholder: 'Enter height',
            value: product.height,
        } %}
    </div>
</div>
<h3 class="text-xl font-semibold mt-4 mb-2">
    Additional Product Photos
</h3>
{% for i in 1..11 %}
    {% include 'lib/inputs/text.twig' with { 
        name: 'image_url_' ~ i, 
        placeholder: 'Enter image URL ' ~ i,
        value: attribute(product, 'image_url_' ~ i),
    } %}
{% endfor %}
<h3 class="text-xl font-semibold mt-4 mb-2">
    Product Specifications
    <span class="text-sm font-normal">
        - (optional)
    </span>
</h3>
<p>
    Provide any relevant specifications such as brand, material, model, year, color, and more.
</p>
<div class="grid grid-cols-3 gap-4">
    {% for i in 0..11 %}
        <div class="col-span-1">
            {% include 'lib/inputs/text.twig' with { 
                name: 'spec_key_' ~ i, 
                placeholder: 'Spec ' ~ i,
                value: attribute(product, 'spec_key_' ~ i),
            } %}
        </div>
        <div class="col-span-2">
            {% include 'lib/inputs/text.twig' with { 
                name: 'spec_val_' ~ i, 
                placeholder: 'Value ' ~ i,
                value: attribute(product, 'spec_val_' ~ i),
            } %}
        </div>
    {% endfor %}
</div>
