{% load blog_tags %}
{% load cache %}
{% load i18n %}
<article id="post-{{ article.pk }} "
         class="post-{{ article.pk }} post type-post status-publish format-standard hentry">
    <header class="entry-header">

        <h1 class="entry-title">
            {% if  isindex %}
                {% if article.article_order > 0 %}
                    <a href="{{ article.get_absolute_url }}"
                       rel="bookmark">【{% trans 'pin to top' %}】{{ article.title }}</a>
                {% else %}
                    <a href="{{ article.get_absolute_url }}"
                       rel="bookmark">{{ article.title }}</a>
                {% endif %}

            {% else %}
                {{ article.title }}
            {% endif %}
        </h1>
        <div class="comments-link">
            {% if article.comment_status == "o" and open_site_comment %}
                <a href="{{ article.get_absolute_url }}#comments" class="ds-thread-count" data-thread-key="3815"
                   rel="nofollow">
                    <span class="leave-reply">
                    {% if article.comment_set and article.comment_set.count %}
                        {{ article.comment_set.count }} {% trans 'comments' %}
                    {% else %}
                        {% trans 'comment' %}
                    {% endif %}
                    </span>
                </a>
            {% endif %}
            <div style="float:right">
                {{ article.views }} views
            </div>
        </div><!-- .comments-link -->
        <br/>
        {% if article.type == 'a' %}
            {% if not isindex %}
                {% cache 36000 breadcrumb article.pk %}
                    {% load_breadcrumb article %}
                {% endcache %}
            {% endif %}
        {% endif %}
    </header><!-- .entry-header -->

    <div class="entry-content" itemprop="articleBody">
        {% if  isindex %}
            {% render_article_content article True %}
            <p class='read-more'><a
                    href=' {{ article.get_absolute_url }}'>Read more</a></p>
        {% else %}

            {% if article.show_toc %}
                {% get_markdown_toc article.body as toc %}
                <b>{% trans 'toc' %}:</b>
                {{ toc|safe }}

                <hr class="break_line"/>
            {% endif %}
            <div class="article">

                {% render_article_content article False %}

            </div>
        {% endif %}

    </div><!-- .entry-content -->

    <!-- 点赞和收藏按钮 - 仅在文章详情页显示 -->
    {% if not isindex %}
    <div class="article-actions" style="margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; display: flex; gap: 15px; align-items: center;">
        <!-- 点赞按钮 -->
        <button type="button" class="like-btn {% if is_liked %}liked{% endif %}"
                data-article-id="{{ article.pk }}"
                style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid #ddd; border-radius: 20px; background: {% if is_liked %}#ff6b6b{% else %}white{% endif %}; color: {% if is_liked %}white{% else %}#333{% endif %}; cursor: pointer; font-size: 14px; transition: all 0.3s;">
            <span class="like-icon">{% if is_liked %}❤️{% else %}🤍{% endif %}</span>
            <span class="like-text">{% if is_liked %}已点赞{% else %}点赞{% endif %}</span>
            <span class="like-count">({{ like_count }})</span>
        </button>

        <!-- 收藏按钮 -->
        <button type="button" class="favorite-btn {% if is_favorited %}favorited{% endif %}"
                data-article-id="{{ article.pk }}"
                style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid #ddd; border-radius: 20px; background: {% if is_favorited %}#ffc107{% else %}white{% endif %}; color: {% if is_favorited %}white{% else %}#333{% endif %}; cursor: pointer; font-size: 14px; transition: all 0.3s;">
            <span class="favorite-icon">{% if is_favorited %}⭐{% else %}☆{% endif %}</span>
            <span class="favorite-text">{% if is_favorited %}已收藏{% else %}收藏{% endif %}</span>
            <span class="favorite-count">({{ favorite_count }})</span>
        </button>
    </div>

    <script>
    (function() {
        // 获取CSRF Token
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // 点赞功能
        const likeBtn = document.querySelector('.like-btn');
        if (likeBtn) {
            likeBtn.addEventListener('click', async function() {
                const articleId = this.dataset.articleId;
                const isLiked = this.classList.contains('liked');
                const url = isLiked ? '{% url "blog:unlike_article" %}' : '{% url "blog:like_article" %}';

                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': getCookie('csrftoken')
                        },
                        body: JSON.stringify({ article_id: articleId })
                    });

                    const data = await response.json();

                    if (response.status === 401 || response.status === 403 || response.status === 302) {
                        window.location.href = '{% url "account:login" %}?next=' + window.location.pathname;
                        return;
                    }

                    if (data.success) {
                        // 更新按钮状态
                        if (data.is_liked) {
                            this.classList.add('liked');
                            this.style.background = '#ff6b6b';
                            this.style.color = 'white';
                            this.querySelector('.like-icon').textContent = '❤️';
                            this.querySelector('.like-text').textContent = '已点赞';
                        } else {
                            this.classList.remove('liked');
                            this.style.background = 'white';
                            this.style.color = '#333';
                            this.querySelector('.like-icon').textContent = '🤍';
                            this.querySelector('.like-text').textContent = '点赞';
                        }
                        this.querySelector('.like-count').textContent = '(' + data.like_count + ')';
                    } else {
                        alert(data.message || '操作失败');
                    }
                } catch (error) {
                    console.error('点赞请求失败:', error);
                    alert('网络错误，请重试');
                }
            });
        }

        // 收藏功能
        const favoriteBtn = document.querySelector('.favorite-btn');
        if (favoriteBtn) {
            favoriteBtn.addEventListener('click', async function() {
                const articleId = this.dataset.articleId;
                const isFavorited = this.classList.contains('favorited');
                const url = isFavorited ? '{% url "blog:unfavorite_article" %}' : '{% url "blog:favorite_article" %}';

                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': getCookie('csrftoken')
                        },
                        body: JSON.stringify({ article_id: articleId })
                    });

                    const data = await response.json();

                    if (response.status === 401 || response.status === 403 || response.status === 302) {
                        window.location.href = '{% url "account:login" %}?next=' + window.location.pathname;
                        return;
                    }

                    if (data.success) {
                        // 更新按钮状态
                        if (data.is_favorited) {
                            this.classList.add('favorited');
                            this.style.background = '#ffc107';
                            this.style.color = 'white';
                            this.querySelector('.favorite-icon').textContent = '⭐';
                            this.querySelector('.favorite-text').textContent = '已收藏';
                        } else {
                            this.classList.remove('favorited');
                            this.style.background = 'white';
                            this.style.color = '#333';
                            this.querySelector('.favorite-icon').textContent = '☆';
                            this.querySelector('.favorite-text').textContent = '收藏';
                        }
                        this.querySelector('.favorite-count').textContent = '(' + data.favorite_count + ')';
                    } else {
                        alert(data.message || '操作失败');
                    }
                } catch (error) {
                    console.error('收藏请求失败:', error);
                    alert('网络错误，请重试');
                }
            });
        }
    })();
    </script>
    {% endif %}

    {% load_article_metas article user %}

</article><!-- #post -->

<!-- 文章底部插件 -->
{% if not isindex %}
    {% render_plugin_widgets 'article_bottom' article=article %}
{% endif %}