{% extends 'ecom/template.html' %}
{% load crispy_forms_tags %}

{% block content %}
    <div class = "row center">
        <legend class = "border-bottom mb-4">
            Products
        </legend>
        {% for product in products %}
        <div class = "col-sm-3 prod-box">
            <img class = "prod-img" src = "{{ product.image.url }}">
            <div class = "product-data">
                {{ product.name }}
                &emsp;
                $ {{ product.cost }}
            </div>
            <form method = "post">
                {% csrf_token %}
                {{ cart_form | crispy }}
                <input type = "hidden" name = "product_id" value = "{{ product.id }}">
                <button class = "btn btn-outline-success">
                    Add to Cart
                </button>
            </form>
        </div>
        {% endfor %}
    </div>
    <div class = "center">
        {% if products.has_previous %}
            <a class = "btn btn-outline-info" href="?page=1">&laquo; First</a>
            <a class = "btn btn-outline-info" href="?page={{ products.previous_page_number }}">Previous</a>
        {% endif %}
        {% if products.has_next %}
            <a class = "btn btn-outline-info" href="?page={{ products.next_page_number }}">Next</a>
            <a class = "btn btn-outline-info" href="?page={{ products.paginator.num_pages }}">Last &raquo;</a>
        {% endif %}
    </div>
{% endblock %}