<%
// get all top posts.
var topPosts = [];
if (theme.recommend.useConfig) {
    topPosts = site.data.recommends;
} else {
    site.posts.forEach(function (post) {
        if (post.top) {
            topPosts.push(post);
        }
    });
}
var topPostsCount = topPosts.length;
%>

<% if (topPostsCount > 0) { %>
    <%
        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 featureImages = theme.featureImages;
        var imgCount = featureImages.length;
        var bgColorArr = [
            'linear-gradient(to right, #FF5E3A 0%, #FF2A68 100%)',
            'linear-gradient(to right, #EF4DB6 0%, #C643FC 100%)',
            'linear-gradient(to right, #1AD6FD 0%, #1D62F0 100%)',
            'linear-gradient(to right, #FFCC00 0%, #FF9500 100%)',
            'linear-gradient(to right, #4cbf30 0%, #0f9d58 100%)',
            'linear-gradient(to right, #C644FC 0%, #5856D6 100%)',
            'linear-gradient(to right, #55EFCB 0%, #5BCAFF 100%)'];
        var colorCount = bgColorArr.length;
    %>

    <% if (theme.recommend.showTitle) { %>
        <div class="title"><i class="far fa-thumbs-up"></i>&nbsp;&nbsp;<%- __('recommendedPosts') %></div>
    <% } %>
    <div class="row">
        <% if (topPostsCount % 2 === 0) { %>
            <% for (var i = 0; i < topPostsCount; i++) { %>
                <%
                    var post = topPosts[i];
                    var featureImg = post.img ? post.img : featureImages[Math.abs(hashCode(post.title) % imgCount)];
                    var bgColor = bgColorArr[i % colorCount];
                %>
                <div class="col s12 m6" <% if (i > 1) { %>data-aos="zoom-in-up"
                        <% } %>
                >
                    <div class="post-card" style="background-image: url('<%- featureImg %>')">
                        <div class="post-body">
                            <div class="post-categories">
                                <% if (theme.recommend.useConfig) { %>
                                    <a href="<%- post.categoryPath %>" class="category"><%- post.categoryName %></a>
                                <% } else { %>
                                    <% post.categories.forEach(category => { %>
                                        <a href="<%- url_for(category.path) %>"
                                           class="category"><%- category.name %></a>
                                    <% }); %>
                                <% } %>
                            </div>
                            <a href="<%- url_for(post.path) %>">
                                <h3 class="post-title"><%- post.title %></h3>
                            </a>
                            <p class="post-description">
                                <% if (post.summary && post.summary.length > 0) { %>
                                    <%- post.summary %>
                                <% } else { %>
                                    <%- strip_html(post.content).substring(0, 70) %>
                                <% } %>
                            </p>
                            <a href="<%- url_for(post.path) %>" class="read-more btn waves-effect waves-light"
                               style="background: <%- bgColor %>" target="_blank">
                                <i class="icon far fa-eye fa-fw"></i><%- __('readMore') %>
                            </a>
                        </div>
                    </div>
                </div>
            <% } %>
        <% } else { %>
            <% for (var i = 0; i < topPostsCount; i++) { %>
                <%
                    var post = topPosts[i];
                    var grid = (i % 3 === 0) ? 's12' : 's12 m6';
                    var description = (i % 3 === 0) ? strip_html(post.content).substring(0, 85)
                            : strip_html(post.content).substring(0, 70);
                    if (post.summary && post.summary.length > 0) {
                        description = post.summary;
                    }
                    var featureImg = post.img ? post.img : featureImages[Math.abs(hashCode(post.title) % imgCount)];
                    var bgColor = bgColorArr[i % colorCount];
                %>
                <div class="col <%- grid %>" <% if (i > 0) { %>data-aos="zoom-in-up"
                        <% } %>
                >
                    <div class="post-card" style="background-image: url('<%- featureImg %>')">
                        <div class="post-body">
                            <div class="post-categories">
                                <% if (theme.recommend.useConfig) { %>
                                    <a href="<%- post.categoryPath %>" class="category"><%- post.categoryName %></a>
                                <% } else { %>
                                    <% post.categories.forEach(category => { %>
                                        <a href="<%- url_for(category.path) %>"
                                           class="category"><%- category.name %></a>
                                    <% }); %>
                                <% } %>
                            </div>
                            <a href="<%- url_for(post.path) %>">
                                <h3 class="post-title"><%- post.title %></h3>
                            </a>
                            <p class="post-description"><%- description %></p>
                            <a href="<%- url_for(post.path) %>" class="read-more btn waves-effect waves-light"
                               style="background: <%- bgColor %>" target="_blank">
                                <i class="icon far fa-eye fa-fw"></i><%- __('readMore') %>
                            </a>
                        </div>
                    </div>
                </div>
            <% } %>
        <% } %>
    </div>
<% } %>
