{% include 'AdminTemplates/adminDash.html' %} {% load static %}
{% block body %}
<style>
    .tag-button {
        background-color: #007BFF;
        /* Set your desired background color */
        color: #fff;
        /* Set text color */
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
        font-size: 14px;
        /* Add more styles as needed */
    }

    .clickable-row {
        cursor: pointer;
    }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Products Category list</h4>
                <h6>Filtered by Category</h6>
            </div>
            <div class="page-btn">
                <a href="{% url 'addProduct' %}" class="btn btn-added">
                    <img src="{% static 'assets/img/icons/plus.svg' %}" class="me-1" alt="img">Add New Product
                </a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <a class="btn btn-searchset"><img src="{% static 'assets/img/icons/search-white.svg' %}"
                                    alt="img"></a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Category name</th>
                                <th>Description</th>
                                <th>Parent Category</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in categoryList %}
                            <tr onclick="window.location.href='{% url 'productList' i.id %}';" class="clickable-row">
                                <td class="productimgname">
                                    <a href="#" class="product-img">
                                        <img src="{{ i.category_image.url }}" alt="product">
                                    </a>
                                    <span>{{ i.category_name }}</span>
                                </td>
                                <td>{{ i.description }}</td>
                                <td>
                                    {% if i.parent_category %}
                                    {{ i.parent_category.category_name }}
                                    {% else %}
                                    N/A
                                    {% endif %}
                                </td>
                            </tr>


                            {% endfor %}
                        </tbody>

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

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

{% endblock body %}