<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>E2E Chat</title>
    <meta name="description" content="A secure, end-to-end RSA-2048 encrypted chat application.">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <link href="/styles.css" rel="stylesheet">
  </head>
  <body>


    <div id="vue-instance">




      <div class="chat-container full-width" ref="chatContainer">

        <div class="title-container">
          <div class="title-header">
            <h1>E2E Chat</h1>
            <h2>Welcome!</h2>
            <h3>Current Room: {{pendingRoom}}</h3>
          </div>
        </div>

        <div class="message-list">
          <div class="message full-width" v-for="message in messages">
            <p>
              <span v-bind:class="(message.sender == originPublicKey) ? 'blue' : 'red'">{{ getKeySnippet(message.sender) }}</span>: {{ message.text }}
            </p>
          </div>
        </div>
      </div>

      <div class="info-container full-width">
      <h1>CHATROOM</h1>
      <div class="room-select">
        <input type="text" class="full-width" placeholder="Room Name" id="room-input" v-model="pendingRoom" @keyup.enter="joinRoom()">
        <input class="yellow-button full-width" type="submit" v-on:click="joinRoom()" value="JOIN">
      </div>
      <div class="divider"></div>
      <div class="notification-list" ref="notificationContainer">
        <h1>NOTIFICATION LOG</h1>
        <div class="notification full-width" v-for="notification in notifications">
          <div class="notification-timestamp">{{ notification.timestamp }}</div>
          <div class="notification-message">{{ notification.message }}</div>
        </div>
      </div>
      <div class="flex-fill"></div>
      <div class="divider"></div>
      <div class="keys full-width">
        <h2>Users</h2>
        
        <div v-if="socket.id !== 'undefined'">
          <div class="user blue" v-for="user_id in Object.keys(public_keys)" :key="user_id">
            {{ getKeySnippet(public_keys[user_id]) }}
            <span v-if="user_id === String(socket.id)">(you)</span>
          </div>
        </div>
        
        <!-- <div class="divider"></div>
         <h2>YOUR PUBLIC KEY</h2>

        <div class="key green" v-if="originPublicKey">
          <h3>TRUNCATED IDENTIFIER - {{ getKeySnippet(originPublicKey) }}</h3>
          <p>{{ originPublicKey }}</p>
        </div>
        <div class="keypair-loader full-width" v-else>
          <div class="center-x loader"></div>
          <h2 class="center-text">Generating Keypair...</h2>
        </div> -->

      </div>
      </div>
      <div class="bottom-bar full-width">
        > <input class="message-input" type="text" placeholder="Message" v-model="draft" @keyup.enter="sendMessage()">
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.slim.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>
    <script src="/page.js"></script>

  </body>
</html>