{% extends 'layout/default.html' %}
{% load i18n %}
{% load querystring %}
{% block title %}{% translate "List Trade Product" %}{% endblock %}

{% block breadcumbheading %} {% translate "Manage Trade Products" %} {% endblock  %}
{% block breadcumbfirst %}
    <a href="/product/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Trade Products </a>
{% endblock  %}

{% block breadcumbaddmore %}
    <li class="breadcrumb-item">
    	<span class="bullet bg-gray-400 w-5px h-2px"></span>
    </li>
    <li class="breadcrumb-item text-muted" style="text-transform: capitalize;">List</li>
{% endblock  %} 

{% block content %}
<div class="custom mt-3">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10 cust-row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush h-md-100 cust-card">
        	    <div class="card-header pt-7">
        		    <h3 class="card-title align-items-start flex-column">
        			    <span class="card-label fw-bold text-gray-800">Trade Product List</span>
        		    </h3>
                    {% if messages %}
                        {% for message in messages %}
                          <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert">
                            {{ message }}
                            </div>  
                        {% endfor %}
                    {% endif %}
            	</div>
        	    <div class="card-body pt-6">
	    	    <div class="table-responsive cust-table mt-2 prod-table">
	    	    {% if products %} 
			    <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
			    	    <thead>
			    		    <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
			    		        <th class="pb-3 min-w-100px fw-bold text-start">NAME</th>
			    		    	<th class="pb-3 min-w-175px fw-bold text-start">SKU</th>
			    		    	<th class="pb-3 min-w-100px fw-bold text-start">TYPE</th>
			    		    	<th class="pb-3 min-w-100px fw-bold text-start">CATEGORY</th>
			    		    	<th class="pb-3 min-w-175px fw-bold text-start pe-12">STATUS</th>
			    		    	<th class="pb-3 w-50px fw-bold text-start">ACTIONS</th>
			    		    </tr>
			    	    </thead>
			    	    <tbody>
			    	         {% for product in products %} 
			    		       <tr>
                                    <td class="text-start pe-12">
			    			        	<span class="text-black-600  fw-bold fs-6 prod-name">{{ product.product_name }}</span>
			    			        </td>
			    			        <td>
			    				        <div class="align-items-center">
			    				    	    <div class="justify-content-start flex-column">
			    					    	    <a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6 prod-sku">{{ product.sku }}</a>
			    				    	    </div>
			    			        	</div>
			    			        </td>
			    			        <td class="text-start pe-0">
			    			        	<span class="text-black-600  fw-bold fs-6 prod-type">{{ product.get_product_type_display }}</span>
			    			        </td>
			    			        <td class="text-start pe-0">
			    				        <span class="text-black-600  fw-bold fs-6 prod-cat">{{ product.category }}</span>
			    			        </td>
                                    <td class="text-start pe-12">
                                        {% if product.get_status == 'Active' %}
                                            <span class="badge py-3 px-4 fs-7 badge-light-primary product-state active">{{ product.get_status }}</span>
                                            {% else %}
                                            <span class="adge py-3 px-4 fs-7 badge-light-primary product-state inactive">{{ product.get_status }}</span>
                                        {% endif %}
                                    </td>
			    			        <td class="text-end">
                                        <div class="menu-item px-3">
                                            <a href="{%url 'product:edit_product' product.id %}" class="menu-link px-3">Convert To Actual Product</a>
                                        </div>
                                    </td>
			    		        </tr>
			    		        
			    		        
			    		        {% endfor %}
			    	        </tbody>
	    		        </table>
	    		           {% else %}
	    		         No Record Found.
	    		        {% endif %}
	    	        </div>
	            </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}