{% 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 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    }

    .pagination li {
    margin: 0 1px;
    }

    .pagination a {
    display: block;
    padding: .5em 1em;
    border: 1px solid #999;
    border-radius: .2em;
    text-decoration: none;
    }

    .pagination a[aria-current="page"] {
    background-color: #333;
    color: #fff;
    }

{% 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 }}"><span aria-hidden="true">«</span><span
                                        class="visuallyhidden">previous set of pages</span></a>
                                </li>
                            {% else %}
                                <li><a href=""><span aria-hidden="true">«</span><span class="visuallyhidden">previous set of pages</span></a>
                                </li>
                            {% endif %}

                            {% for page in articles.paginator.page_range %}
                                {% circle_page_index articles.number page %}
                            {% endfor %}
                            {% if articles.number <  articles.paginator.num_pages %}
                                <li><a href="?page={{ articles.number | add:1 }}"><span class="visuallyhidden">next set of pages</span><span
                                        aria-hidden="true">»</span></a></li>
                            {% else %}
                                <li><a href=""><span class="visuallyhidden">next set of pages</span><span
                                        aria-hidden="true">»</span></a></li>
                            {% endif %}

                        </ul>
                    </nav>
                    {% for item in articles %}
                        {% 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 }}:&nbsp;<a href="/article/{{ item.id }}.html">{{ item.title }}</a></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 }}:&nbsp;<a href="/article/{{ item.id }}.html">{{ item.title }}</a></div>
                                    {% autoescape off %}
                                        <div class="extra images">
                                            {{ item.html_text }}
                                        </div>
                                    {% endautoescape %}

                                </div>

                            </div>
                        {% endif %}
                    {% endfor %}


                </div>
            </div>
            <div class="four wide right floated column">
                <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 %}