admin_hura_8/template/article/relation.html

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

<div class="global-breadcrumb-container">
    <a href="/admin/article"> Bài viết </a>
    <a href=""> Form cập nhật Bài viết </a>
</div>

<div class="max-w-[1141px] m-[0_auto_20px]">
    <div class="flex flex-wrap items-start justify-center">

        <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-[20px] flex flex-wrap items-center justify-between">
            <p class="font-bold text-[20px]"> Sửa nội dung </p>

            <p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ
                CHUYỆN NHỎ </p>

            <div class="flex items-center">
                <a href="/admin/article/form"
                    class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
                    <span
                        class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
                    <span>Thêm nội dung mới</span>
                </a>

                <a href=""
                    class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
                    <span class="far fa-folder mr-2"></span>
                    <span>Quản lý danh mục</span>
                </a>

                <a href="/admin/article" title="Danh sách nội dung"
                    class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
            </div>
        </div>

        <!-- col left -->
        <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="/admin/article/form?id=1"
                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
            </a>

            <a href="/admin/article/tag?id=1"
                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>

            <a href="/admin/article/relation?id=1&related_item_type=product"
                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
                _check_type[1]=='product' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan: Sản phẩm
            </a>

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

        <!-- col right -->
        <div
            class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
            {% if _check_type[1] == 'product'%}

            {% include 'article/relation_product' %}

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

            {% include 'article/relation_product_category' %}

            {% endif %}
        </div>
    </div>
</div>


<!-- Popup chọn tag -->
<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
    <p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>

    <form method="get" enctype="multipart/form-data" action="/admin/"
        class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
        <input type="text" name="q" id="keyword" value="" placeholder="Tìm link truy cập"
            class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
        <input type="submit" value="Tìm kiếm"
            class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] mr-[12px] cursor-pointer rounded-[4px]">
        <p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
    </form>

    <div class="order-page-table max-h-[400px] overflow-auto">
        <table class="table">
            <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-700">
                <tr>
                    <td width="40">STT</td>
                    <td>Thương hiệu</td>
                    <td width="80"> Lựa chọn </td>
                </tr>
            </thead>

            <tbody>

                <tr align="center">
                    <td class="text-center"> 1 </td>
                    <td align="left"> Laptop AMD Ryzen 3 </td>
                    <td>
                        <a href=""
                            class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
                            Chọn
                        </a>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <div class="paging">
        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
        <a href="" class="current">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
    </div>

</div>