{% assign _check_type = global.url | split: 'related_item_type=' %}

<div class="global-breadcrumb-container">
    <a href="/article"> Bài viết </a>
    <a href="/article/form?id=1"> Form cập nhật Bài viết </a>
    <a href=""> Thêm liên quan </a>
</div>

<div class="max-w-[1141px] m-auto">
    <div class="flex flex-wrap items-start m-[16px_0]">
        <div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
            <p class="font-bold text-[20px] mb-[6px] leading-[26px]"> Thêm liên quan </p>

            <p class="w-[100%] text-[#6B7280] order-[1]">
                Thêm liên quan: HuraSoft - Test tin tức
            </p>
        </div>            

        <div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
            <a href="/article/relation-add?id=1&related_item_type=product" {% if _check_type[1] == 'product' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
                Sản phẩm (2)
            </a>

            <a href="/article/relation-add?id=1&related_item_type=product-category" {% if _check_type[1] == 'product-category' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
                Danh mục sản phẩm (0)
            </a>
        </div>
        
        {% if _check_type[1] == 'product' %}

            {% include 'article/relation_product_add' %}

        {% elsif _check_type[1] == 'product-category' %}

            {% include 'article/relation_product_category_add' %}

        {% endif %}

    </div>
</div>


<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script>
    tinymce.init({
        selector: 'textarea#js-desc',
        height: 350,
        menubar: true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    });
</script>

<script>
    $(function(){
        $("input[name='info[article_time_set]']").click(function(){
            if($(this).val() == 1) $("#js-publish_time").show();
            else $("#js-publish_time").hide();
        }) ;
    });
</script>