{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}安生 | 仪表板{% endblock %}
{% block custom_css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
{% endblock %}

{% block content-wrapper %}
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                文章列表
                <small>包含已发布和未发布的文章</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">文章管理</a></li>
                <li class="active">文章列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="articleList" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>文章标题</th>
                                    <th>创建时间</th>
                                    <th>发布时间</th>
                                    <th>阅读数</th>
                                    <th>评论数</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for article in articles %}
                                    <tr id="Article{{ article.id }}">
                                        <td>{{ article.title }}</td>
                                        <td>{{ article.created_time }}</td>
                                        <td>{{ article.release_time }}</td>
                                        <td>{{ article.read }}</td>
                                        <td>{{ article.get_comment_num }}</td>
                                        <td>
                                            {% if article.status == '0' %}
                                                <button type="button" class="btn btn-primary" style="font-size: 12px">发布</button>
                                            {% elif article.status == '1' %}
                                                <button type="button" class="btn btn-info" style="font-size: 12px">存稿</button>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <button onclick="EditArticle({{ article.id }})" type="button" class="btn btn-success" style="font-size: 12px">编辑</button>
                                            <button onclick="DeleteArticle({{ article.id }})" type="button" class="btn btn-danger" style="font-size: 12px">删除</button>
                                            <a href="{% url 'article' article.url %}"><button type="button" class="btn btn-default" style="font-size: 12px">访问</button></a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
{% endblock %}

{% block custom_js %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <!-- page script -->
    <script>
        $(function () {
            $("#articleList").DataTable();
        });
        function DeleteArticle(ID) {
            $.ajax({
                type: "DELETE",
                url: "{% url 'admin:article-add' %}",
                headers: {
                    "X-CSRFToken": '{{ csrf_token }}'
                },
                data: JSON.stringify({
                    id: ID
                }),
                success: function (data) {
                    data = JSON.parse(data);
                    $('#Article' + data.aid).remove();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR, textStatus, errorThrown);
                }
            });
        }
        function EditArticle(ID) {
            location.href = "{% url 'admin:article-edit' %}" + '?aid=' + ID
        }
    </script>
{% endblock %}