{% extends "base.html" %}
{% load static %}
{% block title %}
    文章
{% endblock title %}
{% block style %}
    <link rel="stylesheet" type="text/css" href="{% static 'article/list.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'article/articles.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'L_header.css' %}">
{% endblock style %}
{% block content %}
    <div class="container content-top" id="content">
        <hr>
        <div class="row article-top">
            <div class="mt-2 col-10" id="articles_list">
                {% if search %}
                    {% if articles %}
                        <h4>
                            <span style="color: #0085a1">"{{ search }}"</span>的搜索结果如下：
                        </h4>
                        <hr>
                    {% else %}
                        <h4>
                            暂无
                            <span style="color: #0085a1">"{{ search }}"</span>有关的文章。
                        </h4>
                    {% endif %}
                {% endif %}
                {% for article in articles %}
                    <div class="row col-12">
                        <!--标题图-->
                        {% if article.avatar %}
                            <div class="col-5" data-aos="fade-up" data-aos-delay="100">
                                <img src="{{ article.avatar.url }}"
                                     alt="avatar"
                                     style="max-width: 100%; border-radius: 20px;"
                                >
                            </div>
                        {% endif %}
                        <div class="col-7">
                            {% 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 column_button"
                                        data-aos="fade-up" data-aos-delay="120">
                                    {{ article.column }}
                                </button>
                            {% endif %}
                            <!--标签-->
                            <span>
                        {% for tag in article.tags.all %}
                            <a href="{% url 'article:article_list' %}?tag={{ tag }}&column={{ column }}"
                               class="badge badge-secondary" data-aos="fade-up" data-aos-delay="120">
                            {{ tag }}
                            </a>
                        {% endfor %}
                    </span>
                            <!--标题-->
                            <h4 data-aos="fade-up" data-aos-delay="140">
                                <b>
                                    <a id="post-preview" href="{% url 'article:article_detail' article.id %}">
                                        {{ article.title }}
                                    </a>
                                </b>
                            </h4>
                            <!--摘要-->
                            <div data-aos="fade-up" data-aos-delay="160">
                                <p style="color: gray;">
                                    {{ article.summary|slice:'50' }}...
                                </p>
                            </div>
                            <!--注脚-->
                            <p style="color: #868e96;font-style: italic;font-family: 'Lora', 'Times New Roman', serif;"
                               data-aos="fade-up" data-aos-delay="180">
                                <!--附加消息-->
                                <span>
                            <i class="fas fa-eye"></i>
                            {{ article.total_views }} viewd&nbsp;&nbsp;&nbsp;
                        </span>
                                <span>
                            <i class="fas fa-comments"></i>
                            Posted at {{ article.created|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
                        </span>
                                <span>
                            <i class="fas fa-clock"></i>
                            Update at {{ article.updated|date:'Y-m-d' }}
                        </span>
                            </p>
                            <hr data-aos="fade-up" data-aos-delay="180">
                        </div>
                        <hr style="width:100%;" data-aos="fade-up" data-aos-delay="180"/>
                    </div>
                {% endfor %}
            </div>
            <div class="col-2 sidebar" id="sidebar">
                <div class="sidebar__inner">
                    <div class="mt-2 col-2">
                        <div class="m-auto middle">
                            <a href="{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ column }}">
                                Latest
                            </a>
                            <div id="line"></div>
                            <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&tag={{ tag }}&column={{ column }}">
                                Hottest
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </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 %}
{% block script %}
    <script src="{% static 'typed/typed.js' %}"></script>
    <script src="{% static 'article/jquery.cookie.js' %}"></script>
    <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
    <script>
        let tag="{{ tag }}";
        let search="{{ search }}";
        let order="{{ order }}";
        let column="{{ column }}";
    </script>
    <script src="{% static 'article/articles.js' %}"></script>
{% endblock script %}