<%
var permaLink = '';
permaLink += window.location.origin + '/';
permaLink += window.location.pathname + '/';
permaLink += 'data/posts/' + post.name;
permaLink = permaLink.replace(/([^:])\/+/g, '$1/');
if (forceHttpInPermalinks > 0) {
    permaLink = permaLink.replace('https', 'http');
}
%>

<div id="post-current-search-wrapper">
    <div id="post-current-search">
        <div class="left">
            <a class="enabled">
                <i class="fa fa-chevron-left"></i>
                Next
            </a>
        </div>

        <div class="search">
            <a class="enabled" href="<%= util.appendComplexRouteParam('#/posts', util.simplifySearchQuery({query: query.query, order: query.order})) %>">
                Current search: <%= query.query || '-' %>
            </a>
        </div>

        <div class="right">
            <a class="enabled">
                Previous
                <i class="fa fa-chevron-right"></i>
            </a>
        </div>
    </div>
</div>

<div id="post-view-wrapper">
    <div id="sidebar">
        <ul class="essential">
            <% if (post.contentType !== 'youtube') { %>
                <li>
                    <a class="download" href="<%= permaLink %>">
                        <i class="fa fa-download"></i>
                        <br/>
                        <%= post.contentExtension + ', ' + util.formatFileSize(post.originalFileSize) %>
                    </a>
                </li>
            <% } %>

            <% if (isLoggedIn) { %>
                <li>
                    <% if (hasFav) { %>
                        <a class="delete-favorite" href="#">
                            <i class="fa fa-heart"></i>
                        </a>
                    <% } else { %>
                        <a class="add-favorite" href="#">
                            <i class="fa fa-heart-o"></i>
                        </a>
                    <% } %>
                </li>

                <li>
                    <a class="score-up <% print(ownScore === 1 ? 'active' : '') %>" href="#">
                        <% if (ownScore === 1) { %>
                            <i class="fa fa-thumbs-up"></i>
                        <% } else { %>
                            <i class="fa fa-thumbs-o-up"></i>
                        <% } %>
                    </a>
                </li>

                <li>
                    <a class="score-down <% print(ownScore === -1 ? 'active' : '') %>" href="#">
                        <% if (ownScore === -1) { %>
                            <i class="fa fa-thumbs-down"></i>
                        <% } else { %>
                            <i class="fa fa-thumbs-o-down"></i>
                        <% } %>
                    </a>
                </li>
            <% } %>
        </ul>

        <div class="box">
            <h1>Tags (<%= _.size(post.tags) %>)</h1>
            <ul class="tags">
                <% _.each(post.tags, function(tag) { %>
                    <li class="tag-category-<%= tag.category %>"><!--
                        --><a class="tag-edit" href="#/tag/<%= tag.name %>"><!--
                            --><i class="fa fa-tag"></i><!--
                        --></a><!--

                        --><a class="post-search" href="#/posts/query=<%= tag.name %>"><!--
                            --><span class="tag-name"><%= tag.name %></span><!--
                            --><span class="usages"><%= (tag.usages) %></span>
                        </a>
                    </li>
                <% }) %>
            </ul>
        </div>

        <div class="box">
            <h1>Details</h1>
            <div class="author-box">
                <% if (post.user.name) { %>
                    <a href="#/user/<%= post.user.name %>">
                <% } %>

                <img width="40" height="40" class="author-avatar"
                    src="/data/thumbnails/40x40/avatars/<%= post.user.name || '!' %>"
                    alt="<%= post.user.name || 'Anonymous user' %>"/>

                <span class="author-name">
                    <%= post.user.name || 'Anonymous user' %>
                </span>

                <% if (post.user.name) { %>
                    </a>
                <% } %>

                <br/>

                <span class="date" title="<%= util.formatAbsoluteTime(post.uploadTime) %>">
                    <%= util.formatRelativeTime(post.uploadTime) %>
                </span>
            </div>

            <ul class="other-info">
                <li>
                    Rating:
                    <span class="safety-<%= post.safety %>">
                        <%= post.safety %>
                    </span>
                </li>

                <% if (post.originalFileSize) { %>
                    <li>
                        File size:
                        <%= util.formatFileSize(post.originalFileSize) %>
                    </li>
                <% } %>

                <% if (post.contentType == 'image') { %>
                    <li>
                        Image size:
                        <%= post.imageWidth + 'x' + post.imageHeight %>
                    </li>
                <% } %>

                <% if (post.lastEditTime !== post.uploadTime) { %>
                    <li>
                        Edited:
                        <span title="<%= util.formatAbsoluteTime(post.lastEditTime) %>">
                            <%= util.formatRelativeTime(post.lastEditTime) %>
                        </span>
                    </li>
                <% } %>

                <% if (post.featureCount > 0) { %>
                    <li>
                        Featured: <%= post.featureCount %> <%= post.featureCount < 2 ? 'time' : 'times' %>
                        <small>(<%= util.formatRelativeTime(post.lastFeatureTime) %>)</small>
                    </li>
                <% } %>

                <% if (post.source) { %>
                    <li><!--
                        --><% var link = post.source.match(/^(\/\/|https?:\/\/)/); %><!--
                        -->Source:&nbsp;<!--
                        --><% if (link) { %><!--
                            --><a href="<%= post.source %>"><!--
                        --><% } %><!--
                            --><%= post.source.trim() %><!--
                        --><% if (link) { %><!--
                            --></a><!--
                        --><% } %><!--
                    --></li>
                <% } %>

                <li>
                    Score: <%= post.score %>
                </li>
            </ul>

            <% if (_.any(postFavorites)) { %>
                <p>Favorites:</p>

                <ul class="favorites">
                    <% _.each(postFavorites, function(user) { %>
                        <li>
                            <a href="#/user/<%= user.name %>">
                                <img class="fav-avatar"
                                    src="/data/thumbnails/25x25/avatars/<%= user.name || '!' %>"
                                    alt="<%= user.name || 'Anonymous user' %>"/>
                            </a>
                        </li>
                    <% }) %>
                </ul>
            <% } %>
        </div>

        <% if (_.any(post.relations)) { %>
            <div class="box">
                <h1>Related posts</h1>
                <ul class="related">
                    <% _.each(post.relations, function(relatedPost) { %>
                        <li>
                            <a href="#/post/<%= relatedPost.id %>">
                                <%= relatedPost.idMarkdown %>
                            </a>
                        </li>
                    <% }) %>
                </ul>
            </div>
        <% } %>

        <% if (_.any(privileges) || _.any(editPrivileges) || post.contentType === 'image') { %>
            <div class="box">
                <h1>Options</h1>
                <ul class="operations">
                    <% if (_.any(editPrivileges)) { %>
                        <li>
                            <a class="edit" href="#">
                                Edit
                            </a>
                        </li>
                    <% } %>

                    <% if (privileges.canAddPostNotes) { %>
                        <li>
                            <a class="add-note" href="#">
                                Add new note
                            </a>
                        </li>
                    <% } %>

                    <% if (privileges.canDeletePosts) { %>
                        <li>
                            <a class="delete" href="#">
                                Delete
                            </a>
                        </li>
                    <% } %>

                    <% if (privileges.canFeaturePosts) { %>
                        <li>
                            <a class="feature" href="#">
                                Feature
                            </a>
                        </li>
                    <% } %>

                    <% if (privileges.canViewHistory) { %>
                        <li>
                            <a class="history" href="#">
                                History
                            </a>
                        </li>
                    <% } %>

                    <% if (post.contentType === 'image') { %>
                        <li>
                            <a href="http://iqdb.org/?url=<%= permaLink %>">
                                Search on IQDB
                            </a>
                        </li>

                        <li>
                            <a href="https://www.google.com/searchbyimage?&image_url=<%= permaLink %>">
                                Search on Google Images
                            </a>
                        </li>
                    <% } %>

                    <li class="fit-mode">
                        Fit:
                        <a data-fit-mode="fit-width" href="#">width</a>,
                        <a data-fit-mode="fit-height" href="#">height</a>,
                        <a data-fit-mode="fit-both" href="#">both</a>,
                        <a data-fit-mode="original" href="#">original</a>
                    </li>
                </ul>
            </div>
        <% } %>
    </div>

    <div id="post-view">
        <div class="messages"></div>

        <div id="post-edit-target">
        </div>

        <div id="post-content-target">
        </div>

        <% if (privileges.canViewHistory) { %>
            <div class="post-history-wrapper">
                <h1>History</h1>
                <%= historyTemplate({
                    history: postHistory,
                    util: util,
                }) %>
            </div>
        <% } %>

        <div id="post-comments-target">
        </div>
    </div>
</div>