<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   body , * {
  font-family: Lato, sans-serif;
}

input, textarea, button:focus, select {
  outline: none;
  resize: none;
}

input::placeholder, textarea::placeholder {
  color: #A0AEC0;
  opacity: 1;
}

select {
  -webkit-appearance: none;
  background: center right 12px / 12px url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1703172/shevron.png) no-repeat;
}

.mentionSuggs-enter-active, .mentionSuggs-leave-active {
  transition: all .2s;
}
.mentionSuggs-enter, .mentionSuggs-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(8px)
}

.threadSuggs-enter-active {
  transition: all .2s .2s;
}
.threadSuggs-leave-active {
  transition: all .2s;
}
.threadSuggs-enter, .threadSuggs-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(8px)
}

.newThreadMess-enter-active {
  transition: all .2s .2s;
}
.newThreadMess-leave-active {
  transition: all .2s;
}
.newThreadMess-enter, .newThreadMess-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  height: 0;
}

.theresAReply-enter-active {
  transition: all .2s;
}
.theresAReply-leave-active {
  transition: all .2s;
}
.theresAReply-enter, .theresAReply-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  height: 0;
}
  </style>
 </head>
 <body translate="no">
  <div class="text-black antialiased" id="app">
   <div class="fixed w-screen h-screen bg-gray-300 top-0 left-0 flex items-center justify-center px-4 py-5">
    <div class="w-full max-w-lg rounded-lg bg-white shadow-lg flex flex-col" style="height: 100%; max-height: 500px;">
     <div class="h-16 border-b border-gray-400 px-4 flex items-center">
      <div class="leading-tight">
       <div class="font-bold text-lg">
        #general
       </div>
       <div class="text-sm opacity-25">
        Stuff for everyone
       </div>
      </div>
     </div>
     <div class="flex-1 overflow-hidden">
      <div class="flex flex-col min-h-full">
       <div class="flex-1">
       </div>
       <div class="flex items-start px-4 py-3" v-for="mess,k in messages">
        <div :style="{backgroundImage: 'url(' + users[mess.user].userpic + ')'}" class="w-12 h-12 rounded bg-pink-500 mr-3 bg-cover">
        </div>
        <div class="flex-1">
         <div class="leading-none pt-1">
          <span class="font-bold">
           {{users[mess.user].username}}
          </span>
          <span class="opacity-50 text-xs pl-1">
           {{mess.time}}
          </span>
         </div>
         <div class="pt-1 leading-tight">
          {{mess.text}}
         </div>
         <transition name="theresAReply">
          <div class="flex items-center mt-2 h-6" v-if="mess.doesHaveReplies">
           <div :style="{backgroundImage: 'url(' + users[0].userpic + ')'}" class="w-6 h-6 mr-2 rounded bg-blue-500 bg-cover">
           </div>
           <div class="text-xs">
            <span class="text-blue-600 font-medium">
             1 reply
            </span>
            <span class="opacity-50 pl-1">
             Last reply now
            </span>
           </div>
          </div>
         </transition>
        </div>
       </div>
       <div class="h-3">
       </div>
      </div>
     </div>
     <transition name="newThreadMess">
      <div class="bg-blue-600 flex items-center text-white overflow-hidden" v-if="selectedThread !== null">
       <div class="text-sm font-medium pl-4 pr-2 flex-1 truncate" style="padding-top: 7px; padding-bottom: 7px;">
        Replying to {{users[selectedUser].name}}: {{suggMessages[selectedThread].text}}
       </div>
       <button @click="selectedThread = null" class="ion-md-close text-white p-1 mr-3" style="padding-top: 7px;">
       </button>
      </div>
     </transition>
     <div class="border-t border-gray-400 px-3 relative">
      <transition name="mentionSuggs">
       <div class="absolute border bottom-0 left-0 py-1 bg-white rounded shadow" style="bottom: 40px; width: calc(100% - 24px); margin: 0 12px" v-if="doShowMentionSuggs">
        <div :class="{'bg-blue-600 text-white': selectedMentionSugg === i}" class="px-3 py-2 flex items-center" v-for="user,i in users">
         <div :style="{backgroundImage: 'url(' + user.userpic + ')'}" class="w-6 h-6 mr-3 rounded bg-blue-500 bg-cover">
         </div>
         <div class="font-medium">
          {{user.name}}
         </div>
         <div class="mx-2 rounded-full bg-green-400 w-2 h-2">
         </div>
         <div class="opacity-50">
          {{user.username}}
         </div>
        </div>
       </div>
      </transition>
      <transition name="threadSuggs">
       <div class="absolute border bottom-0 left-0 py-1 bg-white rounded shadow flex flex-col-reverse" style="bottom: 40px; width: calc(100% - 24px); margin: 0 12px" v-if="doShowThreadSuggs">
        <div :class="{'bg-blue-600 text-white': selectedThreadSugg === i}" class="px-3 py-2 flex items-center" v-for="mess,i in suggMessages">
         <div class="ion-ios-undo text-lg opacity-25 mr-3">
         </div>
         <div class="mr-2 truncate">
          {{mess.text}}
         </div>
         <div class="opacity-50 text-sm">
          2:30pm
         </div>
        </div>
       </div>
      </transition>
      <div class="h-12 flex items-center">
       <button class="ion-md-attach text-xl text-gray-600 px-2">
       </button>
       <input @keydown.down.prevent="downPressed()" @keydown.enter.prevent="enterPressed()" @keydown.esc.prevent="escPressed()" @keydown.up.prevent="upPressed()" class="flex-1 px-2" id="newMesInput" type="text" v-model="newMesInput"/>
       <button :class="{'text-blue-500': doShowMentionSuggs}" class="ion-ios-at text-xl text-gray-600 px-2">
       </button>
       <button :class="{'text-blue-500': doShowThreadSuggs}" class="ion-ios-undo text-xl text-gray-600 px-2">
       </button>
       <button class="ion-md-happy text-xl text-gray-600 px-2">
       </button>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>
