{% extends "_common/base.html" %}
{% block css %}
    {% load avatar_tags %}{% load day_util %}
    {% load page_tag %}


    /* class to hide content visually leaving it available to screenreaders.
    See notes in cookbook recipe.
    https://github.com/h5bp/html5-boilerplate/issues/1985#issuecomment-394096182
    https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
    */
    .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    }

    nav {
    display: flex;
    justify-content: right;
    border-top: 1px solid #eee;
    margin-top: 1em;
    padding-top: .5em;
    }
    /* 容器 & 布局保持不变 */
    .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem 0;
    margin: 0;
    list-style: none;
    }

    .pagination li {
    list-style: none;
    }

    /* 普通按钮 */
    .pagination a,
    .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5em;
    height: 2.5em;
    padding: 0 0.5em;
    border: 1px solid #ddd;
    border-radius: 0.4em;
    background-color: #fff;
    color: var(--text);
    font-size: 1rem;
    text-decoration: none;
    transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.1s;
    cursor: pointer;
    }

    /* 悬停态：浅灰背景，深灰文字 */
    .pagination a:hover {
    background-color: #f2f2f2;
    color: #111;
    }

    /* 聚焦态：灰黑色光环 */
    .pagination a:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.3);
    }

    /* 当前页（Active） */
    .pagination li.active a {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    pointer-events: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* 禁用态（上一页/下一页边界） */
    .pagination li.disabled span {
    color: #ccc;
    border-color: #eee;
    background-color: #fafafa;
    cursor: not-allowed;
    }

{% endblock %}
{% block container %}
    <div class="ui grid stackable container">
        <div class="row" id="article">
            <div class="eleven wide column">
                <div class="ui feed">
                    <h2>{{ current_category }}</h2>

                    <nav aria-label="pagination">
                        <ul class="pagination">
                            {# 上一页 #}
                            {% if articles.number > 1 %}
                                <li>
                                    <a href="?page={{ articles.number|add:"-1" }}" aria-label="上一页">
                                        «
                                    </a>
                                </li>
                            {% else %}
                                <li class="disabled">
                                    <span aria-label="上一页">«</span>
                                </li>
                            {% endif %}

                            {# 中间页码 #}
                            {% for page in articles.paginator.page_range %}
                                {% if page == articles.number %}
                                    <li class="active">
                                        <a href="?page={{ page }}" aria-current="page">{{ page }}</a>
                                    </li>
                                {% else %}
                                    <li>
                                        <a href="?page={{ page }}">{{ page }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {# 下一页 #}
                            {% if articles.number < articles.paginator.num_pages %}
                                <li>
                                    <a href="?page={{ articles.number|add:"1" }}" aria-label="下一页">
                                        »
                                    </a>
                                </li>
                            {% else %}
                                <li class="disabled">
                                    <span aria-label="下一页">»</span>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>

                    {% for item in articles %}
                        {% if item.status == 1 %}
                            {% if item.type == 1 %}
                                <div class="event">
                                    <div class="label">
                                        <img src="/user_avatar/{{ item.user_id }}">
                                    </div>
                                    <div class="content">
                                        <div class="date"
                                             style="font-size: 1.1em">{{ item.created_time | days_until }}</div>
                                        <div class="summary"><a>
                                            {{ item.user__first_name }}{{ item.user__last_name }}</a>
                                            发布了{{ item.category__name }}:<a
                                                    href="/article/{{ item.id }}.html">{{ item.title }}</a>
                                            {% if  is_login %}
                                                <a title="置顶" href="/article/show_show_index/{{ item.id }}"><i
                                                        class="icon home"></i></a>
                                            {% endif %}</div>
                                        <div class="extra text">{{ item.intro }}
                                            &nbsp;&nbsp;&nbsp;Tags:
                                            {% for tag in item.tags %}
                                                <a href="/tag/{{ tag }}?page=1"><span
                                                        class="label label-success">{{ tag }}</span></a>
                                            {% endfor %}</div>
                                    </div>
                                </div>
                            {% elif item.type == 2 %}
                                <div class="event">
                                    <div class="label">
                                        <img src="/user_avatar/{{ item.user_id }}">
                                    </div>
                                    <div class="content">
                                        <div class="date"
                                             style="font-size: 1.1em">{{ item.created_time | days_until }}</div>
                                        <div class="summary"><a>
                                            {{ item.user__first_name }}{{ item.user__last_name }}</a>
                                            发布了{{ item.category__name }}:<a
                                                    href="/article/{{ item.id }}.html">{{ item.title }}</a>
                                            {% if  is_login %}
                                                <a title="置顶" href="/article/show_show_index/{{ item.id }}"><i
                                                        class="icon home"></i></a>
                                            {% endif %}</div>
                                        {% autoescape off %}
                                            <div class="extra images">
                                                {{ item.html_text }}
                                            </div>
                                        {% endautoescape %}

                                    </div>

                                </div>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            <div class="four wide right floated column">
                <h4 class="ui header">搜索</h4>
                <div id="search" class="ui category search">
                    <div class="ui icon input">
                        <input class="prompt" type="text" placeholder="搜索">
                        <i class="search icon"></i>
                    </div>
                </div>
                <h4 class="ui header">归档</h4>
                <div class="ui list">
                    {% for record in records %}
                        <a class="item" href="/date/{{ record.datetime }}?page=1">{{ record.datetime }}
                            ({{ record.count }})</a>
                    {% endfor %}

                </div>
                <h4 class="ui header">Top</h4>
                <div class="ui list">
                    {% for tag in tags %}
                        <a class="item" href="/tag/{{ tag.name }}?page=1">{{ tag.name }} ({{ tag.count }})</a>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        function submit() {
            let formData = new FormData()
            formData.append('title', $("input[name='title']").val())
            formData.append('intro', editor.getText())
            formData.append('category', 6)
            formData.append('html', editor.getHtml())
            formData.append('markdown', editor.getText())
            formData.append('type', 2)
            formData.append('tags', '')
            formData.append('status', 1)
            formData.append('is_top', 1)
            formData.append('csrfmiddlewaretoken', $("input[name='csrfmiddlewaretoken']").val())

            $.ajax('/management/article/add_article', {
                method: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    window.location.href = '/'
                },
                error: function (err) {
                }
            })
        }
    </script>
{% endblock %}
{% load static %}