<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= blog.name %></title>

    <link rel="apple-touch-icon" sizes="57x57" href="./favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="./favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">

    <link rel="stylesheet" href="font-awesome.min.css">
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header"><%= blog.name %></div>

<div class="main">

    <div class="aside">
        <div class="profile">
            <img class="profile-picture" src="profile.png"/>
            <div class="profile-author">
                <span class="profile-author-name"><%= blog.author %></span>
                <span class="profile-author-email"><%= blog.email %></span>
            </div>
            <button id="menu" class="menu">
                <i id="menu-btn" class="fa fa-bars menu-icon"></i>
            </button>
        </div>

        <div id="menu-target" class="categories">
            <a class="category tag-selector selected" href="#">
                <span class="category-box"></span>
                <span class="category-name">All</span>
                <span class="category-count">(<%= tagAllCount %>)</span>
            </a>
            <%
                for (var idx=0, len=tags.length; idx<len; idx++) {
                    var tagName = tags[idx]['name'];
                    var count = tags[idx]['count'];
                    var color = tagColors[idx];
                    %>
                    <a class="category tag-selector" tag="<%= tagName %>" href="#<%= tagName %>">
                        <span class="category-box" style="background-color: <%= color %>;"></span>
                        <span class="category-name"><%= tagName %></span>
                        <span class="category-count">(<%= count %>)</span>
                    </a>
                <% } %>
        </div>
    </div>

    <div class="content">
        <div id="paper-list" class="paper-list">
            <%
            var index = 0;

            for (var prop in blog.papers) {
                var paper = blog.papers[prop];

                var getColor = function(tagName) {
                    for (var idx=0; idx<tags.length; idx++) {
                        if (tags[idx]['name'] === tagName) return tagColors[idx];
                    }
                };

                var paperTags = (function(_tags) {
                var str = "";
                    for (var idx=0; idx<_tags.length; idx++) {
                        str += _tags[idx];
                        if (idx !== _tags.length - 1) str += " ";
                        }
                        return str;
                    })(paper['tags']);

                var summary = (paper['summary'] !== null) ? paper['summary'] : "";
                var titleImage = (paper['titleImage'] !== null) ? "background-image: url(" + paper['titleImage'] + ");" : "";

            %>

            <div class="paper" tags="<%= paperTags %>">
                <div class="paper-main">
                            <span class="paper-main-header">
                                <a class="paper-main-header-title" href="/<%= paper.paperId %>"><%= paper.title %></a>
                                <span class="paper-main-header-date"><%= dates[index] %></span>
                            </span>
                    <span class="paper-main-summary"><%= summary %></span>
                    <div class="paper-main-categories">
                        <%
                        for (var idx=0; idx<paper['tags'].length; idx++) {
                        var tagColor = getColor(paper['tags'][idx]); %>
                        <a class="paper-main-categories-category tag-selector" href="#<%= paper['tags'][idx] %>" tag="<%= paper['tags'][idx] %>">
                            <span class="paper-main-categories-category-box" style="background-color: <%= tagColor %>;"></span>
                            <span class="paper-main-categories-category-name"><%= paper['tags'][idx] %></span>
                        </a>
                        <% } %>
                    </div>
                </div>
                <div class="paper-side" style="<%= titleImage %>"></div>
            </div>

            <% index++; } %>

        </div>
    </div>


</div>

<div class="footer">
    <div class="contact">
        <%
            if (blog.facebook !== '') { %>
                <a class="contact-item facebook" href="http://facebook.com/<%= blog.facebook %>">
                    <i class="fa fa-facebook-official contact-item-icon"></i>
                </a>
        <% } %>
        <%
            if (blog.twitter !== '') { %>
                <a class="contact-item twitter" href="http://twitter.com/<%= blog.twitter %>">
                    <i class="fa fa-twitter contact-item-icon"></i>
                </a>
        <% } %>
        <%
            if (blog.github !== '') { %>
                <a class="contact-item github" href="http://github.com/<%= blog.github %>">
                    <i class="fa fa-github contact-item-icon"></i>
                </a>
        <% } %>
    </div>
    <div class="copyright">
        <span class="copyright-text">Copyright. 2016 &#169; <%= blog.name %></span>
    </div>
</div>

<script type="text/javascript" src="main.js"></script>
</body>
</html>