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-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 === conversation.key}")
div
span(:class="userLevelStyle(conversation)") {{conversation.name}}
span.timeago {{conversation.date | timeAgo}}
div {{conversation.lastMessageText.substring(0, 30)}}
.col-8.messages
.empty-messages.text-center(v-if='activeChat.length === 0')
.svg-icon.envelope(v-html="icons.messageIcon")
h4(v-once) Nothing Here Yet
p(v-once) Select a conversation on the left
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')
textarea(v-model='newMessage')
button.btn.btn-secondary(@click='sendPrivateMessage()') Send