{% extends "base.html" %}
{% block title %}
    商品首页
{% endblock %}
{% block headerjs %}
    <style>
        .page {
            color: red;
            font-size: 20px;
        }
    </style>
{% endblock %}
{% block main %}
     <div class="classes">
        <ul class="classes-items">
            {% for category in category_list %}
                <li class="items {% if category.id == currentCid %}active{% endif %}"><a href="{% url 'goods_app:category_index' category.id %}">{{ category.cname }}</a></li>
            {% endfor %}
        </ul>
    </div>

<div class="goods-model">
        <div class="goods-content">

            {% for goods in goods_list %}

                    <div class="good">
                        <a href="{% url 'goods_app:detail' goods.id %}">
                            <img src="{{ goods.get_img_url }}" width="285px" height="285px">
                            <p class="name">{{ goods.gname }}</p>
                            <div class="price">
                                <i>￥</i>
                                <p class="big">{{ goods.price }}</p>
                                <s>￥{{ goods.oldprice }}</s>
                            </div>
                            <div class="sale">
                                特卖
                            </div>
                        </a>
                    </div>

            {% endfor %}


        </div>
    </div>
<div id="pager" style="text-align: center; font-size: 16px; overflow: hidden; margin-top: 10px;">

        {% if goods_list.has_previous %}
            <a href="{% url 'goods_app:category' currentCid goods_list.previous_page_number %}" style="display: inline-block; padding: 5px; margin: 5px;">上一页</a>
        {% endif %}
        {% for page in page_list %}
            <a href="{% url 'goods_app:category' currentCid page %}" {% if page == goods_list.number %}class="page" {% endif %} style="display: inline-block; padding: 5px; margin: 5px;">{{ page }}</a>
        {% endfor %}

        {% if goods_list.has_next %}
            <a href="{% url 'goods_app:category' currentCid goods_list.next_page_number %}" style="display: inline-block; padding: 5px; margin: 5px;">下一页</a>
        {% endif %}

</div>



{% endblock %}

{% block footerjs %}

     <script>
        $('#pager').css({'text-align':'center','font-size':'16px','overflow':'hidden','margin-top':'10px'})
        $('#pager a').css({'display':'inline-block','padding':'5px','margin':'5px'})

    </script>
{% endblock %}
