{% load dict_extras %}
{% load humanize %}

<div class="col-lg-3 col-sm-6">
    <div class="product-item">
        <div class="pi-pic">
            <a href="{{ product.get_absolute_url|default:'#' }}">
                <img src="{{ product.image.url }}" alt="{{ product.title }}">
            </a>

            {% if product.condition == 'new' %}
            <div class="tag-condition tag-new">نو</div>
            {% elif product.condition == 'stock' %}
            <div class="tag-condition tag-stock">استوک</div>
            {% endif %}

            <div class="pi-links">
                <a href="{% url 'order:add_to_cart' product.id %}" class="add-card">
                    <i class="flaticon-bag"></i>
                    <span>اضافه کردن به سبد خرید</span>
                </a>

                <a href="javascript:void(0)"
                   data-id="{{ product.id }}"
                   class="favorite-btn site-btn"
                   style="background-color:#666; color: white; padding: 10px; border-radius: 5px; text-decoration: none;">

                    {% if product.id|stringformat:"s" in request.session.favorite_products %}
                    <i class="fa fa-heart" style="color:red;"></i>
                    {% else %}
                    <i class="fa fa-heart-o"></i>
                    {% endif %}

                    <span class="fav-text">علاقه‌مندی</span>
                </a>
            </div>
        </div>

        <div class="pi-text text-center mb-5">
            <h4>{{ product.title }}</h4>

            {% if product.old_price %}
            <del>
          <span class="offer">
            {{ product.old_price|three_digits_currency }} تومان
          </span>
            </del><br>
            {% endif %}

            <h5>{{ product.price|three_digits_currency }} تومان</h5>
        </div>
    </div>
</div>