b-modal#inbox-modal(title="", :hide-footer="true", size='lg')
.header-wrap.container.align-items-center(slot="modal-header")
.row.align-items-center
.col-4
.row.align-items-center
.col-2
.svg-icon.envelope(v-html="icons.messageIcon")
.col-6
h2.text-center(v-once) {{ $t('messages') }}
.svg-icon.close(v-html="icons.svgClose", @click='close()')
toggle-switch.float-right(
:label="optTextSet.switchDescription",
:checked="!this.user.inbox.optOut"
:hoverText="optTextSet.popoverText",
@change="toggleOpt()"
)
.row
.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-if="!user.flags.chatRevoked") {{$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.d-flex.flex-column.justify-content-between
.empty-messages.text-center(v-if='activeChat.length === 0 && !selectedConversation.key')
.svg-icon.envelope(v-html="icons.messageIcon")
h4 {{placeholderTexts.title}}
p(v-html="placeholderTexts.description")
.empty-messages.text-center(v-if='activeChat.length === 0 && selectedConversation.key')
p {{ $t('beginningOfConversation', {userName: selectedConversation.name})}}
chat-message.message-scroll(v-if="activeChat.length > 0", :chat.sync='activeChat', :inbox='true', ref="chatscroll")
.pm-disabled-caption.text-center(v-if="user.inbox.optOut && selectedConversation.key")
h4 {{$t('PMDisabledCaptionTitle')}}
p {{$t('PMDisabledCaptionText')}}
.new-message-row(v-if='selectedConversation.key && !user.flags.chatRevoked')
textarea(
v-model='newMessage',
@keyup.ctrl.enter='sendPrivateMessage()',
maxlength='3000'
)
button.btn.btn-secondary(@click='sendPrivateMessage()') {{$t('send')}}
.row
span.ml-3 {{ currentLength }} / 3000