{% extends 'base.html' %}  {# 将当前页面继承至base.html模板 #}
{% block content %}
<div class="col-sm-9 col-12" style="padding: 0 10px;" id="left">
    <!-- 轮播图组件应用，除了修改图片路径外，其它内容可不修改 -->
    <div id="carouselExampleIndicators" class="col-12 carousel slide"
         data-ride="carousel" style="padding: 0px">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0"
                class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/resource/img/banner-1.jpg" class="d-block w-100" alt="Banner广告一">
            </div>
            <div class="carousel-item">
                <img src="/resource/img/banner-2.jpg" class="d-block w-100" alt="Banner广告二">
            </div>
            <div class="carousel-item">
                <img src="/resource/img/banner-3.jpg" class="d-block w-100" alt="Banner广告三">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators"
           role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators"
           role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    {% for article, nickname in result %}
    <div class="col-12 row article-list">
        <div class="col-sm-3 col-3 thumb d-none d-sm-block">
            <img src="/thumb/{{article.thumbnail}}" width="226" height="136"/>
<!--            <img src="/resource/img/thumb.png" class="img-fluid"/>-->
        </div>
        <div class="col-sm-9 col-xs-12 detail">
            <div class="title"><a href="/article/{{article.articleid}}">{{article.headline}}</a></div>
            <div class="info">作者：{{nickname}}&nbsp;&nbsp;&nbsp;类别：{{article_type[article.category | string]}}&nbsp;&nbsp;&nbsp;
                日期：{{article.createtime}}&nbsp;&nbsp;&nbsp;阅读：{{article.readcount}} 次&nbsp;&nbsp;&nbsp;消耗积分：{{article.credit}} 分
            </div>
            <div class="intro">
                {{article.content | striptags | truncate(80)}}
            </div>
        </div>
    </div>
    {% endfor %}

    <div class="col-12 paginate">
        {% if page == 1 %}
            <a href="/page/1">上一页</a>&nbsp;&nbsp;
        {% else %}
            <a href="/page/{{page-1}}">上一页</a>&nbsp;&nbsp;
        {% endif %}

        {% for i in range(total) %}
            <a href="/page/{{i+1}}">{{i+1}}</a>&nbsp;&nbsp;
        {% endfor %}

        {% if page ==  total %}
            <a href="/page/{{total}}">下一页</a>
        {% else %}
            <a href="/page/{{page+1}}">下一页</a>
        {% endif %}
    </div>

</div>

{# 按需引入side.html，首页需要 #}
{% include 'side.html' %}

{% endblock %}