<table>
    <thead>
        <tr>
            <th>Sorting</th>
            <th colspan="2">Product</th>
            <th>Visible in listings</th>
        </tr>
    </thead>
    <tbody class="sortable" data-model="product" data-filter="category" data-fid="{{ category.pk }}">
        {% for product in product_list  %}
        <tr class="is-link" data-id="{{ product.pk }}" onclick="window.location='{% url 'dashboard:product-detail' product.pk %}'">
            <td class="handle">&#9776;</td>
            <td>
                <figure class="product-figure">
                    <img class="product-image" src="{{ product.get_first_img.image.url }}" alt="{{ product.get_first_img.image }}">
                </figure>
            </td>
            <td>
                <h4>{{ product.name }}</h4>
            </td>
            <td>
                <div class="status-display">
                    {% if product.visible_in_listings %}
                    <span class="status-dot status-success"></span> Visible in listings
                    {% else %}
                    <span class="status-dot status-info"></span> Not visible in listings
                    {% endif %}
                </div>
            </td>
            <td>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
