admin_hura_8/template/product/form.html

<div class="w-[100%] mb-[50px]">

    <div class="text-sm breadcrumbs ml-[10px]">
        <ul>
            <li><a href="/admin/product">Danh sách sản phẩm</a></li>
            <li class="text-[#0041E8]">Form thêm/sửa sản phẩm</li>
        </ul>
    </div>
    <div class="w-[1141px] m-auto">

        <div class="bg-white p-[10px] rounded-[10px] shadow-[0_1px_1px_0px_#0000001A] mb-[15px]">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-[20px] font-[700]">Cập nhật #{{ page.product_info.id }}</h1>
                </div>
                <div class="flex items-center ">
                    <a href="/admin/customer/customer-add"
                        class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px]">
                        <span
                            class="w-[14px] h-[14px] border-[1px] rounded-[50%] border-[#6B7280] text-center leading-[11px] mr-[5px] text-[#6B7280]">+</span>
                        <span class="text-[#6B7280]">Thêm sp mới</span>
                    </a>
                    <a href="javascript:void(0)"
                        class="flex items-center border-[1px] border-[#ECECEC] rounded-[4px] p-[5px_10px_5px_10px] ml-[10px]">
                        <div class="icons icon-copy"></div>
                        <span class="text-[#6B7280] ml-[5px]">Tạo sp tương tự</span>
                    </a>
                </div>
            </div>
            <span class="text-[#6B7280]">{{ page.product_info.title }}</span>
        </div>



        <div class="flex">
            <div class="left w-[273px] mr-[15px]">
                <div class="bg-white rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-hidden">

                    {% for _menu in page.product_menu %}
                    <a role="tab" href="/admin/product/form?id={{ page.product_info.id }}&part={{ _menu.id }}"
                        title="{{ _menu.name }}"
                        class="py-[7px] px-[15px] block border-b-[1px] border-[#fafafb]  {% if _menu.is_current == 1 %}bg-[#0041E8] text-[#fff]{% else %}text-[#919699]{% endif %}">
                        {{ _menu.name }}
                    </a>
                    {% endfor %}

                </div>
            </div>
            <div class="right w-[852px]">

                {% if page.view_part == "store" %}
                {% include 'product/form_components/store' %}

                {% elsif page.view_part == "category" %}
                {% include 'product/form_components/category' %}

                {% elsif page.view_part == "seo" %}
                {% include 'product/form_components/seo' %}

                {% elsif page.view_part == "description" %}
                {% include 'product/form_components/description' %}

                {% elsif page.view_part == "spec-group" %}
                {% include 'product/form_components/spec_group' %}

                {% elsif page.view_part == "instruction" %}
                {% include 'product/form_components/instruction' %}

                {% elsif page.view_part == "image" %}
                {% include 'product/form_components/image' %}

                {% elsif page.view_part == "variant" %}
                {% include 'product/form_components/variant' %}

                {% elsif page.view_part == "accessory" %}
                {% include 'product/form_components/accessory' %}

                {% elsif page.view_part == "addon" %}
                {% include 'product/form_components/addon' %}

                {% elsif page.view_part == "video" %}
                {% include 'product/form_components/video' %}

                {% elsif page.view_part == "tag" %}
                {% include 'product/form_components/tag' %}

                {% elsif page.view_part == "relation" %}
                {% include 'product/form_components/relation' %}

                {% elsif page.view_part == "customer-group" %}
                {% include 'product/form_components/customer_group' %}

                {% elsif page.view_part == "component" %}
                {% include 'product/form_components/component' %}

                {% elsif page.view_part == "configurable" %}
                {% include 'product/form_components/configurable' %}

                {% elsif page.view_part == "compatible" %}
                {% include 'product/form_components/compatible' %}

                {% elsif page.view_part == "similar" %}
                {% include 'product/form_components/similar' %}

                {% elsif page.view_part == "combo-set" %}
                {% include 'product/form_components/combo_set' %}

                {% else %}
                <!--//default-->
                {% include 'product/form_components/basic' %}
                {% endif %}

            </div>
        </div>
    </div>
</div>


<input type="checkbox" checked="checked"
    class="checkbox border-orange-400 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange] checked:border-indigo-800" />
<input type="checkbox" checked="checked" class="checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />