{% extends "core.html" %}

{% block left_pane %}
  <div id="left-pane" class="col-xs-4" style="height: {{frame_height}}px; background-color: #dff0d8;">
    <h1>Live Chat</h1>
      <!-- <div id="left-top-pane" style="height: 50%; overflow:auto;">
        <hr style="border-top: 1px solid #555" />
          <span id="task-description" style="font-size: 14px">
          </span>
      </div>
      <div id="left-bottom-pane" style="min-height: 30%; overflow:auto">
          <span id="user-goal" style="font-size: 16px;">
          </span>
      </div> -->
    <span id="instruction" style="font-size: 16px;">
        Chat with the bot naturally and stick to your own goal but <b>do not trivially copy the goal descriptions into the message.</b>
    </span>
    <br>
    <span id="user-goal" style="font-size: 16px;">
    </span>
  </div>
{% endblock %}
{% block right_pane %}
<div id="right-pane" style="min-height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
    <div id="right-top-pane" style="width: 100%; height: 570px; padding-top: 60px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; overflow:scroll; ">
        <div id="message_thread" style="width: 100%">
        </div>
        <div id="waiting-for-message" class="row" style="margin-left: 0; margin-right: 0; display: none">
            <div class="alert alert-warning" role="alert" style="float: left; display:table; background-color: #fff">
                <div id="hourglass" style="margin-top: -1px; margin-right: 5px; display: inline; float: left;">
                    <?xml version="1.0" encoding="utf-8"?><svg width='25px' height='25px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-hourglass"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g><path fill="none" stroke="#007282" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z" class="glass"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25" class="clip"><animate attributeName="height" from="25" to="0" dur="1.5s" repeatCount="indefinite" values="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1.5s" repeatCount="indefinite" values="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25" class="clip"><animate attributeName="height" from="0" to="25" dur="1.5s" repeatCount="indefinite" values="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1.5s" repeatCount="indefinite" values="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" fill="#ffab00" class="sand"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" fill="#ffab00" class="sand"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1.5s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g></svg>
                </div>
                <span style="font-size: 16px">Waiting for the next person to speak...</span>
            </div>
        </div>
    </div>

    <div id="right-bottom-pane" style="width: 100%; background-color: #eee">
        <div id="response-type-idle" class="response-type-module" style="display:none">
        </div>
        <div id="response-type-text-input" class="response-type-module" style="padding-left: 35px; padding-top: 30px; padding-bottom: 30px; padding-right: 35px; float: left; display:none">
            <div style="height: 50px; width: 100%; display: block; float: left; ">
                <input id="id_text_input" type="text" style="width: 70%; height: 100%; float: left; font-size: 16px" class="form-control" value="" placeholder="Please enter here...">
                <button class="btn btn-success" style="width: 88px; height: 100%; font-size: 16px; float: left; margin-left: 15px; padding: 0px; disabled: true; display:none" id="id_done_button">Done</button>
                <button class="btn btn-primary" style="width: 88px; height: 100%; font-size: 16px; float: left; margin-left: 15px; padding: 0px;" id="id_send_msg_button">Send</button>
            </div>
        </div>
        <div id="response-type-done" class="response-type-module" style="padding-left: 35px; padding-top: 30px; padding-bottom: 30px; padding-right: 35px; float: left; display:none">
            <span id="inactive" style="font-size: 14pt;margin-right: 15px"></span>
            <button id="done-button" type="button" class="btn btn-primary btn-lg">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> Done with this HIT
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block additional_scripts %}
<script type="text/javascript">
    function handle_new_message(new_message_id, message) {
      var agent_id = message.id;
      var message_text = message.text.replace(/(?:\r\n|\r|\n)/g, '<br />');
      if (displayed_messages.indexOf(new_message_id) !== -1) {
        // This message has already been seen and put up into the chat
        log(new_message_id + ' was a repeat message', 1);
        return;
      }
      log('New message, ' + new_message_id + ' from agent ' + agent_id, 1);
      displayed_messages.push(new_message_id);
      if (agent_id !== cur_agent_id) {
        add_message_to_conversation(agent_id, message_text, false);
      } else {
        add_message_to_conversation(agent_id, message_text, true);
      }
      if ("goal_text" in message) {
        var goal_text = message.goal_text.replace(/(?:\r\n|\r|\n)/g, '<br />');
          $("span#user-goal").html('<br>You are looking for information in Cambridge.<br><br><b> Your assigned goal is:</b><br><br>' + goal_text);
          log(message.goal_text, 1);
      }
      if("exceed_min_turns" in message && message.exceed_min_turns){
        exceed_min_turns = true;
        $("button#id_done_button").css("disabled", false);
        $("button#id_done_button").css("display", "");
        $("input#id_text_input").css("width", "40%");
        $(window).resize(window_resize);
      }
      if ("evaluation" in message && message.evaluation){
        $("button#id_done_button").hide()
      }
    }
    $("button#id_done_button").on('click', function () {
        var text = "I am done with the chat and clicked the 'Done' button, thank you!";
        if (!(text == '')) {
            $("button#id_done_button").css("disabled", true);
            new_message_id = uuidv4();
            send_packet(
                TYPE_MESSAGE,
                {text: text,
                 id: cur_agent_id,
                 message_id: new_message_id,
                 episode_done: true},
                true,
                true,
                function(msg) {
                    $("button#id_done_button").css("disabled", false);
                    $("input#id_text_input").val("");
                    $("div#response-type-text-input").css("display", "none");
                    handle_new_message(new_message_id, msg.data);
                }
            );
        }
    });
    // On window resize, ensure that the UI is properly displayed
    function window_resize() {
      log("The window was resized", 4);
      // Set the text input width to match the bottom width minus space
      // for the done button
      $("input#id_text_input").width($("div#right-bottom-pane").width() - 210);
      if(exceed_min_turns == true) {
        $("input#id_text_input").width($("input#id_text_input").width() - 100);
      }
      // Set the chat window height to be the remainder after removing the
      // height of the text pane
      var left_height = $("div#left-pane").height();
      var text_height = $("div#right-bottom-pane").outerHeight()
      $("div#right-top-pane").height((left_height - text_height) - 20);
    }
</script>
{% endblock %}