<commit_before><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>FADH Call Center - Call Agent Interface</title>

  <link rel="stylesheet" href="/styles/default.css" type="text/css" />
  <link rel="stylesheet" href="/styles/bootstrap.css" type="text/css" />
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
      type="text/css" rel="stylesheet" />

</head>

<body ng-app="callcenterApplication" ng-controller="WorkflowController" data-ng-init="init()">

<div ng-show="UI.warning.browser" class="panel panel-default ui-warning" ng-cloak>{{UI.warning.browser}}</div>
<div ng-show="UI.warning.worker" class="panel panel-default ui-warning" ng-cloak>{{UI.warning.worker}}</div>

<div class="container" style="width:860px">

  <section class="workflow-controller" ng-cloak>

    <div class="panel panel-default">

      <div class="panel-body">

        <div class="logout"><span ng-click="logout()">logout</span></div> 
        <h3 class="name" class="page-header">{{worker.friendlyName}}&#39;s Call Agent Interface</h3>
        <h4>Friendswood Area Disaster Help</h4>

        <div>Status:&nbsp;<span style="font-size:1em" ng-class="{'label-success': worker.activityName == 'Idle', 'label-danger': worker.activityName == 'Busy', 'label-default': worker.activityName == 'Offline', 'label-warning': worker.activityName == 'Reserved'}" class="label">{{worker.activityName}}</span></div>

      <div class="reservations">

      <!-- reservation is waiting for acceptance -->
      <div class="panel panel-default agent-reservation" ng-show="reservation != null">
        <div class="panel-heading">
          <h3 class="panel-title">Reservation</h3>
        </div>
        <div class="panel-body">

          <table>
          <tr>
            <td>
             <div class="title">{{reservation.task.attributes.title}} from {{reservation.task.attributes.name}}</div>
             <div class="timer" ng-class='{"invisible": !reservationCounter}'>created {{ reservationCounter | TaskWaitingTime }} ago</div>
             </td>
            <td class="accept-panel"><button ng-click="acceptReservation(reservation)">Accept</button></td>
          </tr>
          </table>

        </div>
      </div>
      <!-- reservation is waiting for acceptance -->

      <!-- agent is waiting for new reservation -->
      <div class="panel panel-default agent-waiting" ng-show="reservation == null && task == null">
        <div class="panel-heading">
          <h4 class="panel-title">Waiting for new task ...</h4>
        </div>
      </div>
      <!-- agent is waiting for new reservation -->

      <!-- agent is working on a task -->
      <div class="panel panel-default agent-task" ng-show="task != null"> 

        <div class="panel-heading">

          <button ng-show="task != null"  class="btn btn-primary complete-task" ng-click="complete()">Complete Task</button>

        </div>

        <div class="panel-body">
            <div class="description">{{task.attributes.title}} from 
              <span ng-show="!task.attributes.nameIsPhoneNumber">{{task.attributes.name}}</span>
              
              <a href="#" ng-click="callPhoneNumber('{{task.attributes.name}}')" ng-show="task.attributes.nameIsPhoneNumber">{{task.attributes.name}}</a>
            </div>
            {{task.attributes.text}}
        </div>

        <!-- video -->
        <section class="agent-video-canvas" id="remote-media" ng-controller="VideoController" ng-cloak>
        </section>
        <!-- video -->

        <!-- chat -->
        <section ng-show="session.channelSid" class="chat-controller" ng-controller="ChatController" ng-cloak>
          
           <div class="load-indicator" ng-show="session.isLoading">
              <i class="fa fa-refresh fa-spin"></i>
           </div>

            <div ng-show="session.isInitialized">

            <div class="chat-canvas" scroll-glue>

              <ul class="message-list" >

                <li ng-class="{'me': message.author == session.identity}" class="message" ng-repeat="message in messages">

                  <div>

                    <div class="body">
                      <div class="needle"></div>
                      <p dynamic="message.body">{{message.body}}</p>
                    </div>
                    <div class="footer">
                      <div class="author">{{message.author}}</div>
                      <div class="time"><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;{{message.timestamp | time}}</div>
                    </div>

                  </div>

                </li>

              </ul>
              <div id="bottom"></div>

            </div>

            <div class="typing-notification"><span>{{typingNotification}}</span></div>

            <form class="chat-message-form form-horizontal" name="chatMessageForm">
              <div class="form-group">
                <div class="col-xs-8">
                  <input ng-model="message" ng-model-options="{ debounce: 250 }" ng-required="true" autocomplete="off" ng-focus="focused()" name="text" type="text" class="form-control" placeholder="say something">
                </div>
                <div class="col-xs-4">
                  <button ng-disabled="chatMessageForm.$invalid || chatMessageForm.$pristine" class="btn btn-primary" ng-click="send()">Send</button>
                </div>
              </div>
            </form>

          </div>  

        </section>
        <!-- chat -->

      </div>
      <!-- agent is working on a task -->

	<!-- group chat -->
	<section id="group-chat">
		<div id="tlkio" data-channel="agent-chat" data-theme="theme--minimal" data-nickname="{{worker.friendlyName}}" style="width:100%;height:350px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>
	</section>

    </div>
     
    <section ng-controller="PhoneController" ng-cloak class="phone-controller" >

      <input style="font-size:2em; padding-left:10px;" ng-show="isActive == false" ng-model="phoneNumber" type="text" name="phoneNumber" placeholder="+.." />
      <div class="phone-number" style="font-size:2em; padding-left:10px" ng-if="isActive == true" />{{phoneNumber}}</div>

      <div class="keypad">

        <div ng-click="addDigit('1')" class="digit">1</div>
        <div ng-click="addDigit('2')" class="digit">2</div>
        <div ng-click="addDigit('3')" class="digit">3</div>

        <div ng-click="addDigit('4')" class="digit">4</div>
        <div ng-click="addDigit('5')" class="digit">5</div>
        <div ng-click="addDigit('6')" class="digit">6</div>

        <div ng-click="addDigit('7')" class="digit">7</div>
        <div ng-click="addDigit('8')" class="digit">8</div>
        <div ng-click="addDigit('9')" class="digit">9</div>

        <div ng-click="addDigit('*')"class="digit">*</div>
        <div ng-click="addDigit('0')" class="digit">0</div>
        <div ng-click="addDigit('#')" class="digit">#</div>

      </div>

      <button class="button-call" ng-if="isActive == false" ng-click="call(phoneNumber)">CALL</button>
      <button class="button-hangup" ng-if="isActive == true" ng-click="hangup()">HANGUP</button>
      <span class="status">Status: {{status}}</span>
      <span ng-if="error != null" class="status">Error: {{error}}</span>
    </section>

    </div>

   </div>

</section>

  <div>
    <h5>Links:</h5>
    <p><a href="#" target="_blank">Volunteer Form</a> | 
    <a href="#" target="_blank">Work Crew Request Form</a> | 
    <a href="#" target="_blank">Resources Info Sheet</a></p>
  </div>

</div>

  <script type="text/javascript" src="//media.twiliocdn.com/sdk/js/client/v1.4/twilio.min.js"></script>
  <script type="text/javascript" src="//media.twiliocdn.com/taskrouter/js/v1.9.3/taskrouter.min.js"></script>
  <script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.js"></script>
  <script src="https://media.twiliocdn.com/sdk/rtc/js/ip-messaging/v0.10/twilio-ip-messaging.js"></script>
  <script src="//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>
  <script src="/scripts/angular.min.js"></script>
  <script src="/scripts/angular-messages.min.js"></script><commit_msg>Add Instructions link and adjust chat widget<commit_after><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>FADH Call Center - Call Agent Interface</title>

  <link rel="stylesheet" href="/styles/default.css" type="text/css" />
  <link rel="stylesheet" href="/styles/bootstrap.css" type="text/css" />
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
      type="text/css" rel="stylesheet" />

</head>

<body ng-app="callcenterApplication" ng-controller="WorkflowController" data-ng-init="init()">

<div ng-show="UI.warning.browser" class="panel panel-default ui-warning" ng-cloak>{{UI.warning.browser}}</div>
<div ng-show="UI.warning.worker" class="panel panel-default ui-warning" ng-cloak>{{UI.warning.worker}}</div>

<div class="container" style="width:860px">

  <section class="workflow-controller" ng-cloak>

    <div class="panel panel-default">

      <div class="panel-body">

        <div class="logout"><span ng-click="logout()">logout</span></div> 
        <h3 class="name" class="page-header">{{worker.friendlyName}}&#39;s Call Agent Interface</h3>
        <h4>Friendswood Area Disaster Help</h4>

        <div>Status:&nbsp;<span style="font-size:1em" ng-class="{'label-success': worker.activityName == 'Idle', 'label-danger': worker.activityName == 'Busy', 'label-default': worker.activityName == 'Offline', 'label-warning': worker.activityName == 'Reserved'}" class="label">{{worker.activityName}}</span></div>

      <div class="reservations">

      <!-- reservation is waiting for acceptance -->
      <div class="panel panel-default agent-reservation" ng-show="reservation != null">
        <div class="panel-heading">
          <h3 class="panel-title">Reservation</h3>
        </div>
        <div class="panel-body">

          <table>
          <tr>
            <td>
             <div class="title">{{reservation.task.attributes.title}} from {{reservation.task.attributes.name}}</div>
             <div class="timer" ng-class='{"invisible": !reservationCounter}'>created {{ reservationCounter | TaskWaitingTime }} ago</div>
             </td>
            <td class="accept-panel"><button ng-click="acceptReservation(reservation)">Accept</button></td>
          </tr>
          </table>

        </div>
      </div>
      <!-- reservation is waiting for acceptance -->

      <!-- agent is waiting for new reservation -->
      <div class="panel panel-default agent-waiting" ng-show="reservation == null && task == null">
        <div class="panel-heading">
          <h4 class="panel-title">Waiting for new task ...</h4>
        </div>
      </div>
      <!-- agent is waiting for new reservation -->

      <!-- agent is working on a task -->
      <div class="panel panel-default agent-task" ng-show="task != null"> 

        <div class="panel-heading">

          <button ng-show="task != null"  class="btn btn-primary complete-task" ng-click="complete()">Complete Task</button>

        </div>

        <div class="panel-body">
            <div class="description">{{task.attributes.title}} from 
              <span ng-show="!task.attributes.nameIsPhoneNumber">{{task.attributes.name}}</span>
              
              <a href="#" ng-click="callPhoneNumber('{{task.attributes.name}}')" ng-show="task.attributes.nameIsPhoneNumber">{{task.attributes.name}}</a>
            </div>
            {{task.attributes.text}}
        </div>

        <!-- video -->
        <section class="agent-video-canvas" id="remote-media" ng-controller="VideoController" ng-cloak>
        </section>
        <!-- video -->

        <!-- chat -->
        <section ng-show="session.channelSid" class="chat-controller" ng-controller="ChatController" ng-cloak>
          
           <div class="load-indicator" ng-show="session.isLoading">
              <i class="fa fa-refresh fa-spin"></i>
           </div>

            <div ng-show="session.isInitialized">

            <div class="chat-canvas" scroll-glue>

              <ul class="message-list" >

                <li ng-class="{'me': message.author == session.identity}" class="message" ng-repeat="message in messages">

                  <div>

                    <div class="body">
                      <div class="needle"></div>
                      <p dynamic="message.body">{{message.body}}</p>
                    </div>
                    <div class="footer">
                      <div class="author">{{message.author}}</div>
                      <div class="time"><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;{{message.timestamp | time}}</div>
                    </div>

                  </div>

                </li>

              </ul>
              <div id="bottom"></div>

            </div>

            <div class="typing-notification"><span>{{typingNotification}}</span></div>

            <form class="chat-message-form form-horizontal" name="chatMessageForm">
              <div class="form-group">
                <div class="col-xs-8">
                  <input ng-model="message" ng-model-options="{ debounce: 250 }" ng-required="true" autocomplete="off" ng-focus="focused()" name="text" type="text" class="form-control" placeholder="say something">
                </div>
                <div class="col-xs-4">
                  <button ng-disabled="chatMessageForm.$invalid || chatMessageForm.$pristine" class="btn btn-primary" ng-click="send()">Send</button>
                </div>
              </div>
            </form>

          </div>  

        </section>
        <!-- chat -->

      </div>
      <!-- agent is working on a task -->

	<!-- group chat -->
	<section id="group-chat">
		<div id="tlkio" data-channel="agent-chat" data-theme="theme--minimal" style="width:100%;height:350px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>
	</section>

    </div>
     
    <section ng-controller="PhoneController" ng-cloak class="phone-controller" >

      <input style="font-size:2em; padding-left:10px;" ng-show="isActive == false" ng-model="phoneNumber" type="text" name="phoneNumber" placeholder="+.." />
      <div class="phone-number" style="font-size:2em; padding-left:10px" ng-if="isActive == true" />{{phoneNumber}}</div>

      <div class="keypad">

        <div ng-click="addDigit('1')" class="digit">1</div>
        <div ng-click="addDigit('2')" class="digit">2</div>
        <div ng-click="addDigit('3')" class="digit">3</div>

        <div ng-click="addDigit('4')" class="digit">4</div>
        <div ng-click="addDigit('5')" class="digit">5</div>
        <div ng-click="addDigit('6')" class="digit">6</div>

        <div ng-click="addDigit('7')" class="digit">7</div>
        <div ng-click="addDigit('8')" class="digit">8</div>
        <div ng-click="addDigit('9')" class="digit">9</div>

        <div ng-click="addDigit('*')"class="digit">*</div>
        <div ng-click="addDigit('0')" class="digit">0</div>
        <div ng-click="addDigit('#')" class="digit">#</div>

      </div>

      <button class="button-call" ng-if="isActive == false" ng-click="call(phoneNumber)">CALL</button>
      <button class="button-hangup" ng-if="isActive == true" ng-click="hangup()">HANGUP</button>
      <span class="status">Status: {{status}}</span>
      <span ng-if="error != null" class="status">Error: {{error}}</span>
    </section>

    </div>

   </div>

</section>

  <div>
    <h5>Links:</h5>
    <p><a href="https://docs.google.com/document/d/1wUo3SzGq4B-L6V1LKlFiJ1ZS4uWAkaijjqbaw1suWJ0/edit?usp=sharing" target="_blank">Instructions</a> |
    <a href="https://goo.gl/forms/c11BNaBv8GzC21em2" target="_blank">Volunteer Form</a> |
    <a href="#" target="_blank">Work Crew Request Form</a> | 
    <a href="#" target="_blank">Resources Info Sheet</a></p>
  </div>

</div>

  <script type="text/javascript" src="//media.twiliocdn.com/sdk/js/client/v1.4/twilio.min.js"></script>
  <script type="text/javascript" src="//media.twiliocdn.com/taskrouter/js/v1.9.3/taskrouter.min.js"></script>
  <script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.js"></script>
  <script src="https://media.twiliocdn.com/sdk/rtc/js/ip-messaging/v0.10/twilio-ip-messaging.js"></script>
  <script src="//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>
  <script src="/scripts/angular.min.js"></script>
  <script src="/scripts/angular-messages.min.js"></script>
{'fraction_non_alphanumeric': 0.19740416540899486, 'fraction_numerical': 0.009115605191669183, 'mean_word_length': 2.736129905277402, 'pattern_counts': {'":': 2, '<': 425, '<?xml version=': 0, '>': 425, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4018636', 'n_tokens_mistral': 5384, 'n_tokens_neox': 5077, 'n_words': 869}