orion/app/templates/admin/vendor-product-edit.html

{# app/templates/admin/vendor-product-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/headers.html' import detail_page_header %}

{% block title %}Edit Vendor Product{% endblock %}

{% block alpine_data %}adminVendorProductEdit(){% endblock %}

{% block content %}
{% call detail_page_header("'Edit: ' + (product?.title || 'Product')", '/admin/vendor-products', subtitle_show='product') %}
    <span x-text="product?.vendor_name || 'Unknown Vendor'"></span>
{% endcall %}

{{ loading_state('Loading product...') }}

{{ error_state('Error loading product') }}

<!-- Edit Form -->
<div x-show="!loading && product">
    <form @submit.prevent="saveProduct()">
        <!-- Basic Information -->
        <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Basic Information
            </h3>
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Title</label>
                    <input
                        type="text"
                        x-model="form.title"
                        class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="Product title"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label>
                    <input
                        type="text"
                        x-model="form.brand"
                        class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="Brand name"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Vendor SKU</label>
                    <input
                        type="text"
                        x-model="form.vendor_sku"
                        class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="SKU"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN/EAN</label>
                    <input
                        type="text"
                        x-model="form.gtin"
                        class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="GTIN/EAN"
                    />
                </div>
            </div>
        </div>

        <!-- Pricing -->
        <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Pricing
            </h3>
            <div class="grid gap-4 md:grid-cols-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price Override</label>
                    <input
                        type="number"
                        step="0.01"
                        x-model="form.price_override"
                        class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="Leave empty to use source price"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label>
                    <select
                        x-model="form.currency_override"
                        class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                    >
                        <option value="">Use source currency</option>
                        <option value="EUR">EUR</option>
                        <option value="USD">USD</option>
                        <option value="GBP">GBP</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Availability</label>
                    <select
                        x-model="form.availability"
                        class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                    >
                        <option value="">Not specified</option>
                        <option value="in_stock">In Stock</option>
                        <option value="out_of_stock">Out of Stock</option>
                        <option value="preorder">Preorder</option>
                        <option value="backorder">Backorder</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Status -->
        <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Status
            </h3>
            <div class="flex flex-wrap gap-6">
                <label class="flex items-center">
                    <input
                        type="checkbox"
                        x-model="form.is_active"
                        class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                    />
                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</span>
                </label>
                <label class="flex items-center">
                    <input
                        type="checkbox"
                        x-model="form.is_featured"
                        class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                    />
                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span>
                </label>
                <label class="flex items-center">
                    <input
                        type="checkbox"
                        x-model="form.is_digital"
                        class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                    />
                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
                </label>
            </div>
        </div>

        <!-- Description -->
        <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Description
            </h3>
            <textarea
                x-model="form.description"
                rows="6"
                class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                placeholder="Product description (HTML supported)"
            ></textarea>
        </div>

        <!-- Actions -->
        <div class="flex items-center justify-between px-4 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <a
                :href="'/admin/vendor-products/' + productId"
                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
            >
                Cancel
            </a>
            <button
                type="submit"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
            >
                <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/vendor-product-edit.js') }}"></script>
{% endblock %}