{% extends "bottom.html" %}
{% load static %}

{#文章详情#}
{% block sitename %}
    <title>{{ title }}-我的个人博客</title>
{% endblock %}
{% block stylesheethref %}
    <link rel="stylesheet" href="{% static 'archives.css' %}">
    <script src="{% static 'marked.min.js' %}"></script>
{% endblock %}
{% block content %}
<div class="article-detail-container">
    <article class="article-detail">
        <!-- 文章头部信息 -->
        <div class="article-header">
            <h1 class="article-title">{{ title }}</h1>
            <div class="article-meta">
                <span class="author">
                    作者 {{ author }}
                </span>
                <span class="date">
                    发布时间 {{ created|date:"Y-m-d" }}
                </span>
                <span class="category">
                    {{ stat }} 点赞

                </span>
                <span class="views">
                    {{ read }} 浏览
                </span>
            </div>
        </div>

        <div class="article-cover">
            <img src="http://iph.href.lu/200x150?text=封面功能,正在开发中" alt="{{ title }}封面图">
        </div>

        <!-- 文章内容 -->
        <div class="article-content">
            {{ content|safe }}
        </div>
        <div class="dz" style="width: 42px;height: 42px;margin: 0 auto">
            <div class="dz-icon" id="likeBtn" style="background-color: red;width: 42px;height: 42px;border-radius: 50%">
                <div>
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="38" height="38" style="margin: 2px">
                        <path id="link_svg" d="M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z" fill="#fff"></path>
                    </svg>
                </div>
                <p style="text-align: center" id="likeCount">{{ stat }}</p>
            </div>
        </div>
    </article>
    <!-- 文章导航 -->
    <nav class="article-nav">
        {% if previous %}
        <a href="/archives/{{ previous.id }}" class="prev">
            <i class="fas fa-chevron-left"></i>
            上一篇: {{ previous.title }}
        </a>
        {% endif %}
        {% if next %}
        <a href="/archives/{{ next.id }}" class="next">
            下一篇: {{ next.title }}
            <i class="fas fa-chevron-right"></i>
       </a>
        {% endif %}
    </nav>
    <!-- 评论区域 -->
    <section class="comment-section">
        <h3 class="section-title">评论</h3>
        <div class="comment-form">
            <form id="comment-form" action="/api/create_comment/{{ id }}" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <input name="username" class="comment-input" placeholder="昵称">
                    <input name="qqNum" class="comment-input" placeholder="qq号(仅用于头像显示)">
                    <textarea name="comment" rows="5" placeholder="写下你的评论..."></textarea>
                </div>
                <button type="submit" class="submit-btn">提交评论</button>
            </form>
        </div>
        <div class="comment-list">
            {% for comment in comments %}
            <div class="comment-item">
                <div class="comment-avatar">
                    <img src="http://q1.qlogo.cn/g?b=qq&nk={{ comment.qq }}&s=100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-user">{{ comment.comment_User }}</span>
                        <span class="comment-time">{{ comment.comment_Time|timesince }}</span>
                    </div>
                    <p>{{ comment.comment_Content }}</p>
                    {% if comment.replies.all %}
                    <div class="comment-replies">
                        {% for reply in comment.replies.all %}
                        <div class="reply-item">
                            <div class="reply-avatar">
                                <img src="{{ reply.user.profile.avatar.url|default:'https://via.placeholder.com/40' }}" alt="用户头像">
                            </div>
                            <div class="reply-content">
                                <div class="reply-header">
                                    <span class="reply-user">{{ reply.user.username }}</span>
                                    <span class="reply-time">{{ reply.created_at|timesince }}前</span>
                                </div>
                                <p>{{ reply.content }}</p>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <div class="no-comments">暂无评论，快来抢沙发吧~</div>
            {% endfor %}
        </div>
    </section>
</div>
{% endblock %}

{% block script %}
    const no_active_path = "M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z"
    const active_path = "M736 128c-65.952 0-128.576 25.024-176.384 70.464-4.576 4.32-28.672 28.736-47.328 47.68L464.96 199.04C417.12 153.216 354.272 128 288 128 146.848 128 32 242.848 32 384c0 82.432 41.184 144.288 76.48 182.496l316.896 320.128C450.464 911.68 478.304 928 512 928s61.568-16.32 86.752-41.504l316.736-320 2.208-2.464C955.904 516.384 992 471.392 992 384c0-141.152-114.848-256-256-256z"
    const path = document.getElementById('link_svg');

    const fpPromise = import('{% static "FingerprintJS.js" %}').then(FingerprintJS => FingerprintJS.load());
    fpPromise.then(fp => fp.get()).then(result => {localStorage.setItem("uuid",result.visitorId)});

    document.addEventListener('DOMContentLoaded', function() {
        const likeBtn = document.getElementsByClassName('dz')[0];
        if (!likeBtn) return;
        fetch(`/api/check_like/{{ id }}/${localStorage.getItem("uuid")}`,{
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                credentials: 'include'
            }).then(response => response.json()).then(data => {
            if (data.liked) {
                path.setAttribute('d', active_path)
                likeBtn.classList.add('active');
            }
        });
        const dz_icon = document.getElementsByClassName('dz-icon')[0];
        dz_icon.addEventListener('click', function() {
            if (likeBtn.classList.contains('active')) {
                fetch(`/api/unlink/{{ id }}/${localStorage.getItem("uuid")}`,{
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    credentials: 'include'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        likeBtn.classList.remove('active');
                        path.setAttribute('d', no_active_path)
                        document.getElementById('likeCount').textContent = data.new_count;
                    }
                });
            } else {
                fetch(`/api/link/{{ id }}/${localStorage.getItem("uuid")}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    credentials: 'include'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        likeBtn.classList.add('active');
                        path.setAttribute('d', active_path)
                        document.getElementById('likeCount').textContent = data.new_count;
                    }
                });
            }
        })
    });

{% endblock %}