div(v-intersect.once='onIntersect')
v-textarea#discussion-new(
outlined
flat
placeholder='Write a new comment...'
auto-grow
dense
rows='3'
hide-details
v-model='newcomment'
color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
v-if='permissions.write'
)
v-row.mt-2(dense, v-if='!isAuthenticated && permissions.write')
v-col(cols='12', lg='6')
v-text-field(
outlined
color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
placeholder='Your Name'
hide-details
dense
autocomplete='name'
v-model='guestName'
)
v-col(cols='12', lg='6')
v-text-field(
outlined
color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
placeholder='Your Email Address'
hide-details
type='email'
dense
autocomplete='email'
v-model='guestEmail'
)
.d-flex.align-center.pt-3(v-if='permissions.write')
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
.caption.blue-grey--text Markdown Format
v-spacer
.caption.mr-3(v-if='isAuthenticated') Posting as #[strong {{userDisplayName}}]
v-btn(
dark
color='blue-grey darken-2'
@click='postComment'
depressed
)
v-icon(left) mdi-comment
span.text-none Post Comment
v-divider.mt-3(v-if='permissions.write')
.pa-5.d-flex.align-center.justify-center(v-if='isLoading')
v-progress-circular(
indeterminate
size='20'
width='1'
color='blue-grey'
)
.caption.blue-grey--text.pl-3: em Loading comments...
v-timeline(
dense
v-else-if='comments && comments.length > 0'
)
v-timeline-item(
color='pink darken-4'
large
v-for='cm of comments'
:key='`comment-` + cm.id'
)
template(v-slot:icon)
v-avatar
v-img(src='http://i.pravatar.cc/64')
v-card.elevation-1
v-card-text
.caption: strong {{cm.authorName}}
.overline.grey--text 3 minutes ago
.mt-3 {{cm.render}}
.pt-5.text-center.body-2.blue-grey--text(v-else-if='permissions.write') Be the first to comment.
.text-center.body-2.blue-grey--text(v-else) No comments yet.