<template>
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title"></div>











































<!-- -------- -->
<!-- MAIN APP -->
<!-- -------- -->
<section class="mainApp">
  <div class="leftPanel">
    <header>
      <button class="trigger">
        <i class="material-icons">&#xE5D2;</i>
      </button>
      
      <input class="searchChats" type="search" placeholder="Search..."/>
    </header>
    <div class="chats">
      <div class="chatButton active">
        <div class="chatInfo">
        <div class="image my-image">
        
        </div>
        
        <p class="name">
          Renan Mayrinck
        </p>
        
        <p class="message">Actually, more ...</p>
        </div>
        
        <div class="status onTop">
          <p class="date">00:02</p>
          <p class="count">10</p>
          <i class="material-icons read">done_all</i>
          <i class="material-icons fixed">loyalty</i>
        </div>
      </div>
      
      <div class="chatButton">
        <div class="chatInfo">
        <div class="image">
        
        </div>
        
        <p class="name">
          Doge
        </p>
        
        <p class="message">Wow!</p>
        </div>
        
        <div class="status normal">
          <p class="date">Now</p>
          <p class="count">42</p>
          <i class="material-icons read">done_all</i>
          <i class="material-icons fixed">loyalty</i>
        </div>
      </div>
    </div>
  </div>
  
  <div class="rightPanel">
    <div class="topBar">
      <div class="rightSide">
        <button class="tbButton search">
          <i class="material-icons">&#xE8B6;</i>
        </button>
        <button class="tbButton otherOptions">
          <i class="material-icons">more_vert</i>
        </button>
      </div>
      
      <div class="leftSide">
      <p class="chatName">Renan Mayrinck <span>@Grisson</span></p>
      <p class="chatStatus">Online</p>
      </div>
    </div>
    
    <div class="convHistory userBg">
      <!-- CONVERSATION GOES HERE! -->
      
      <div class="msg messageReceived">
        Dude, why no one did this before?
        <span class="timestamp">00:00</span>
      </div>
      
      <div class="msg messageSent">
        Dunno...
        <i class="material-icons readStatus">done_all</i>
        <span class="timestamp">00:01</span>
      </div>
      
      <div class="msg messageReceived">
        This don't matter now, I did it!
        <span class="timestamp">00:02</span>
      </div>
      
      <div class="msg messageReceived">
        Hope someone see this... Someday...
        <span class="timestamp">00:02</span>
      </div>
      
      <div class="msg messageSent">
        Actually, more than 1700 people saw this.
        <i class="material-icons readStatus">done</i>
        <span class="timestamp">00:04</span>
      </div>
    </div>
    
    <div class="replyBar">
      <button class="attach">
        <i class="material-icons d45">attach_file</i>
      </button>
      
      <input type="text" class="replyMessage" placeholder="Type your message..."/>
      
      <div class="emojiBar">
        <div class="emoticonType">
        <button id="panelEmoji">Emoji</button>
        <button id="panelStickers">Stickers</button>
        <button id="panelGIFs">GIFs</button>
        </div>
        
        
        <!-- Emoji panel -->
        <div class="emojiList">
          <button id="smileface" class="pick">
        </button>
          <button id="grinningface" class="pick"></button>
          <button id="tearjoyface" class="pick"></button>
          <button id="rofl" class="pick"></button>
          <button id="somface" class="pick"></button>
          <button id="swfface" class="pick"></button>
        </div>
        
        <!-- the best part of telegram ever: STICKERS!! -->
        <div class="stickerList">
          <button id="smileface" class="pick">
        </button>
          <button id="grinningface" class="pick"></button>
          <button id="tearjoyface" class="pick"></button>
        </div>
      </div>
      
      <div class="otherTools">
        <button class="toolButtons emoji">
          <i class="material-icons">face</i>
        </button>
        
        <button class="toolButtons audio">
          <i class="material-icons">mic</i>
        </button>
      </div>
    </div>
  </div>
</section>

<!-- ---------------------- -->
<!-- MENU AND OVERLAY STUFF -->
<!-- ---------------------- -->

<!-- MENU -->
<section class="menuWrap">
  <div class="menu">
    <div class="me userBg">
      <div class="image"></div>
      
      <div class="myinfo">
      <p class="name">Random Name</p>
      <p class="phone">+1 12 1234 5678</p>
      </div>
      
      <button class="cloud">
        <i class="material-icons">cloud</i>
      </button>
      
      <button class="settings">
        <i class="material-icons">settings</i>
      </button>
      
      <button class="cloud">
        <i class="material-icons">cloud</i>
      </button>
    </div>
    <nav>
      <button class="ng">
        <i class="material-icons">&#xE8D3;</i>
        
        <span>New Group</span>
      </button>
      
      <button class="nc">
        <i class="material-icons">&#xE0B6;</i>
        
        <span>New Channel</span>
      </button>
      
      <button class="cn">
        <i class="material-icons">&#xE851;</i>
        
        <span>Contacts</span>
      </button>
      
      <button class="cl">
        <i class="material-icons">&#xE0B0;</i>
        
        <span>Calls History</span>
      </button>
      
      <a href="https://telegram.org/faq" target="_blank">
      <button class="faq">
        <i class="material-icons">&#xE000;</i>
        
        <span>FAQ and Support</span>
      </button>
      </a>
      
      <button class="lo">
        <i class="material-icons">&#xE879;</i>
        
        <span>Logout</span>
      </button>
    </nav>
    
    <div class="info">
    <p>Telegram Web</p>
    <p>Ver 0.0.2 - <a href="https://en.wikipedia.org/wiki/Telegram_(messaging_service)">About</a></p>
    <p>Layout coded by: <a href="https://www.github.com/mayrinck">Mayrinck</a></p>
    </div>
  </div>
</section>

<!-- CONVERSATION OPTIONS MENU -->
<div class="moreMenu">
  <button class="option about">See Info</button>
  <button class="option notify">Disable Notifications</button>
  <button class="option block">Block User</button>
</div>

<!-- MOBILE OVERLAY -->
<section class="switchMobile">
  <p class="title">Mobile Device Detected</p>
  
  <p class="desc">Switch to the mobile version for a better performance.</p>
  
  <a href="https://web.telegram.org/#/login"><button class="okay">OK</button></a>
</section>

<!-- PROFILE OPTIONS OVERLAY -->
<section class="config">
  <section class="configSect">
    <div class="profile">
    <p class="confTitle">Settings</p>
    
    <div class="image"></div>
    
    <div class="side">
    <p class="name">Random Name</p>
    <p class="pStatus">Online</p>
    </div>
      
    <button class="changePic">Change Profile Picture</button>
    <button class="edit">Edit Profile Info</button>
  </div>
  </section>
  
  <section class="configSect second">
    
    <!-- PROFILE INFO SECTION -->
    <p class="confTitle">Your Info</p>
    
    <div class="information">
      <ul>
        <li>Phone Number: <span class="blue phone">+1 12 1234 5678</span></li>
        <li>Username: <span class="blue username">@USERNAME</span></li>
        <li>Profile: <span class="blue">https://t.me/USERNAME</span></li>
      </ul>
    </div>
    
    <!-- NOTIFICATIONS SECTION -->
    <p class="confTitle">Notifications</p>
    
    <div class="optionWrapper deskNotif">
      <input type="checkbox" id="deskNotif" class="toggleTracer" checked>

      <label class="check deskNotif" for="deskNotif">
        <div class="tracer"></div>
      </label>
      <p>Enable Desktop Notifications</p>
    </div>
    
    <div class="optionWrapper showSName">
      <input type="checkbox" id="showSName" class="toggleTracer">

      <label class="check" for="showSName">
        <div class="tracer"></div>
      </label>
      <p>Show Sender Name</p>
    </div>
    
    <div class="optionWrapper showPreview">
      <input type="checkbox" id="showPreview" class="toggleTracer">

      <label class="check" for="showPreview">
        <div class="tracer"></div>
      </label>
      <p>Show Message Preview</p>
    </div>
    
    <div class="optionWrapper playSounds">
      <input type="checkbox" id="playSounds" class="toggleTracer">

      <label class="check" for="playSounds">
        <div class="tracer"></div>
      </label>
      <p>Play Sounds</p>
    </div>
    
    
    <p class="confTitle">Other Settings</p>
    
      <div class="optionWrapper">
        <input type="checkbox" id="checkNight" class="toggleTracer">
        
        <label class="check" for="checkNight">
          <div class="tracer"></div>
        </label>
        <p>Night Mode</p>
      </div>
    
  </section>
</section>































    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false,
        title: 'Check me'
      }
    },
    methods: {
      check() {
        this.checked = !this.checked;
      }
    }
  }
</script>