<div class="article">
    <div>
        <h1><%= titlecase(page.title) %> </h1>
    </div>
    <div class="info">
        <span class="date">
            <span class="icon">
                <i class="fa-solid fa-calendar fa-fw"></i>
            </span>
            <%= date(page.date, "YYYY/M/D") %>
        </span>
        <% if (page.categories && page.categories.data.length != 0) { %>
        <span class="category">
            <a href="<%- url_for(page.categories.data[0].path) %>">
                <span class="icon">
                    <i class="fa-solid fa-bookmark fa-fw"></i>
                </span>
                <%= page.categories.data[0].name %>
            </a>
        </span>
        <% } %>
        <% if (page.tags && page.tags.data.length != 0) { %>
        <span class="tags">
            <span class="icon">
                <i class="fa-solid fa-tags fa-fw"></i>
            </span>
            <% page.tags.data.forEach(data => { %>
            <span class="tag">
                <%
                    const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
                    let num = Math.floor(Math.random() * color.length);
                %>
                <a href="<%- url_for(data.path) %>" style="<%- color[num] %>">
                    <%= data.name %>
                </a>
            </span>
            <% }); %>
        </span>
        <% } %>
    </div>
    <% if (theme.crypto.enable && typeof page.password !== "undefined") { %>
    <%
        const CryptoJS = crypto();
        function sha(str) {
            return CryptoJS.SHA256(str).toString(CryptoJS.enc.Base64);
        }
        function encrypt(str, key) {
            return CryptoJS.AES.encrypt(str, sha(key), {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7,
            }).toString();
        }
    %>
    <input id="crypto" class="input" placeholder="文章被加密，请输入密码" data-encrypt="<%- encrypt(page.content, page.password.toString()) %>" data-check="<%- sha(page.content) %>">
    <div class="content" style="opacity: 0" v-pre></div>
    <% } else { %>
    <div class="content" v-pre>
        <%- page.content %>
    </div>
    <% } %>
    <% if (theme.gitalk.enable) { %>
    <div id="comment">
        <div id="gitalk-container"></div>
    </div>
    <% } %>
    <% if (theme.giscus.enable) { %>
    <div id="comment">
        <div id="giscus-container" class="giscus"></div>
    </div>
    <% } %>
    <% if (theme.waline.enable) { %>
    <div id="comment">
        <div id="waline-container"></div>
    </div>
    <% } %>
    <% if (theme.twikoo.enable) { %>
    <div id="comment">
        <div id="twikoo-container"></div>
    </div>
    <% } %>
</div>
