{% extends "base.html" %}
{% load static %}
{% block title %}
    文章详情:{{ article.title }}
{% endblock title %}
{% block style %}
    <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'article/detail.css' %}">
{% endblock style %}
{% block content %}
    <header class="masthead" id="masthead" style="background-image: url({{ article.avatar.url }}) !important;">
        <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>{{ article.title }}</h1>
                        <p>
                            <span class="subheading text-slider-items">
                                {{ article.summary }}
                            </span><strong
                                class="text-slider"></strong>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="container" id="content">
        <div class="row">
            <div class="col-8">
                <h1 class="mt-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                    {{ article.title }}
                </h1>
                <div class="col-12 alert alert-success" data-aos="fade-up" data-aos-delay="120">
                    作者: {{ article.author }}
                    {% if user == article.author %}
                        · <a href="#" onclick="confirm_delete()">
                        删除文章
                    </a>
                        · <a href="{% url 'article:article_update' article.id %}">
                        编辑文章
                    </a>
                    {% endif %}
                    &nbsp;&nbsp;浏览:{{ article.total_views }}
                    <form style="display: none"
                          id="safe_delete"
                          action="{% url 'article:article_safe_delete' article.id %}"
                          method="post"
                    >
                        {% csrf_token %}
                        <button type="submit">
                            发送
                        </button>
                    </form>
                </div>
                <div class="col-12" data-aos="fade-up" data-aos-delay="160">
                    <p class="markdown_body">
                        {{ article.body|safe }}
                    </p>
                </div>
                <hr data-aos="fade-up" data-aos-delay="160">
{#                {% if user.is_authenticated %}#}
{#                    <div data-aos="fade-up" data-aos-delay="140">#}
{#                        <form action="{% url 'comment:post_comment' article.id %}" method="post">#}
{#                            {% csrf_token %}#}
{#                            <div class="form-group">#}
{#                                <label for="body">#}
{#                                    <strong>#}
{#                                        发表评论#}
{#                                    </strong>#}
{#                                </label>#}
{#                                <!--<textarea type="text" class="form-control" id="body" name="body" rows="2"></textarea>-->#}
{#                                <div>#}
{#                                    {{ comment_form.media }}#}
{#                                    {{ comment_form.body }}#}
{#                                </div>#}
{#                            </div>#}
{#                            <button type="submit" class="btn btn-primary">发送</button>#}
{#                        </form>#}
{#                    </div>#}
{#                    <br>#}
{#                {% else %}#}
{#                    <br>#}
{#                    <h5 class="row justify-content-center" data-aos="fade-up" data-aos-delay="140">#}
{#                        请<a href="{% url 'userprofile:login' %}">登录</a>后回复#}
{#                    </h5>#}
{#                    <br>#}
{#                {% endif %}#}
{#                {% load mptt_tags %}#}
{#                <h4 data-aos="fade-up" data-aos-delay="160">共有{{ comments.count }}条评论</h4>#}
{#                <div class="row" data-aos="fade-up" data-aos-delay="180">#}
{#                    <!-- 遍历树形结构 -->#}
{#                    {% recursetree comments %}#}
{#                        <!-- 给 node 取个别名 comment -->#}
{#                        {% with comment=node %}#}
{#                            <div class="{% if comment.reply_to %}#}
{#                                            offset-1 col-11#}
{#                                        {% else %}#}
{#                                            col-12#}
{#                                        {% endif %}">#}
{#                                <hr>#}
{#                                <p>#}
{#                                    <strong style="color: pink">#}
{#                                        {{ comment.user }}#}
{#                                    </strong>#}
{#                                    {% if comment.reply_to %}#}
{#                                        <i class="far fa-arrow-alt-circle-right"#}
{#                                           style="color: cornflowerblue;"#}
{#                                        ></i>#}
{#                                        <strong style="color: pink">#}
{#                                            {{ comment.reply_to }}#}
{#                                        </strong>#}
{#                                    {% endif %}#}
{#                                </p>#}
{#                                <div>{{ comment.body|safe }}</div>#}
{#                                <div>#}
{#                                    <span style="color: gray">#}
{#                                        {{ comment.created|date:"Y-m-d H:i" }}#}
{#                                    </span>#}
{#                                    <!-- 加载 modal 的按钮 -->#}
{#                                    {% if user.is_authenticated %}#}
{#                                        <button type="button"#}
{#                                                class="btn btn-light btn-sm text-muted"#}
{#                                                onclick="load_modal({{ article.id }}, {{ comment.id }})">#}
{#                                            回复#}
{#                                        </button>#}
{#                                    {% else %}#}
{#                                        <a class="btn btn-light btn-sm text-muted"#}
{#                                           href="{% url 'userprofile:login' %}">#}
{#                                            回复#}
{#                                        </a>#}
{#                                    {% endif %}#}
{#                                </div>#}
{#                                <!-- Modal -->#}
{#                                <div class="modal fade"#}
{#                                     id="comment_{{ comment.id }}"#}
{#                                     tabindex="-1"#}
{#                                     role="dialog"#}
{#                                     aria-labelledby="CommentModalCenter"#}
{#                                     aria-hidden="true">#}
{#                                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">#}
{#                                        <div class="modal-content" style="height: 480px">#}
{#                                            <div class="modal-header">#}
{#                                                <h5 class="modal-title" id="exampleModalCenterTitle">#}
{#                                                    回复 {{ comment.user }}：</h5>#}
{#                                            </div>#}
{#                                            <div class="modal-body" id="modal_body_{{ comment.id }}"></div>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                </div>#}
{#                                {% if not comment.is_leaf_node %}#}
{#                                    <div class="children">#}
{#                                        {{ children }}#}
{#                                    </div>#}
{#                                {% endif %}#}
{#                            </div>#}
{#                        {% endwith %}#}
{#                    {% endrecursetree %}#}
{#                </div>#}
            </div>
            {% if toc_flag %}
                <div class="col-4 mt-5 sidebar" id="sidebar">
                    <div class="sidebar__inner">
                        <h4 data-aos="fade-up" data-aos-delay="100"><strong>目录</strong></h4>
                        <hr>
                        <div data-aos="fade-up" data-aos-delay="140" id="post-preview">
                            {{ toc|safe }}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock content %}
{% block script %}
    <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
    <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
    <script src="{% static 'typed/typed.js' %}"></script>
    <script src="{% static 'article/detail.js' %}"></script>
{% endblock script %}