{{ $artalkCss := resources.Get "css/libs/Artalk.css" | resources.Minify | resources.Fingerprint }}
<link id="artalk-css" rel="stylesheet" href="{{ $artalkCss.RelPermalink }}">
<style>
    .atk-loading{
        background: #FFFFFF;
    }
    .atk-loading-editor-box {
        margin-bottom: 30px;
        border: 1px solid var(--frame-color);
        border-radius: 4px;
        padding: 10px;
        background: #fff;
    }
    [data-theme="dark"] .atk-loading-editor-box {
        border-color: var(--frame-dark-color);
        background: transparent;
    }
    /*对artalk评论暗夜模式进行微调*/
    @media (prefers-color-scheme: dark) {
        .atk-pinned-badge {
            color: #ffffff !important;
            background: #ff6262 !important;
        }
    }
    [data-theme="dark"] .atk-pinned-badge {
        color: #ffffff !important;
        background: #ff6262 !important;
    }
    .atk-link-badge,
    .atk-feed-badge,
    .atk-rank-badge {
        display: inline-block;
        margin-left: 4px;
        padding: 0 6px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 3px;
        line-height: 18px;
        vertical-align: middle;
        pointer-events: none;
        white-space: nowrap;
    }
    .atk-link-badge {
        color: #059669;
        background: rgba(5,150,105,0.08);
        border: 1px solid rgba(5,150,105,0.15);
    }
    .atk-feed-badge {
        color: #d97706;
        background: rgba(217,119,6,0.08);
        border: 1px solid rgba(217,119,6,0.15);
    }
    .atk-rank-badge {
        color: #6b7280;
        background: rgba(107,114,128,0.08);
        border: 1px solid rgba(107,114,128,0.15);
        font-weight: 600;
    }
    [data-theme="dark"] .atk-link-badge {
        color: #34d399;
        background: rgba(52,211,153,0.12);
        border-color: rgba(52,211,153,0.2);
    }
    [data-theme="dark"] .atk-feed-badge {
        color: #fbbf24;
        background: rgba(251,191,36,0.12);
        border-color: rgba(251,191,36,0.2);
    }
    [data-theme="dark"] .atk-rank-badge {
        color: rgb(148,163,184);
        background: rgba(148,163,184,0.1);
        border-color: rgba(148,163,184,0.18);
    }

    /* 覆盖 Artalk 原版 .atk-badge（博主）/ .atk-pinned-badge（置顶）尺寸 */
    .atk-comment>.atk-main>.atk-header .atk-badge {
        font-size: 12px;
        padding: 0 6px;
        font-weight: 500;
        line-height: 18px;
        border-radius: 3px;
        vertical-align: middle;
        color: #fff !important;
        background: #1a1a1a !important;
    }
    .atk-comment>.atk-main>.atk-header .atk-pinned-badge {
        font-size: 12px;
        padding: 0 6px;
        font-weight: 500;
        line-height: 18px;
        border-radius: 3px;
        vertical-align: middle;
    }
</style>
<!-- Artalk -->
<div id="Comments" uk-scrollspy="target: > *; cls: uk-animation-slide-bottom-small; delay: 100">
    <!-- Loading Skeleton -->
    <div class="atk-loading-placeholder">
        <!-- Editor Skeleton -->
        <div class="atk-loading-editor-box">
            <div style="display: flex; gap: 10px; margin-bottom: 10px;">
                <div class="atk-loading-line" style="width: 32%; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
                <div class="atk-loading-line" style="width: 32%; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
                <div class="atk-loading-line" style="width: 32%; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
            </div>
            <div class="atk-loading-line" style="width: 100%; height: 120px; border-radius: 4px; margin-bottom: 10px;"></div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div class="atk-loading-line" style="width: 120px; height: 20px; margin-bottom: 0;"></div>
                <div class="atk-loading-line" style="width: 80px; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
            </div>
        </div>

        <!-- Comment List Skeleton -->
        <div class="atk-loading-item">
            <div class="atk-loading-avatar"></div>
            <div class="atk-loading-content">
                <div class="atk-loading-line width-name"></div>
                <div class="atk-loading-line width-80"></div>
                <div class="atk-loading-line width-60"></div>
            </div>
        </div>
        <div class="atk-loading-item">
            <div class="atk-loading-avatar"></div>
            <div class="atk-loading-content">
                <div class="atk-loading-line width-name"></div>
                <div class="atk-loading-line width-60"></div>
            </div>
        </div>
    </div>
</div>
<!-- JS -->
<!-- <script src="/js/Artalk.js"></script> -->
<script>
    // Configuration for Artalk and AI Comment
    window.artalkConfig = {
        el: '#Comments',
        server: '{{ .Site.Params.artalk.server }}',
        site: '{{ .Site.Params.artalk.site }}',
        pageKey: '{{ .RelPermalink }}',
        emoticons: '{{ .Site.Params.artalk.emoticons | absURL }}',
        aiComment: null
    };

    // Execute Initialization immediately if function exists (PJAX re-execution),
    // otherwise wait for DOMContentLoaded (Initial load)
    (function() {
        if (typeof window.initArtalk === 'function') {
            window.initArtalk();
        } else {
            document.addEventListener("DOMContentLoaded", function() {
                if (typeof window.initArtalk === 'function') {
                    window.initArtalk();
                }
            });
        }
    })();
</script>