<div class="breadcrumbs tw-zab tw-zpa tw-iia">
    <ul>
        <li><a href="/admin/product" data-discover="true">Danh sách sản phẩm</a></li>
        <li class="">Form thêm/sửa sản phẩm</li>
    </ul>
</div>

<div class="container m-auto  mt-5">

    <div class="bg-white p-3 rounded-sm shadow">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-bold">Cập nhật #{{ page.product_info.id }}</h1>
            </div>
            <div class="flex items-center gap-3">
                <a href="/admin/product/product-add" class="btn btn-md btn-outline btn-view">
                    <i class="iconify lucide--circle-plus"></i>
                    <span class="">Thêm sp mới</span>
                </a>
                <a href="javascript:void(0)" class="btn btn-md btn-outline btn-view">
                    <div class="iconify lucide--copy"></div>
                    <span class="text-[#6B7280] ml-[5px]">Tạo sp tương tự</span>
                </a>
            </div>
        </div>
        <span class="text-primary">{{ page.product_info.title }}</span>
    </div>

    <div class="grid grid-cols-4 gap-5 mt-5">
        <div class="left">
            <div class="bg-white rounded-md shadow overflow-hidden menu-form">

                {% 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="btn w-full justify-start rounded-none  text-black  {% if _menu.is_current == 1 %}btn-active text-white bg-primary {% else %} bg-white {% endif %}">
                    {{ _menu.name }}
                </a>
                {% endfor %}

            </div>
        </div>
        <div class="col-span-3">

            {% 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>