<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <!-- The CSS package above applies Google styling to buttons and other elements. -->

    <style>
    .branding-below {
      bottom: 56px;
      top: 0;
    }
    .branding-text {
      left: 7px;
      position: relative;
      top: 3px;
    }
    .col-contain {
      overflow: hidden;
    }
    .col-one {
      float: left;
      width: 50%;
    }
    .logo {
      vertical-align: middle;
    }
    .radio-spacer {
      height: 20px;
    }
    .width-100 {
      width: 100%;
    }
    .mclaim {
      background-color: rgba(163, 41, 41, 0.3);
    }
    .claim {
      background-color: rgba(41, 163, 78, 0.3);
    }
    .premise {
      background-color: rgba(163, 139, 41, 0.3);
    }
    .sidebar.bottom div{
      width: 27px;
      overflow: hidden;
      display: inline-block;
    }
    .sidebar.bottom span{
      height: 45px;
      vertical-align: middle;
      display: inline-block;
    }
    h2 {
      font-size: 14px;
    }
    
    </style>
  </head>
  <body>
    <div class="sidebar branding-below">
      <form>
        <div class="block" id="button-bar">
          <button class="green" id="get-feedback">Get Feedback</button>
        </div>
        <div class="block form-group" id="highlighted-text">
          <h2> Analysis </h2>
          <span class=mclaim>Major Claim</span>
          <span class=claim>Claim</span>
          <span class=premise>Premise</span>
          <p id="highlight"></p>
        </div>
        <div class="block form-group">
          <h2>Feedback</h2>
          <p id="feedback"></p>
        </div>
        </form>
    </div>

    <div class="sidebar bottom">
      <div><img alt="Add-on logo" class="logo" src="" height="45"></div>
      <span class="gray branding-text">Argument Feedback</span>
    </div>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      /**
       * On document load, assign click handlers to each button and try to load the
       * user's origin and destination language preferences if previously set.
       */
      $(function() {
        $('#get-feedback').click(getPrediction);
      });


      /**
       * Runs a server-side function to translate the user-selected text and update
       * the sidebar UI with the resulting translation.
       */
      function getPrediction() {
        this.disabled = true;
        $('#error').remove();
        google.script.run
            .withSuccessHandler(
              function(predictionAndFeedback, element) {
                $('#highlight').html(getHighlightedText(predictionAndFeedback));
                $('#feedback').html(predictionAndFeedback["feedback"]);
                element.disabled = false;
              })
            .withFailureHandler(
              function(msg, element) {
                showError(msg, $('#button-bar'));
                element.disabled = false;
              })
            .withUserObject(this)
            .getTextAndPrediction();
      }
      
      function getHighlightedText(prediction){
        var sentences = prediction["sentences"];
        //var sentences = prediction.sentences;
        var finalOutput = "";
        for(var i = 0; i < sentences.length; i++){
          if(sentences[i]["prediction"] == "Major Claim"){
            finalOutput += '<span class="mclaim"> ' + sentences[i]["sentence"] + ' </span>';
          }
          else if(sentences[i]["prediction"] == "Claim"){
            finalOutput += '<span class="claim"> ' + sentences[i]["sentence"] + ' </span>';
          }
          else if(sentences[i]["prediction"] == "Premise"){
            finalOutput += '<span class="premise"> ' + sentences[i]["sentence"] + ' </span>';
          }
          else{
            finalOutput += sentences[i]["sentence"] + " ";
          }
        }
        return finalOutput;
      }
      /**
       * Inserts a div that contains an error message after a given element.
       *
       * @param {string} msg The error message to display.
       * @param {DOMElement} element The element after which to display the error.
       */
      function showError(msg, element) {
        var div = $('<div id="error" class="error">' + msg + '</div>');
        $(element).after(div);
      }
    </script>
  </body>
</html>