{{ extends "global/Page.html" }}
{{ block title }}
{{ endblock }}
{{ block content }}
{{ include 'global/DiceContainer.html' with dices_only=True }}
<div class="container w-75 d-flex flex-column justify-content-center">
  <div id="show-on-click">
    {{ chat nickname=participant.role }}
  </div>
</div>
{{ endblock }} {{ block styles }}
<style>
  .otree-chat {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 50px !important;
  }

  .otree-chat__messages {
    height: 300px !important;
    cursor: default;
    color: gray !important;
    padding: 10px;
    background-color: white !important;
    border: thin solid #8f8f8f;
  }

  .otree-chat__body {
    display: block;
  }

  .otree-chat__msg {
    margin: 5px;
    border-radius: 1.15rem;
    line-height: 1.25;
    padding: 0.5rem 0.875rem;
    position: relative;
    word-wrap: break-word;
    align-items: flex-start;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
    color: #41464b;
  }

  .otree-chat__nickname {
    color: gray !important;
    width: inherit !important;
    padding-right: 7px;
    font-size: 75% !important;
    font-weight: bolder !important;
    opacity: 0.6;
    margin-bottom: 2px;
  }

  .otree-chat__nickname::after {
    content: ":";
  }

  .otree-chat__input {
    text-align: left !important;
    max-width: none !important;
    display: inline-block;
    width: 85%;
  }

  .otree-chat__btn-send {
    vertical-align: inherit !important;
    width: 14%;
  }

  .from-me {
    text-align: right;
  }
</style>
{{ endblock }} {{ block scripts }}
<script>
  // Chat Styles
  let chatMessages = document.getElementsByClassName("otree-chat__messages")[0];
  chatMessages.classList.add("card");

  let chatInput = document.getElementsByClassName("otree-chat__input")[0];
  chatInput.classList.add("form-control");
  chatInput.placeholder = "Enter your message here...";

  let chatButton = document.getElementsByClassName("otree-chat__btn-send")[0];
  chatButton.classList.add("btn");
  chatButton.classList.add("btn-secondary");
</script>
{{ endblock }}