{% extends "base.html" %}
{% load static %}
{% block title %}
    首页
{% endblock title %}
{% block style %}
    <link rel="stylesheet" type="text/css" href="{% static 'article/list.css' %}">
{% endblock style %}
{% block content %}
    <header class="masthead" id="masthead">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-10 mx-auto">
                    <div class="site-heading no-gutter" data-aos="fade-up" data-aos-delay="100">
                        <h1>Design And Record</h1>
                        <p>
                            <span class="subheading text-slider-items">
                                All things are difficult before they are easy.,
                                No success in life merely happens.,
                                99 little bugs in the code.,
                                One must first understand recursion in order to understand recursion.,
                                Everything will be okay in the end. If it's not okay， it's not the end.,
                                Everybody wants happiness. No one wants pain. But how can you make a rainbow without a little rain?,
                                No matter when you start， it is important that you do not stop after starting. No matter when you end， it is more important that you do not regret after ended.,
                                If you want something you've never had， then you've got to do something you've never Done.,
                                Dear music， thank you for being there when nobody else was.
                            </span><strong
                                class="text-slider"></strong>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="container" id="content">
        <!--<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" id="articles_list">
            {% for article in articles %}
                <div class="row col-10 m-auto">
                    <!--标题图-->
                    {% if article.avatar %}
                        <div class="col-4" 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">
                        {% 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 }}&search={{ search }}&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="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/list.js' %}"></script>
    <script src="{% static 'article/jquery.cookie.js' %}"></script>
{% endblock script %}