{% extends "base.html" %}
{% load static %}
{% block title %}
    首页
{% endblock title %}
{% block content %}
    <div class="container">
        <hr>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ column }}">
                        最新
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&tag={{ tag }}&column={{ column }}">
                        最热
                    </a>
                </li>
            </ol>
        </nav>
        <div class="row">
            <div class="col-auto mr-auto">
                <form class="form-inline">
                    <label class="sr-only">
                        content
                    </label>
                    <input type="text" class="form-control mb-2 mr-sm-2" name="search" placeholder="搜索文章..." required>
                </form>
            </div>
        </div>
        {% if search %}
            {% if articles %}
                <h4>
                    <span style="color: red">"{{ search }}"</span>的搜索结果如下：
                </h4>
                <hr>
            {% else %}
                <h4>
                    暂无
                    <span style="color: red">"{{ search }}"</span>有关的文章。
                </h4>
            {% endif %}
        {% endif %}
        <div class="row mt-2">
            {% for article in articles %}
                <!--标题图-->
                {% if article.avatar %}
                    <div class="col-3">
                        <img src="{{ article.avatar.url }}"
                             alt="avatar"
                             style="max-width: 100%; border-radius: 20px;"
                        >
                    </div>
                {% endif %}
                <div class="col">
                    {% if article.column %}
                        <button type="button"
                                onclick="window.open('{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ article.column.id }}')"
                                class="btn btn-sm mb-2
                                {% if article.column.title == 'Django' %}
                                    btn-success
                                {% elif article.column.title == 'Java' %}
                                    btn-danger
                                {% elif article.column.title == 'HTML' %}
                                    btn-warning
                                {% endif %}
                            "
                        >
                            {{ article.column }}
                        </button>
                    {% endif %}
                    <!--标签-->
                    <span>
                        {% for tag in article.tags.all %}
                            <a href="{% url 'article:article_list' %}?tag={{ tag }}&search={{ search }}&column={{ column }}"
                               class="badge badge-secondary">
                            {{ tag }}
                            </a>
                        {% endfor %}
                    </span>
                    <!--标题-->
                    <h4>
                        <b>
                            <a href="{% url 'article:article_detail' article.id %}" style="color: black;">
                                {{ article.title }}
                            </a>
                        </b>
                    </h4>
                    <!--摘要-->
                    <div>
                        <p style="color: gray;">
                            {{ article.body|slice:'100' }}...
                        </p>
                    </div>
                    <!--注脚-->
                    <p>
                        <!--附加消息-->
                        <span style="color: green;">
                            <i class="fas fa-eye" style="color: lightskyblue;"></i>
                            {{ article.total_views }}浏览&nbsp;&nbsp;&nbsp;
                        </span>
                        <span style="color: blue;">
                            <i class="fas fa-comments" style="color: yellowgreen;"></i>
                            {{ article.created|date:'Y-m-d' }}发布&nbsp;&nbsp;&nbsp;
                        </span>
                        <span style="color: darkred;">
                            <i class="fas fa-clock" style="color: pink;"></i>
                            {{ article.updated|date:'Y-m-d' }}更新
                        </span>
                    </p>
                    <hr>
                </div>
                <hr style="width:100%;"/>
            {% endfor %}

        </div>
        <div class="pagination row">
            <div class="m-auto">
            <span class="step-links">
                <!--如果不是第一页，则显示上翻的按钮-->
                {% if articles.has_previous %}
                    <a href="?page=1&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
                       class="btn btn-success">
                    &laquo;1
                    </a>
                    <span>...</span>
                    <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
                       class="btn btn-secondary">
                    {{ articles.previous_page_number }}
                    </a>
                {% endif %}
                <!--当前页面-->
                <span class="current btn btn-danger btn-lg">
                    {{ articles.number }}
                </span>
                {% if articles.has_next %}
                    <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
                       class="btn btn-secondary">
                    {{ articles.next_page_number }}
                    </a>
                    <span>...</span>
                    <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
                       class="btn btn-success">
                    {{ articles.paginator.num_pages }} &raquo
                    </a>
                {% endif %}
            </span>
            </div>
        </div>
    </div>
{% endblock content %}