{% extends "default.html" %}

{% block PseudoSubmitForm %}{% endblock %}
{% block sidebar %}{% endblock %}
{% block navbar %}{% endblock %}
{% block sortnav %}{% endblock %}
{% block viewfilters %}{% endblock %}
{% block mobilenavbar %}{% endblock %}
{% block mobile_description %}{% endblock %}

{% block title %}
<title>Chat</title>
<meta name="description" content="Chat">
{% endblock %}

{% block desktopbanner %}
{% endblock %}

{% block infobar %}
<div class="border-right py-3 px-3">
  <span data-toggle="tooltip" data-placement="bottom" title="people online right now" class="text-muted">
    <i class="far fa-user fa-sm mr-1"></i><span class="board-chat-count"></span>
  </span>
</div>
{% endblock %}

{% block content %}

<div class="container p-md-0 chat-container">

  <div id="chat-window">
    <div id="chat-text" {% if request.path.endswith('/chat') %}class="fullchat"{% else %}class="sidebarchat"{% endif %}>
    </div>
    <div id="system-template">
      <div class="system-line">
        <p class="message text-muted"></p>
      </div>
    </div>
  </div>
  {% if request.path.endswith('/chat') %}
  <div class="position-relative form-group d-flex pb-3">
    <div class="position-absolute text-muted text-small" style="bottom: -1.5rem; line-height: 1;">
      <span id="typing-indicator"></span>
      <span id="loading-indicator" class="d-none"></span>
    </div>
    <input id="input-text" type="text" class="form-control" placeholder="Message #, or type /help" autocomplete="off" autofocus />
    {% if v.has_premium %}
        <label class="btn btn-secondary ml-3 mb-0" for="chat-image-upload">
          <div id="filename-show"><i class="fad fa-image"></i></div>
          <input id="chat-image-upload" type="file" name="image" accept="image/*" onchange="upload_chat_image()" hidden>
        </label>
    {% endif %}
    <button id="chatsend" class="btn btn-primary ml-3" type="submit">Send</button>
  </div>
  <input id="autojoin" type="hidden" value="True">
  {% else %}
  <div class="position-relative form-group pb-3">
    <div class="position-absolute text-muted text-small" style="bottom: -.5rem; line-height: 1;">
      <span id="typing-indicator"></span>
      <span id="loading-indicator" class="d-none"></span>
    </div>
    <input id="input-text" type="text" class="form-control" placeholder="Message or type /help" autocomplete="off">
    <div class="d-flex mt-3">
      {% if v.has_premium %}
          <label class="btn btn-secondary w-20 mr-3 mb-0 ml-auto" for="chat-image-upload">
            <div id="filename-show"><i class="fad fa-image"></i></div>
            <input id="chat-image-upload" type="file" name="image" accept="image/*" onchange="upload_chat_image()" hidden>
          </label>
      {% endif %}
      <button id="chatsend" class="btn btn-primary w-100 ml-auto" type="submit">Send</button>
    </div>
  </div>
  <input id="autojoin" type="hidden" value="{{ v.auto_join_chat }}">
    {% endif %}
  <input id="guildname" type="hidden" value="general">
  <input id="username" type="hidden" value="{{ v.username }}">

  <div id="chat-line-template" class="d-none">
    <div class="chat-line my-2">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile">
          <img class="desktop-avatar rounded-circle w-100">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
            <a href="" class="font-weight-bold text-black userlink" target="_blank">@<span class="username"></span></a>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message text-black text-break"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="msg-in-template" class="d-none">
    <div class="chat-line my-2 chat-mention">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile" data-toggle="tooltip" data-placement="right">
          <img class="desktop-avatar rounded-circle w-100">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
            from <a href="" class="font-weight-bold text-black userlink" target="_blank">@<span class="username"></span></a> to <b>me</b>.<i class="fad fa-eye-slash ml-1"></i>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message text-black"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="msg-out-template" class="d-none">
    <div class="chat-line my-2">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile">
          <img class="desktop-avatar rounded-circle w-100" data-toggle="tooltip" data-placement="right">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
            from <b>me</b> to <a href="" class="font-weight-bold text-black userlink" target="_blank">@<span class="username"></span></a>.<i class="fad fa-eye-slash ml-1"></i>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message text-black"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="bot-template" class="d-none">
    <div class="chat-line my-2">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile">
          <img class="desktop-avatar rounded-circle w-100" data-toggle="tooltip" data-placement="right">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
            <a href="" class="font-weight-bold text-black userlink" target="_blank">@<span class="username"></span></a><i class="fad fa-robot text-info ml-1"></i>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message text-black"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="help-template" class="d-none">
    <div class="system-line">
      <p class="message text-muted"></p>
    </div>
  </div>

  <div id="me-template" class="d-none">
    <div class="system-line">
      <p><i class="message text-muted"></i></p>
    </div>
  </div>

  <div id="system-info" class="d-none">
    <div class="system-line">
      <p class="message text-primary"></p>
    </div>
  </div>

  <div id="system-warning" class="d-none">
    <div class="system-line">
      <p class="message text-danger"></p>
    </div>
  </div>

  <div id="gm-template" class="d-none">
    <div class="chat-line my-2">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile">
          <img class="desktop-avatar rounded-circle w-100">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
            <a href="" class="font-weight-bold text-warning userlink" target="_blank">@<span class="username"></span></a><i class="fad fa-crown text-warning ml-1"></i>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message text-black"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="motd-template" class="d-none">
    <div class="chat-line my-2">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile" data-toggle="tooltip" data-placement="right">
          <img class="desktop-avatar rounded-circle w-100">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
            <a href="" class="font-weight-bold text-primary userlink" target="_blank">+<span class="username"></span></a><i class="fad fa-chess-rook text-primary ml-1"></i>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message text-black"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="admin-template" class="d-none">
    <div class="chat-line my-2">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile" data-toggle="tooltip" data-placement="right">
          <img class="desktop-avatar rounded-circle w-100">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
            <a href="" class="font-weight-bold text-danger userlink" target="_blank">@<span class="username"></span></a><i class="fad fa-shield text-danger ml-1"></i>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message text-black"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="wallop-template" class="d-none">
    <div class="chat-line my-2">
      <div class="d-flex align-items-center">
        <span class="rounded mb-auto d-none d-md-block chat-profile">
          <img class="desktop-avatar rounded-circle w-100">
        </span>
        <div class="pl-md-3 text-muted">
          <div>
            <img class="mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
            <a href="" class="font-weight-bold text-danger userlink" target="_blank">@<span class="username"></span></a><i class="fad fa-shield text-danger ml-1"></i><i class="fad fa-bullhorn text-danger ml-1"></i>
            <div style="overflow:hidden" class="pl-4 pl-md-0 ml-4 ml-md-0">
              <span class="chat-message font-weight-bold text-black"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/assets/js/jquery-2.0.3.min.js"></script>
<script src="/assets/js/socketio.js"></script>

<script src="/assets/js/chat.js?v=2.38.0a"></script>

<style>

/*
.sidebar-chat:focus-within #chat-text {
  overflow-y:scroll;
  animation: chatexpand ease-out 500ms;
  max-height:calc(100vh - 300px);
}

.sidebar-chat:not(:focus-within) #chat-text {
  overflow-y:scroll;
  max-height: 200px;
}

@keyframes chatexpand {
  from  {max-height: 200px;}
  to    {max-height:calc(100vh - 300px);}
}
@-webkit-keyframes chatexpand {
  from  {max-height: 200px;}
  to    {max-height:calc(100vh - 300px);}
  }
}
*/

#chat-window {
  max-height:calc(100vh - 300px);
  overflow-y: scroll;
}

#loading-indicator:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}

.chat-mention {
  background-color: rgba(128, 90, 213, 0.3);
}


/* Hide scrollbar for Chrome, Safari and Opera */
#chat-window::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#chat-window {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.fullchat .chat-profile {
  min-width: 42px;
  width: 42px;
  height: 42px;
}

.sidebarchat .chat-profile {
  min-width: 30px;
  width: 30px;
  height: 30px;
}
</style>

{% endblock %}