<template> <!-- post tplt --> <div class="post__content--Container"> <div class="post__content--Wrapper"> <div class="post__content--header"> <div class="post__userContainer"> <router-link :to="{ name: 'Profile', params: { id: post.User.id } }" class="user__profileContainer" > <img :src="post.User.picture" class="post__userPicture" /> <span class="post__user--Bold user__profileLink">{{ post.User.username }}</span></router-link > </div> <span class="post__user--BoldAlt">{{ dateFormatter(post.createdAt) }}</span> </div> <div v-if="post.imageUrl.length > 0" class="img__container"> <img :src="post.imageUrl" alt="" /> </div> <!-- like container --> <!-- like container --> <div class="cta__container"> <!--<Like :postId="postId" />--> <div class="cta__public"> <div class="like__container"> <div id="likeAnimation" class="icon__tplt--like like__icon" type="button" @click="likeFunction()" :class="{ active: likeActive }" :key="postId" ></div> </div> <div> <svg @click="toggleComment" :class="{ 'icon__comment--active': commentActive }" class="icon__tplt icon__comment" xmlns="http://www.w3.org/2000/svg" width="8.4667mm" height="8.4667mm" viewBox="0 0 24 24" > <path class="cls-1" d="M12,22.81a2.2668,2.2668,0,0,1-1.8-.96l-1.5-2a.4669.4669,0,0,0-.2046-.1H8c-4.1675,0-6.75-1.1289-6.75-6.75V8c0-4.416,2.334-6.75,6.75-6.75h8c4.416,0,6.75,2.334,6.75,6.75v5c0,4.416-2.334,6.75-6.75,6.75h-.5a.2627.2627,0,0,0-.2021.1025L13.8,21.85A2.2645,2.2645,0,0,1,12,22.81ZM8,2.75C4.4185,2.75,2.75,4.4183,2.75,8v5c0,4.5205,1.5479,5.25,5.25,5.25h.5a1.8647,1.8647,0,0,1,1.4067.709L11.4,20.95a.6908.6908,0,0,0,1.2,0l1.5-2A1.7651,1.7651,0,0,1,15.5,18.25H16c3.582,0,5.25-1.668,5.25-5.25V8c0-3.5815-1.668-5.25-5.25-5.25Z" /> <path class="cls-1" d="M16.0059,12a1,1,0,0,1-.01-2h.01a1,1,0,1,1,0,2Z" /> <path class="cls-1" d="M12.0044,12a1,1,0,0,1-.0088-2h.0088a1,1,0,0,1,0,2Z" /> <path class="cls-1" d="M8.0034,12a1,1,0,0,1-.0088-2h.0088a1,1,0,1,1,0,2Z" /> </svg> </div> </div> <div v-if="authUpdatePost" class="cta__private"> <div @click="toggleUpdatePost()" :key="post.id"> <svg xmlns="http://www.w3.org/2000/svg" width="8.4667mm" height="8.4667mm" viewBox="0 0 24 24" class="icon__tplt icon__edit" > <path class="cls-1" d="M15,22.75H9c-5.4321,0-7.75-2.3174-7.75-7.75V9C1.25,3.5677,3.5679,1.25,9,1.25h2a.75.75,0,0,1,0,1.5H9C4.3857,2.75,2.75,4.3856,2.75,9v6c0,4.6143,1.6357,6.25,6.25,6.25h6c4.6143,0,6.25-1.6357,6.25-6.25V13a.75.75,0,1,1,1.5,0v2C22.75,20.433,20.4326,22.75,15,22.75Z" /> <path class="cls-1" d="M8.5054,17.6986a2.2138,2.2138,0,0,1-1.5923-.6309,2.26,2.26,0,0,1-.5854-1.9463l.43-3.0073A3.4245,3.4245,0,0,1,7.63,10.3695l7.88-7.88h0C17.5.5,19.52.4974,21.5107,2.49c1.99,1.99,1.99,4.0093,0,6L13.63,16.37a3.51,3.51,0,0,1-1.7432.8721l-3.0107.43A2.6642,2.6642,0,0,1,8.5054,17.6986ZM16.57,3.55,8.69,11.43a2.0043,2.0043,0,0,0-.4478.8936l-.43,3.0127a.7733.7733,0,0,0,.166.6748.7961.7961,0,0,0,.689.1758l3.0063-.4287a2.1055,2.1055,0,0,0,.9038-.457L20.45,7.43c1.1641-1.1646,1.6094-2.27,0-3.8794s-2.7168-1.1626-3.88,0Z" /> <path class="cls-1" d="M19.85,9.84a.7591.7591,0,0,1-.2041-.0283,7.9465,7.9465,0,0,1-5.458-5.459.75.75,0,0,1,1.4443-.4053A6.4377,6.4377,0,0,0,20.0537,8.368.75.75,0,0,1,19.85,9.84Z" /> </svg> </div> <div @click="toggleDeletePost()"> <svg xmlns="http://www.w3.org/2000/svg" width="8.4667mm" height="8.4667mm" viewBox="0 0 24 24" class="icon__tplt icon__delete" > <path class="cls-1" d="M21.001,6.73c-.0244,0-.05-.001-.0752-.0034a79.467,79.467,0,0,0-15.81-.2l-2.0425.2a.75.75,0,0,1-.1465-1.4932l2.04-.2a80.9826,80.9826,0,0,1,16.1074.2A.75.75,0,0,1,21.001,6.73Z" /> <path class="cls-1" d="M15.499,5.72a.7493.7493,0,0,1-.7383-.625l-.22-1.3C14.3994,2.9291,14.37,2.75,13.31,2.75H10.69c-1.0562,0-1.08.1377-1.23,1.0347l-.22,1.31A.75.75,0,0,1,7.76,4.8456l.22-1.31C8.1426,2.5712,8.3647,1.25,10.69,1.25h2.62c2.335,0,2.5615,1.3833,2.7109,2.2988l.2188,1.2964a.75.75,0,0,1-.6143.8647A.7828.7828,0,0,1,15.499,5.72Z" /> <path class="cls-1" d="M15.21,22.75H8.79c-3.4932,0-3.6289-1.9336-3.7383-3.4873l-.65-10.0747a.75.75,0,0,1,1.4971-.0967l.65,10.0708C6.6553,20.681,6.6953,21.25,8.79,21.25h6.42c2.0947,0,2.1348-.5693,2.2422-2.0928l.6494-10.0659a.7631.7631,0,0,1,.7959-.7.7492.7492,0,0,1,.7.7969l-.6494,10.07C18.8389,20.8168,18.7031,22.75,15.21,22.75Z" /> <path class="cls-1" d="M13.66,17.25H10.33a.75.75,0,0,1,0-1.5h3.33a.75.75,0,0,1,0,1.5Z" /> <path class="cls-1" d="M14.5,13.2494h-5a.75.75,0,1,1,0-1.5h5a.75.75,0,1,1,0,1.5Z" /> </svg> </div> </div> </div> <transition name="fade"> <div v-if="deleteActive" class="deleteModal__container" :class="{ 'deleteModal__container--isActive': deleteActive }" > <div class="deleteModal__wrapper"> <div class="deleteModal__content"> Are you sure you want to delete this post? </div> <div class="deleteModal__btnContainer"> <button @click="deletePost()" class="deleteModal__btn--confirm"> Yes </button> <button @click="deleteActive = false" class="deleteModal__btn--delete" > No </button> </div> </div> </div> </transition> <p class="post__content--body"> {{ post.content }} </p> <!-- edit Post tplt --> <div class="updatePost__relativeContainer"> <div v-if="authUpdatePost" class="updatePost__container" :class="{ 'toggleUpdateMenu--isActive': toggleUpdateMenuAnimation }" > <textarea v-model="inputCreatePost" class=" form-row__input--updatePost updatePost__eraseTextInput" :placeholder="post.content" cols="30" rows="2" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"' ></textarea> <div class="updatePost__footer"> <button @click="updatePost(inputCreatePost)" class="updatePost__button" > <svg class="button__icon button__send" ixmlns="http://www.w3.org/2000/svg" width="8.4667mm" height="8.4667mm" viewBox="0 0 24.0001 24.0001" > <path class="cls-1" d="M5.4072,21.7543a3.0806,3.0806,0,0,1-2.2827-.832c-.875-.876-1.5015-2.7529.4849-6.7178L4.48,12.473a1.2869,1.2869,0,0,0-.02-.9775l-.8516-1.7c-1.9849-3.9639-1.3569-5.84-.48-6.7168s2.7529-1.5054,6.7173.481l8.56,4.28C20.53,8.9017,21.7,10.3793,21.7,12s-1.17,3.0981-3.2949,4.1606l-8.56,4.28A10.2869,10.2869,0,0,1,5.4072,21.7543Zm0-18.0093a1.675,1.675,0,0,0-1.2187.394c-.7241.7241-.4395,2.5874.7612,4.9849l.8706,1.7407a2.8273,2.8273,0,0,1,.0186,2.24l-.89,1.7725c-1.2007,2.3975-1.4863,4.2607-.7642,4.9844s2.5879.4385,4.9888-.7627l8.561-4.28C19.3018,14.0355,20.2,13.0082,20.2,12s-.8984-2.0356-2.4648-2.8188l-8.561-4.28,0,0A9.1894,9.1894,0,0,0,5.4077,3.745Z" /> <path class="cls-1" d="M10.84,12.75H5.44a.75.75,0,1,1,0-1.5h5.4a.75.75,0,0,1,0,1.5Z" /> </svg> </button> </div> </div> </div> <!-- edit Post tplt --> <!-- comment tplt --> <div class="comment__section"> <div v-if="this.post.Comments.length > 0" class="comment__contentHeader " > <div class="comment__content--Title comment__user--Bold"> Comments </div> </div> <Comment v-for="comment in this.post.Comments" :key="comment.id" :comment="comment" v-on:commentDeleted="handleCommentDeleted" /> <div v-if="commentActive"> <div class="commentCreate__container"> <textarea v-model="inputCreateComment" class=" form-row__input" :placeholder="`What do you think ` + [[loggedFirstname]] + `?`" cols="30" rows="1" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"' ></textarea> <button @click="createComment()" class="button button__sendAnim"> <svg class="button__icon button__send" ixmlns="http://www.w3.org/2000/svg" width="8.4667mm" height="8.4667mm" viewBox="0 0 24.0001 24.0001" > <path class="cls-1" d="M5.4072,21.7543a3.0806,3.0806,0,0,1-2.2827-.832c-.875-.876-1.5015-2.7529.4849-6.7178L4.48,12.473a1.2869,1.2869,0,0,0-.02-.9775l-.8516-1.7c-1.9849-3.9639-1.3569-5.84-.48-6.7168s2.7529-1.5054,6.7173.481l8.56,4.28C20.53,8.9017,21.7,10.3793,21.7,12s-1.17,3.0981-3.2949,4.1606l-8.56,4.28A10.2869,10.2869,0,0,1,5.4072,21.7543Zm0-18.0093a1.675,1.675,0,0,0-1.2187.394c-.7241.7241-.4395,2.5874.7612,4.9849l.8706,1.7407a2.8273,2.8273,0,0,1,.0186,2.24l-.89,1.7725c-1.2007,2.3975-1.4863,4.2607-.7642,4.9844s2.5879.4385,4.9888-.7627l8.561-4.28C19.3018,14.0355,20.2,13.0082,20.2,12s-.8984-2.0356-2.4648-2.8188l-8.561-4.28,0,0A9.1894,9.1894,0,0,0,5.4077,3.745Z" /> <path class="cls-1" d="M10.84,12.75H5.44a.75.75,0,1,1,0-1.5h5.4a.75.75,0,0,1,0,1.5Z" /> </svg> </button> </div> </div> </div> <!-- comment tplt --> </div> </div> <!-- post tplt --> </template>