b-modal#inbox-modal(title="", :hide-footer="true", size='lg')
.header-wrap.container(slot="modal-header")
.row
.col-4
.row
.col-2
.svg-icon.envelope(v-html="icons.messageIcon")
.col-6
h2.text-center(v-once) {{$t('messages')}}
// @TODO: Implement this after we fix username bug
// .col-2.offset-1
// button.btn.btn-secondary(@click='toggleClick()') +
.col-4.offset-4
.svg-icon.close(v-html="icons.svgClose", @click='close()')
// .col-8.to-form(v-if='displayCreate')
// strong To:
// b-form-input
.row
.col-12
.toggle#toggle(:class="!this.user.inbox.optOut && 'toggle--active'" @click="toggleOpt()")
.bar
.circle
b-popover(
target="toggle",
triggers="hover",
placement="right",
)
h4.popover-content-title {{PMAction}} {{$t('disabledPMPopoverTitle')}}
.popover-content-text {{$t('disabledPMPopoverText')}}
.row(v-if="!this.user.inbox.optOut")
.col-4.sidebar
.search-section
b-form-input(:placeholder="$t('search')", v-model='search')
.empty-messages.text-center(v-if='filtersConversations.length === 0')
.svg-icon.envelope(v-html="icons.messageIcon")
h4(v-once) {{$t('emptyMessagesLine1')}}
p(v-once) {{$t('emptyMessagesLine2')}}
.conversations(v-if='filtersConversations.length > 0')
.conversation(v-for='conversation in filtersConversations', @click='selectConversation(conversation.key)',
:class="{active: selectedConversation.key === conversation.key}")
div
span(:class="userLevelStyle(conversation)") {{conversation.name}}
span.timeago {{conversation.date | timeAgo}}
div {{conversation.lastMessageText ? conversation.lastMessageText.substring(0, 30) : ''}}
.col-8.messages
.empty-messages.text-center(v-if='activeChat.length === 0 && !selectedConversation.key')
.svg-icon.envelope(v-html="icons.messageIcon")
h4(v-once) Nothing Here Yet
p(v-once) Select a conversation on the left
.empty-messages.text-center(v-if='activeChat.length === 0 && selectedConversation.key')
p {{ $t('beginningOfConversation', {userName: selectedConversation.name})}}
chat-message.message-scroll(:chat.sync='activeChat', :inbox='true', ref="chatscroll")
// @TODO: Implement new message header here when we fix the above
.new-message-row(v-if='selectedConversation.key')
textarea(v-model='newMessage')
button.btn.btn-secondary(@click='sendPrivateMessage()') Send
.row(v-else)
.col-12
.caption-disabled
.svg-icon.envelope(v-html="icons.messageIcon")
h3 {{$t('disabledPMCaptionTitle')}}
p.text-center {{$t('disabledPMCaptionLine1')}}
p.text-center {{$t('disabledPMCaptionLine2')}}
button.btn.btn-primary(@click="toggleOpt()") {{$t('PMEnable')}}