<%- include ("partials/header") %>

    <head>
        <title>
            Tuerti -
            <%= userInfo.firstname %>
                <%= userInfo.lastname %>
        </title>
        <link rel="stylesheet" href="/plugins/lite-yt-embed.css">
        <script src="/plugins/lite-yt-embed.js"></script>
    </head>
    <div class="container main-area" data-same="<%= isOwner %>">
        <div class="row">
            <div class="col-md-3 main-sidebar">
                <div class="row sidebar-area">
                    <img class="box sidebar-image" src="/images/users/avatars/<%= userInfo.avatar %>.png" alt="">
                </div>
                <div class="row sidebar-event-info">
                    <div class="sidebar-title">
                        <h3>
                            <%= locals.info %>
                        </h3>
                    </div>
                    <div class="row event-info">
                        <ul class="info-title">
                            <div class="sidebar-title-2">
                                <%= locals.personal %>
                            </div>
                            <li class="info-sub">
                                <p class="col-md-4">
                                    <%= locals.gender %>
                                </p>
                                <% if (userInfo.gender=="m" ) { %>
                                    <span class="col-md-8">
                                        <%= locals.male %>
                                    </span>
                                    <% } else{%>
                                        <span class="col-md-8">
                                            <%= locals.female %>
                                        </span>
                                        <% } %>

                            </li>
                            <li class="info-sub" id="event-date">
                                <% var options={day: 'numeric' , month: 'short' ,year:"numeric" }; var
                                    birthday=userInfo.birthday.toLocaleDateString("en-US", options); %>
                                    <p class="col-md-4">
                                        <%= locals.birthday %>
                                    </p>
                                    <span class="col-md-8">
                                        <%= birthday %>
                                    </span>
                            </li>
                            <li class="info-sub">
                                <p class="col-md-4">
                                    <%= locals.age %>
                                </p>
                                <span class="col-md-8">
                                    <%= Math.floor((new Date()-userInfo.birthday)/86400000/365) %>
                                        <%= locals.yearsold %>
                                </span>
                            </li>
                            <div class="sidebar-title-2">
                                <%= locals.contact %>
                            </div>
                            <li class="info-sub">
                                <p class="col-md-4">
                                    <%= locals.city %>
                                </p>
                                <span class="col-md-8">
                                    <%= userInfo.city %>
                                </span>
                            </li>
                            <li class="info-sub">
                                <p class="col-md-4">
                                    <%= locals.country %>
                                </p>
                                <span class="col-md-8">
                                    <%= userInfo.country %>
                                </span>
                            </li>
                            <div class="sidebar-title-2">
                                <%= locals.moredetails %>
                            </div>
                            <li class="info-sub">
                                <% var options={day: 'numeric' , month: 'short' ,year:"numeric" }; var
                                    created=userInfo.createdAt.toLocaleDateString("en-US", options); %>
                                    <p class="col-md-4">
                                        <%= locals.registered %>
                                    </p>
                                    <span class="col-md-8">
                                        <%= created %>
                                    </span>
                            </li>
                            <li class="info-sub">
                                <p class="col-md-4">
                                    <%= locals.lastvisit %>
                                </p>
                                <% if((new Date()-userInfo.last_activity)/86400000*24*60<2){ %>
                                    <span class="col-md-8">
                                        <%= locals.online %>
                                    </span>
                                    <% }else{ %>
                                        <span class="col-md-8">
                                            <%= simplifyDate(userInfo.last_activity,"hoursago"); %>
                                        </span>
                                        <% } %>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9 main-post-area">
                <div class="row">
                    <div class="col-md-9">
                        <div class="title-wrapper">
                            <h2 class="main-title" data-id="">
                                <% if(!isOwner){ %>
                                    <%= userInfo.firstname %>
                                        <%= userInfo.lastname %>
                                            <% if(profileRelation&&profileRelation.status=="friends" ){ %><span>
                                                    <%= locals.friend %>
                                                </span>
                                                <% } %>
                                                    <% } %>
                            </h2>

                            <ul class="main-links">

                                <% if(isOwner){ %>
                                    <li class="profile-links">
                                        <a href="">
                                            <%= locals.myalbums %>
                                        </a>
                                        <a href="">
                                            <%= locals.editprofile %>
                                        </a>
                                    </li>
                                    <% }else{ %>
                                        <li>
                                            <a href="">
                                                <%= locals.seealbums %>
                                            </a>
                                        </li>
                                        <% } %>
                                            <li>
                                                <% if(profileRelation.status=="friends" ){ %>
                                                    <div class="btn btn-gray"><i class="fas fa-envelope"></i>
                                                        <%= locals.privatemessage %>
                                                    </div>
                                                    <% }else if(profileRelation.status=="none" && !isOwner){ %>
                                                        <form action="/user/<%= userInfo.id %>/friendship"
                                                            method="post">
                                                            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                                            <button name="petition" value="create"
                                                                class="btn btn-gray"><i
                                                                    class="fas fa-user-plus"></i></i>
                                                                <%= locals.addfriend %>
                                                            </button>
                                                        </form>
                                                        <% } else if(profileRelation.status=="pending" &&
                                                            profileRelation.userOneId!=userInfo.id){ %>
                                                            <div class="btn btn-gray"><i class="fas fa-user-plus"></i>
                                                                <%= locals.petitionsent %>
                                                            </div>
                                                            <% } else if(profileRelation.status=="pending" &&
                                                                profileRelation.userOneId==userInfo.id){ %>
                                                                <div class="friend-petition">
                                                                    <p>
                                                                        <%= locals.wanttoadd %>
                                                                    </p>
                                                                    <div class="petition-buttons">
                                                                        <form
                                                                            action="/user/<%= userInfo.id %>/friendship"
                                                                            method="post">
                                                                            <input type="hidden" name="_csrf"
                                                                                value="<%= csrfToken %>">
                                                                            <button name="petition" value="confirm"
                                                                                class="btn btn-blue"><i
                                                                                    class="fas fa-user-plus"></i>
                                                                                <%= locals.accept %>
                                                                            </button>
                                                                            <button name="petition" value="deny"
                                                                                class="btn btn-gray"><i
                                                                                    class="fas fa-user-plus"></i>
                                                                                <%= locals.deny %>
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                                <% }%>
                                            </li>
                            </ul>
                            <% if(isOwner){ %>
                                <form action="/user/<%= userInfo.id %>/changestatus" method="post">
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <div class="user-status box edition-mode">
                                        <i class="fas fa-pen"></i>
                                        <textarea maxlength="140" name="newstatus" oninput="auto_grow(this)"
                                            placeholder="<%= locals.updatestatus %> "></textarea>
                                        <i class="fas fa-caret-left"></i>
                                    </div>
                                    <div class="user-status-bottom">
                                        <p>
                                            <span>
                                                <%= locals.lastupdate %> :
                                            </span>
                                            <%= userInfo.status %>
                                                <span class="status-date">
                                                    <%= simplifyDate(userInfo.status_change); %>
                                                </span>
                                        </p>
                                        <input class="btn btn-blue" type="submit" value="Guardar">
                                    </div>
                                </form>
                                <% }else{ %>
                                    <div class="user-status box">

                                        <i class="fas fa-caret-left"></i>
                                        <%= userInfo.status %>
                                            <span>
                                                <%= simplifyDate(userInfo.status_change); %>
                                            </span>
                                    </div>
                                    <% } %>
                        </div>
                        <div class="main-category">
                            <div class="category-title-wrapper">
                                <div class="category-title">
                                    <h3>
                                        <%= locals.personalspace %>
                                    </h3>
                                </div>
                            </div>
                            <div class="personal-space">
                                <% if (personalSpace.length==0) { %>
                                    <div class="no-blog">
                                        <%= locals.emptyblog %>
                                            <% if (isOwner) { %>
                                                <span id="create-blog">
                                                    <%= locals.createentry %>
                                                </span>
                                                <% } %>
                                    </div>
                                    <% }else{%>
                                        <div class="blog">
                                            <% var entry=0;personalSpace.forEach(blogElement=> { %>
                                                <div hidden class="blog-entry" data-index="<%= ++entry %>">
                                                    <% if(blogElement.dataValues.type=="text" ){ %>
                                                        <div class="entry-title">
                                                            <%= blogElement.dataValues.title %>
                                                                <span>
                                                                    <%= simplifyDate(blogElement.dataValues.createdAt)
                                                                        %>
                                                                </span>
                                                        </div>
                                                        <div class="entry-text">
                                                            <%= blogElement.dataValues.content %>
                                                        </div>
                                                        <% }else if(blogElement.dataValues.type=="video" ){ %>
                                                            <div class="entry-title">
                                                                <%= blogElement.dataValues.title %>
                                                                    <span>
                                                                        <%= simplifyDate(blogElement.dataValues.createdAt)
                                                                            %>
                                                                    </span>
                                                            </div>
                                                            <lite-youtube
                                                                videoid="<%= blogElement.dataValues.content %>">
                                                            </lite-youtube>
                                                            <% }else{ %>
                                                                <% } if (isOwner) { %>
                                                                    <div class="entry-buttons">
                                                                        <form
                                                                            action="/user/<%= userInfo.id %>/deleteblog"
                                                                            method="post">
                                                                            <input type="hidden" name="_csrf"
                                                                                value="<%= csrfToken %>">
                                                                            <input type="hidden" name="entryid"
                                                                                value="<%= blogElement.dataValues.id %>">
                                                                            <div>
                                                                                <button id="create-blog" type="button"
                                                                                    class="btn btn-gray"><i
                                                                                        class="fas fa-plus"></i></button>
                                                                                <button
                                                                                    onclick="return confirm('<%=locals.areyousure %>')"
                                                                                    class="btn btn-gray"><i
                                                                                        class="far fa-trash-alt"></i></button>
                                                                            </div>
                                                                        </form>
                                                                        <% }else{ %>
                                                                            <div class="entry-buttons"
                                                                                style="justify-content: flex-end;">
                                                                                <%} %>
                                                                                    <div class="right-side">
                                                                                        <p>
                                                                                            <%= entry %> de <%=
                                                                                                    personalSpace.length
                                                                                                    %>
                                                                                        </p>
                                                                                        <% if(entry==1){ %>
                                                                                            <button disabled
                                                                                                type="button"
                                                                                                id="first-entry"
                                                                                                class="btn btn-gray unusable"><i
                                                                                                    class="fas fa-step-backward"></i></button>
                                                                                            <button disabled
                                                                                                type="button"
                                                                                                id="previous-entry"
                                                                                                class="btn btn-gray unusable"><i
                                                                                                    class="fas fa-chevron-left"></i></button>
                                                                                            <button type="button"
                                                                                                id="next-entry"
                                                                                                class="btn btn-gray"><i
                                                                                                    class="fas fa-chevron-right"></i></button>
                                                                                            <button type="button"
                                                                                                id="last-entry"
                                                                                                class="btn btn-gray"><i
                                                                                                    class="fas fa-step-forward"></i></button>
                                                                                            <% }else
                                                                                                if(entry==personalSpace.length)
                                                                                                {%>
                                                                                                <button type="button"
                                                                                                    id="first-entry"
                                                                                                    class="btn btn-gray"><i
                                                                                                        class="fas fa-step-backward"></i></button>
                                                                                                <button type="button"
                                                                                                    id="previous-entry"
                                                                                                    class="btn btn-gray"><i
                                                                                                        class="fas fa-chevron-left"></i></button>
                                                                                                <button disabled
                                                                                                    type="button"
                                                                                                    id="next-entry"
                                                                                                    class="btn btn-gray unusable"><i
                                                                                                        class="fas fa-chevron-right"></i></button>
                                                                                                <button disabled
                                                                                                    type="button"
                                                                                                    id="last-entry"
                                                                                                    class="btn btn-gray unusable"><i
                                                                                                        class="fas fa-step-forward"></i></button>
                                                                                                <% }else{ %>
                                                                                                    <button
                                                                                                        type="button"
                                                                                                        id="first-entry"
                                                                                                        class="btn btn-gray"><i
                                                                                                            class="fas fa-step-backward"></i></button>
                                                                                                    <button
                                                                                                        type="button"
                                                                                                        id="previous-entry"
                                                                                                        class="btn btn-gray"><i
                                                                                                            class="fas fa-chevron-left"></i></button>
                                                                                                    <button
                                                                                                        type="button"
                                                                                                        id="next-entry"
                                                                                                        class="btn btn-gray"><i
                                                                                                            class="fas fa-chevron-right"></i></button>
                                                                                                    <button
                                                                                                        type="button"
                                                                                                        id="last-entry"
                                                                                                        class="btn btn-gray"><i
                                                                                                            class="fas fa-step-forward"></i></button>
                                                                                                    <% } %>
                                                                                    </div>
                                                                            </div>
                                                                    </div>
                                                                    <%}); %>
                                                </div>
                                                <% } %>
                                                    <% if(isOwner){ %>
                                                        <div hidden class="create-blog box">
                                                            <form action="/user/<%= currentUser.id %>/createblog"
                                                                method="post">
                                                                <input type="hidden" name="_csrf"
                                                                    value="<%= csrfToken %>">
                                                                <div class="blog-input">
                                                                    <label for="">
                                                                        <%= locals.title %>
                                                                    </label>
                                                                    <input required maxlength="50" minlength="2"
                                                                        class="box" type="text" name="title">
                                                                </div>
                                                                <div class="blog-input active" id="blog-text">
                                                                    <label for="">
                                                                        <%= locals.entry %>
                                                                    </label>
                                                                    <textarea required max-length="500" minlength="2"
                                                                        oninput="auto_grow(this)" rows="4" class="box"
                                                                        name="content"></textarea>
                                                                    <input name="type" type="hidden" value="text">
                                                                </div>
                                                                <div hidden class="blog-input" id="blog-image">
                                                                    <label for="">
                                                                        <%= locals.image %>
                                                                    </label>
                                                                    <input disabled required maxlength="25"
                                                                        minlength="2" class="box" type="text"
                                                                        name="content">
                                                                    <input disabled name="type" type="hidden"
                                                                        value="image">
                                                                </div>
                                                                <div hidden class="blog-input" id="blog-video">
                                                                    <label for="">
                                                                        <%= locals.youtubeurl %>
                                                                    </label>
                                                                    <% if (messages.error=="wrongvideourl" ) { %>
                                                                        <input disabled required max-length="500"
                                                                            minlength="2" class="box error" type="text"
                                                                            name="content"
                                                                            placeholder="https://www.youtube.com/embed/ID">
                                                                        <% }else{ %>
                                                                            <input disabled required max-length="500"
                                                                                minlength="2" class="box" type="text"
                                                                                name="content"
                                                                                placeholder="https://www.youtube.com/embed/ID">
                                                                            <% } %>
                                                                                <input disabled name="type"
                                                                                    type="hidden" value="video">
                                                                </div>
                                                                <div class="buttons">
                                                                    <div class="left-side">
                                                                        <input type="submit" value="Publicar"
                                                                            class="btn btn-blue">
                                                                        <p id="close-blog">
                                                                            <%= locals.close %>
                                                                        </p>
                                                                    </div>
                                                                    <div class="right-side">
                                                                        <span>
                                                                            <%= locals.add %>
                                                                        </span>
                                                                        <button hidden type="button" id="add-text"
                                                                            class="btn btn-gray active"><i
                                                                                class="fas fa-font"></i>
                                                                            <%= locals.text %>
                                                                        </button>
                                                                        <button type="button" id="add-image"
                                                                            class="btn btn-gray"><i
                                                                                class="far fa-image"></i>
                                                                            <%= locals.image %>
                                                                        </button>
                                                                        <button type="button" id="add-video"
                                                                            class="btn btn-gray"><i
                                                                                class="fas fa-film"></i>
                                                                            <%= locals.video %>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <% } %>
                                        </div>
                            </div>
                            <div class="main-category">
                                <% if ((isOwner || !profileRelation || profileRelation.status!="friends"
                                    )&&userWall.length==0) { %>
                                    <div class="category-title-wrapper">
                                        <% } else { %>
                                            <div class="category-title-wrapper no-bottom-line">
                                                <% } %>

                                                    <div class="category-title">
                                                        <h3>
                                                            <%= locals.wall %>
                                                        </h3>
                                                    </div>
                                                    <ul class="wall-options">
                                                        <li>
                                                            <span>
                                                                <%= locals.show %>
                                                            </span>
                                                        </li>
                                                        <li><a href="">
                                                                <%= locals.all %>
                                                            </a></li>
                                                        <li><a href="">
                                                                <%= locals.statuses %>
                                                            </a></li>
                                                        <li><a href="">
                                                                <%= locals.comments %>
                                                            </a></li>
                                                    </ul>
                                            </div>
                                            <% if (!isOwner && profileRelation&&profileRelation.status=="friends" ) { %>
                                                <form class="new-post box" action="" method="post">
                                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                                    <img class="box"
                                                        src="/images/users/avatars/<%= currentUser.avatar %>.png"
                                                        alt="">
                                                    <textarea class="form-control" oninput="auto_grow(this)"
                                                        name="Text1" rows="1"
                                                        placeholder="<%= locals.writehere %> "></textarea>
                                                </form>
                                                <% } %>
                                                    <% if(userWall.length==0){ %>
                                                        <p class="no-posts">
                                                            <% if(isOwner){ %>
                                                                <%= locals.mywallempty %>
                                                                    <% }else{ %>
                                                                        <% if(profileRelation&&profileRelation.status=="friends"
                                                                            ){ %>
                                                                            <%= locals.noposts %>
                                                                                <% }else{ %>
                                                                                    <%= locals.yourwallempty %>
                                                                                        <% } %>
                                                                                            <% } %>
                                                        </p>
                                                        <% }else{%>
                                                            <ul class="wall">
                                                                <% userWall.forEach(element=> { %>
                                                                    <li class="wall-element">
                                                                        <a href="/user/<%= userInfo.id %> ">
                                                                            <div class="user-wrapper">
                                                                                <img src="/images/users/avatars/<%= userInfo.avatar %>.png"
                                                                                    alt="" class="box">
                                                                            </div>
                                                                        </a>
                                                                        <div class="element-content">
                                                                            <div class="element-own">
                                                                                <p>
                                                                                    <%= element.content %>
                                                                                </p>
                                                                                <div class="element-bottom">
                                                                                    <p>
                                                                                        <%= simplifyDate(element.createdAt);
                                                                                            %>
                                                                                    </p>
                                                                                    <a href=""
                                                                                        id="toggle-comment">Comentar</a>
                                                                                </div>
                                                                            </div>
                                                                            <ul class="element-comments">
                                                                                <form style="display: none;"
                                                                                    id="write-comment"
                                                                                    action="/user/<%= userInfo.id %>/postcomment"
                                                                                    method="post">
                                                                                    <input type="hidden" name="_csrf"
                                                                                        value="<%= csrfToken %>">
                                                                                    <input type="hidden" name="postid"
                                                                                        value="<%= element.id %>">
                                                                                    <textarea oninput="auto_grow(this)"
                                                                                        name="comment" id=""
                                                                                        class="form-control"
                                                                                        placeholder="Escribe un comentario"></textarea>
                                                                                </form>
                                                                                <% if (element.comments!=0) { %>
                                                                                    <%
                                                                                        element.comments.forEach(comment=>
                                                                                        { %>
                                                                                        <li class="comment-element">
                                                                                            <a
                                                                                                href="/user/<%= comment.writerId %> ">
                                                                                                <div
                                                                                                    class="user-wrapper">
                                                                                                    <img class="box"
                                                                                                        src="/images/users/avatars/<%= comment.owner.avatar %>.png"
                                                                                                        alt="">
                                                                                                    <% if(((new
                                                                                                        Date()-comment.owner.last_activity)/86400000*24*60)<2){%>
                                                                                                        <div
                                                                                                            class="online">
                                                                                                        </div>
                                                                                                        <%}%>
                                                                                                </div>
                                                                                            </a>
                                                                                            <div
                                                                                                class="comment-content">
                                                                                                <div
                                                                                                    class="comment-text">
                                                                                                    <a
                                                                                                        href="/user/<%= comment.writerId %>">
                                                                                                        <%= comment.owner.firstname
                                                                                                            %>
                                                                                                            <%= comment.owner.lastname
                                                                                                                %>
                                                                                                    </a>
                                                                                                    <p>
                                                                                                        <%= comment.content
                                                                                                            %>
                                                                                                    </p>
                                                                                                </div>
                                                                                                <p><span>
                                                                                                        <%= simplifyDate(comment.createdAt);
                                                                                                            %>
                                                                                                    </span></p>
                                                                                            </div>
                                                                                        </li>
                                                                                        <% }); %>
                                                                                            <a href=""
                                                                                                class="seeall">Ver todos
                                                                                                (<%= element.comments.length;
                                                                                                    %>)
                                                                                            </a>
                                                                                            <% } %>
                                                                            </ul>
                                                                        </div>
                                                                    </li>
                                                                    <% }); %>
                                                            </ul>
                                                            <% } %>
                                                                <% if(!isOwner){ %>
                                                                    <ul class="user-options">
                                                                        <% if(!profileRelation){ %>
                                                                            <% }else{ %>
                                                                                <%if(profileRelation.status=="friends"){%>
                                                                                    <li>
                                                                                        <form
                                                                                            action="/user/<%= userInfo.id %>/deletefriend"
                                                                                            method="post">
                                                                                            <input type="hidden"
                                                                                                name="_csrf"
                                                                                                value="<%= csrfToken %>">
                                                                                            <button
                                                                                                onclick="return confirm('<%=locals.areyousure %>')"
                                                                                                class="btn btn-gray"><i
                                                                                                    class="far fa-trash-alt"></i>
                                                                                                <%= locals.removefriend
                                                                                                    %>
                                                                                            </button>
                                                                                        </form>
                                                                                    </li>
                                                                                    <% }} %>
                                                                                        <li>
                                                                                            <form
                                                                                                action="/user/<%= userInfo.id %>/block"
                                                                                                method="post">
                                                                                                <input type="hidden"
                                                                                                    name="_csrf"
                                                                                                    value="<%= csrfToken %>">
                                                                                                <button
                                                                                                    onclick="return confirm('<%=locals.areyousure %>')"
                                                                                                    class="btn btn-gray"><i
                                                                                                        class="fas fa-ban"></i>
                                                                                                    <%= locals.blockuser
                                                                                                        %>
                                                                                                </button>
                                                                                            </form>
                                                                                        </li>
                                                                                        <li>
                                                                                            <form action=""
                                                                                                method="post">
                                                                                                <input type="hidden"
                                                                                                    name="_csrf"
                                                                                                    value="<%= csrfToken %>">
                                                                                                <button
                                                                                                    class="btn btn-gray"><i
                                                                                                        class="fas fa-bullhorn"></i>
                                                                                                    <%= locals.reportuser
                                                                                                        %>
                                                                                                </button>
                                                                                            </form>
                                                                                        </li>
                                                                    </ul>
                                                                    <% } %>
                                    </div>
                            </div>
                            <div class="col-md-3">
                                <div class="right-sidebar-title">
                                    <%= locals.photos %>
                                        <div class="sidebar-addon"><i class="fas fa-portrait"></i>
                                            <%= locals.albums %>
                                        </div>
                                </div>
                                <ul class="sidebar-photos">
                                    <li class="sidebar-photo">
                                        <a class="sidebar-user" href="">
                                            <div class="user-wrapper">
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <a class="sidebar-seall" href="">
                                    <%= locals.seall %>
                                </a>
                                <% if(!isOwner){ %>
                                    <p class="right-sidebar-title">
                                        <%= locals.commonfriends %>
                                    </p>
                                    <% if(userInfo.friends.commonFriends){ %>
                                        <ul class="user-images">
                                            <% userInfo.friends.commonFriends.forEach(friend=> { %>
                                                <li class="user-photo">
                                                    <a class="sidebar-user" href="/user/<%= friend.id %> ">
                                                        <div class="user-wrapper">
                                                            <img src="/images/users/avatars/<%= friend.avatar %>.png"
                                                                alt="">
                                                            <% if(((new
                                                                Date()-friend.last_activity)/86400000*24*60)<2){%>
                                                                <div class="online"></div>
                                                                <%}%>
                                                        </div>
                                                        <p>
                                                            <%= friend.firstname %>
                                                                <%= friend.lastname %>
                                                        </p>
                                                    </a>
                                                </li>
                                                <% }); %>
                                        </ul>
                                        <a class="sidebar-seall" href="">
                                            <%= locals.seall %>
                                                (<% if(userInfo.friends.commonFriends){ %>
                                                    <%= userInfo.friends.commonFriends.length %>
                                                        <% } else { %>0<% } %>)
                                        </a>
                                        <% }else{ %>
                                            <div class="sidebar-element-empty">
                                                <%= locals.nocommons %>.
                                            </div>
                                            <% } %>
                                                <% } %>
                                                    <p class="right-sidebar-title">
                                                        <%= locals.friends %>
                                                    </p>
                                                    <% if(userInfo.friends.commonFriends){ %>
                                                        <ul class="user-images">

                                                            <% userInfo.friends.profileFriends.forEach(friend=> { %>
                                                                <li class="user-photo">
                                                                    <a class="sidebar-user"
                                                                        href="/user/<%= friend.id %> ">
                                                                        <div class="user-wrapper">
                                                                            <img src="/images/users/avatars/<%= friend.avatar %>.png"
                                                                                alt="">
                                                                            <% if(((new
                                                                                Date()-friend.last_activity)/86400000*24*60)<2){%>
                                                                                <div class="online"></div>
                                                                                <%}%>
                                                                        </div>
                                                                        <p>
                                                                            <%= friend.firstname %>
                                                                                <%= friend.lastname %>
                                                                        </p>
                                                                    </a>
                                                                </li>
                                                                <% }); %>

                                                        </ul>
                                                        <% }else{ %>
                                                            <div class="sidebar-element-empty">
                                                                <% if(isOwner){ %>
                                                                    <%= locals.nofriendsyetown %>.
                                                                        <% } else { %>
                                                                            <%= locals.nofriendsyet %>.
                                                                                <% } %>
                                                            </div>
                                                            <% } %>
                                                                <a class="sidebar-seall" href="">
                                                                    <%= locals.seall %>
                                                                        (<% if(userInfo.friends.profileFriends){ %>
                                                                            <%= userInfo.friends.profileFriends.length
                                                                                %>
                                                                                <% } else { %>0<% } %>)
                                                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div hidden class="blurred"></div>
            </div>
            <script>
                window.onload = function () {
                    var bloglength = $('.blog-entry').last().data("index");
                    $("div").find("[data-index=1]").removeAttr("hidden");
                    if (bloglength == 1) {
                        $("#next-entry").addClass("unusable");
                        $("#last-entry").addClass("unusable");
                        $("#next-entry").attr("disabled", "disabled");
                        $("#last-entry").attr("disabled", "disabled");
                    }
                    if ($(".main-area").data("same") == true) {
                        auto_grow(document.querySelector(".user-status textarea"));
                    }
                };

                $(document).on('click', '#toggle-comment', function (e) {
                    e.preventDefault();
                    $(this).closest("form");
                    $(this).parent().parent().parent().children("ul").children("form").toggle()
                });

                $(document).on('click', '#next-entry', function (e) {
                    e.preventDefault();
                    var bloglength = $('.blog-entry').last().data("index");
                    var newindex = $("div").find('.blog-entry:visible').data("index") + 1;
                    $(".blog-entry").attr("hidden", "hidden");
                    $("div").find("[data-index=" + newindex + "]").removeAttr("hidden");
                });

                $(document).on('click', '#previous-entry', function (e) {
                    e.preventDefault();
                    var bloglength = $('.blog-entry').last().data("index");
                    var newindex = $("div").find('.blog-entry:visible').data("index") - 1;
                    $(".blog-entry").attr("hidden", "hidden");
                    $("div").find("[data-index=" + newindex + "]").removeAttr("hidden");
                });

                $(document).on('click', '#last-entry', function (e) {
                    e.preventDefault();
                    var bloglength = $('.blog-entry').last().data("index");
                    $(".blog-entry").attr("hidden", "hidden");
                    $("div").find("[data-index=" + bloglength + "]").removeAttr("hidden");
                });

                $(document).on('click', '#first-entry', function (e) {
                    e.preventDefault();
                    var bloglength = $('.blog-entry').last().data("index");
                    $(".blog-entry").attr("hidden", "hidden");
                    $("div").find("[data-index=1]").removeAttr("hidden");
                });

                $(document).on('click', '#create-blog', function (e) {
                    e.preventDefault();
                    $(".create-blog").removeAttr("hidden");
                    $(".no-blog").attr("hidden", "hidden");
                    $(".blog").attr("hidden", "hidden");
                });

                $("#close-blog").click(function (e) {
                    e.preventDefault();
                    $(".create-blog").attr("hidden", "hidden");
                    $(".no-blog").removeAttr("hidden");
                    $(".blog").removeAttr("hidden");
                });

                $("#add-image").click(function (e) {
                    e.preventDefault();
                    $("div.active").attr("hidden", "hidden");
                    $("div.active input").attr("disabled", "disabled");
                    $("div.active textarea").attr("disabled", "disabled");
                    $("button.active").removeAttr("hidden");
                    $("#add-image").attr("hidden", "hidden");
                    $("#add-image").addClass("active");
                    $("#blog-image").removeAttr("hidden");
                    $("#blog-image").addClass("active");
                    $("#blog-image input").removeAttr("disabled");
                    $("#blog-image input").addClass("active");
                });

                $("#add-text").click(function (e) {
                    e.preventDefault();
                    $("div.active").attr("hidden", "hidden");
                    $("div.active input").attr("disabled", "disabled");
                    $("div.active textarea").attr("disabled", "disabled");
                    $("button.active").removeAttr("hidden");
                    $("#add-text").attr("hidden", "hidden");
                    $("#add-text").addClass("active");
                    $("#blog-text").removeAttr("hidden");
                    $("#blog-text").addClass("active");
                    $("#blog-text input").removeAttr("disabled");
                    $("#blog-text textarea").removeAttr("disabled");
                    $("#blog-text input").addClass("active");
                });

                $("#add-video").click(function (e) {
                    e.preventDefault();
                    $("div.active").attr("hidden", "hidden");
                    $("div.active input").attr("disabled", "disabled");
                    $("div.active textarea").attr("disabled", "disabled");
                    $("button.active").removeAttr("hidden");
                    $("#add-video").attr("hidden", "hidden");
                    $("#add-video").addClass("active");
                    $("#blog-video").removeAttr("hidden");
                    $("#blog-video").addClass("active");
                    $("#blog-video input").removeAttr("disabled");
                    $("#blog-video input").addClass("active");
                });

                function auto_grow(element) {
                    element.style.height = "5px";
                    element.style.height = (element.scrollHeight) + "px";
                }

                $("#write-comment textarea").keypress(function (e) {
                    if (e.which == 13 && !e.shiftKey) {
                        $(this).closest("form").submit();
                        e.preventDefault();
                    }
                });
            </script>
            </body>

            </html>