<style>
    /* 文章分类书本样式 */
    .chip-container .tag-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .chip-container .tag-chips a {
        margin: 0 7px 10px;
    }

    .chip-container .chip {
        max-width: calc(100% / 4);
        min-width: 10em;
        height: 200px;
        position: relative;
        transition: .5s linear;
        padding: 19px 0;
        line-height: 20px;
        z-index: 990;
        border-radius: 5px 15px 15px 5px;
        transform-origin: left center 0;
    }

    .chip-container .notebook-cover::before {
        content: "";
        position: absolute;
        width: 10px;
        height: calc(100% + 2px);
        top: -1px;
        z-index: 100;
        border-radius: 2px;
        right: 25px;
        transition: 2s ease;
        background: linear-gradient(to right, #1e606e 0, #2e95aa 12%, #1e606e 25%, #2e95aa 37%, #1e606e 50%, #2e95aa 62%, #1e606e 75%, #2e95aa 87%, #1e606e 100%);
    }

    .chip .notebook-skin {
        height: 50px;
        width: 100%;
        background: #e8e8e0;
        margin-top: 42px;
        padding: 10px 32px 64px 10px;
        font-size: 19px;
        position: relative;
        z-index: 10;
        color: #222;
        text-align: left;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    }

    .chip .notebook-skin:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 15px;
        left: 0;
        bottom: 0;
        background: #cddc39;
    }

    .notebook-cover {
        background: #cc4b48;
        height: 200px;
        width: 140px;
        position: absolute;
        border-radius: 5px 15px 15px 5px;
        z-index: 10;
        transition: .5s linear;
        transform-style: preserve-3d;
        transform-origin: left center 0;
    }

    .moleskine-wrapper {
        max-width: calc(100% / 4);
        min-width: 10em;
    }

    .moleskine-notebook:hover .notebook-cover {
        transform: rotateY(-50deg);
        z-index: 99;
        box-shadow: 20px 10px 50px rgba(0, 0, 0, .2);
    }

    .moleskine-notebook {
        height: 200px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        transition: .5s linear;
        border-radius: 5px 15px 15px 5px;
        transform-origin: left center 0;
    }

    .moleskine-notebook:hover {
        transform: rotateZ(-10deg);
    }

    .notebook-page.dotted {
        background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
        background-size: 100% 10px;
    }

    .chip-container .chip:hover {
        filter: invert(.1);
    }

    .notebook-page {
        height: 100%;
        width: 140px;
        position: absolute;
        top: 10px;
        background-color: #fbfae8;
        z-index: 0;
        border-radius: 5px 16px 16px 5px;
        overflow: hidden;
    }
</style>

<%
var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
    '#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
var colorCount = colorArr.length;
var hashCode = function (str) {
    if (!str && str.length === 0) {
        return 0;
    }

    var hash = 0;
    for (var i = 0, len = str.length; i < len; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return hash;
};
var i = 0;
var isCategory = is_category();
%>

<div id="category-cloud" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fas fa-bookmark"></i>&nbsp;&nbsp;<%= __('postCategoryTitle') %>
            </div>
            <div class="tag-chips">
                <% if (site.categories && site.categories.length > 0) { %>
                <% site.categories.map(function(category) { %>
                <%
                    i++;
                    var color = i >= colorCount
                            ? colorArr[Math.abs(hashCode(category.name) % colorCount)]
                            : colorArr[i - 1];
                %>
                <a href="<%- url_for(category.path) %>" title="<%- category.name %>: <%- category.length %>">
                    <!--<span class="chip center-align waves-effect waves-light
                            <% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
                            style="background-color: <%- color %>;"><%- category.name %>
                        <span class="tag-length"><%- category.length %></span>
                    </span>-->

                    <div class="moleskine-wrapper">
                        <div class="moleskine-notebook">
                            <div class="chip notebook-cover center-align waves-effect waves-light
                              <% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
                                style="background-color: <%- color %>;">
                                <div
                                    class="notebook-skin
                                      <% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>">
                                    <%- category.name %>
                                </div>
                            </div>
                            <div class="notebook-page dotted"></div>
                        </div>
                    </div>
                </a>

                <% }); %>
                <% } else { %>
                <%= __('categoryEmptyTip') %>
                <% } %>
            </div>
        </div>
    </div>
</div>
