<!doctype html>
<!--
  Material Design Lite
  Copyright 2015 Google Inc. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>Customer Interaction Services Client SDK - EventListeners Test Application</title>

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="images/android-desktop.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Material Design Lite">
  <link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
  <meta name="msapplication-TileColor" content="#3372DF">

  <link rel="shortcut icon" href="images/favicon.png">

  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
  <link rel="stylesheet" href="https://cdn.rawgit.com/CreativeIT/getmdl-select/master/getmdl-select.min.css">
  <link rel="stylesheet" href="src/styles.css">
</head>

<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Customer Interaction Services Client SDK - EventListeners Test Application</span>
      </div>
      <!-- Tabs -->
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
        <a href="#agent" class="mdl-layout__tab is-active">Agent View</a>
        <a href="#work" class="mdl-layout__tab hide">Work View</a>
        <a href="#team" class="mdl-layout__tab hide">Team View</a>
        <a href="#contacts" class="mdl-layout__tab hide">Contacts View</a>
      </div>
    </header>
    <main class="mdl-layout__content">
      <div class="mdl-layout__tab-panel is-active" id="agent">
        <section id="agent-card" class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <header
            class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">
            <i class="material-icons">play_circle_filled</i>
          </header>
          <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
            <div class="mdl-card__supporting-text">
              <h4><span id="agent-name">Agent</span> - <span id="agent-status">Deactivated</span></h4>
              <form id="activate-container" action="#">
                <div id="profile-container" class="mdl-textfield mdl-js-textfield hide">
                  <input class="mdl-textfield__input" type="text" id="profile" readonly tabIndex="-1" />
                  <label class="mdl-textfield__label" for="profile">Profile...</label>
                  <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="profile"></ul>
                </div>
                <div class="mdl-textfield mdl-js-textfield">
                  <input class="mdl-textfield__input" type="text" id="extension">
                  <label class="mdl-textfield__label" for="extension"></label>
                </div>
              </form>
              <!-- colored raised button with ripple -->
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
                id="agent-activate" disabled>
                Activate
              </button>
              <!-- colored raised button with ripple -->
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored hide"
                id="agent-deactivate">
                Deactivate
              </button>
              <!-- colored raised button with ripple -->
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored hide"
                id="agent-login">
                Login
              </button>
              <!-- colored raised button with ripple -->
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored hide"
                id="agent-goready">
                Go Ready
              </button>
              <!-- colored raised button with ripple -->
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored hide"
                id="agent-gonotready">
                Go Not Ready
              </button>
              <!-- colored raised button with ripple -->
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored hide"
                id="agent-logout">
                Log Out
              </button>
            </div>
          </div>
        </section>
        <section id="resource-card" class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp hide">
          <div class="mdl-card mdl-cell mdl-cell--12-col">
            <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing resources">
              <h4 class="mdl-cell mdl-cell--12-col">Resource Details</h4>
            </div>
          </div>
        </section>
      </div>

      <div class="mdl-layout__tab-panel" id="work">
        <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-color-text--white mdl-color--blue-400">
            <i class="material-icons">phone</i>
          </header>
          <div class="mdl-card mdl-cell mdl-cell--9-col-desktop">
            <div class="mdl-card mdl-shadow--2dp mdl-textfield--full-width">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Make an outbound call</h2>
              </div>
              <div class="mdl-card__supporting-text">
                <form id="interaction-container" action="#">
                  <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type="text" id="interaction-address">
                    <label class="mdl-textfield__label" for="interaction-address">Destination Address...</label>
                  </div>
                </form>
                <!-- colored raised button with ripple -->
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
                  id="start-interaction">
                  Start
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div class="mdl-layout__tab-panel" id="team">
        <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <div class="mdl-card mdl-cell mdl-cell--12-col">
            <div class="mdl-card__supporting-text">
              <h3>Team View</h3>
              <table id="team-view" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp mdl-textfield--full-width">
                <thead>
                  <tr>
                    <th class="mdl-data-table__cell--non-numeric mdl-textfield--full-width">Name</th>
                    <th class="mdl-data-table__cell--non-numeric">Role</th>
                    <th>Address</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </section>
      </div>

      <div class="mdl-layout__tab-panel" id="contacts">
        <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <div class="mdl-card mdl-cell mdl-cell--12-col">
            <div class="mdl-card__supporting-text">
              <h4>Contacts View</h4>
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="contactSearch">
                <label class="mdl-textfield__label" for="contactSearch">Search String</label>
              </div>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
                id="contact-search" disabled>
                Search
              </button>
              <table id="contacts-view"
                class="mdl-data-table mdl-js-data-table mdl-shadow--2dp mdl-textfield--full-width" disabled>
                <thead>
                  <tr>
                    <th class="mdl-data-table__cell--non-numeric">Name</th>
                    <th class="mdl-data-table__cell--non-numeric">Number</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </section>
      </div>
    </main>
    <footer class="mdl-mega-footer">
      <div class="mdl-mega-footer__middle-section">
        <h1 class="mdl-mega-footer__heading mdl-typography--text-center">©2019 Avaya Inc. All Rights Reserved.</h1>
      </div>
    </footer>
  </div>

  <dialog class="mdl-dialog transfer">
    <h4 class="mdl-dialog__title">Transfer to address?</h4>
    <div class="mdl-dialog__content">
      <form action="#">
        <div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="text">
          <label class="mdl-textfield__label">Transfer Address...</label>
        </div>
      </form>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button submit">Transfer</button>
      <button type="button" class="mdl-button close">Cancel</button>
    </div>
  </dialog>

  <dialog class="mdl-dialog consult">
    <h4 class="mdl-dialog__title">Consult address</h4>
    <div class="mdl-dialog__content">
      <form action="#">
        <div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="text">
          <label class="mdl-textfield__label">Consult Address...</label>
        </div>
      </form>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button submit">Consult</button>
      <button type="button" class="mdl-button close">Cancel</button>
    </div>
  </dialog>

  <div id="toast" class="mdl-js-snackbar mdl-snackbar mdl-color--orange-500">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>

  <script id="resourceTemplate" type="text/x-jsrender">
      <div id="resource-{{:channel.toLowerCase()}}" class="mdl-cell mdl-cell--3-col">
        <div class="section__circle-container mdl-cell mdl-cell--12-col">
          <div class="section__circle-container__circle mdl-color--grey"></div>
        </div>
        <div class="section__text mdl-cell mdl-cell--12-col">
          <h5><span class="capitalize">{{:channel.toLowerCase()}}</span> - <span class="state">Logged out</span></h5>
        </div>
      </div>
    </script>

  <script id="interactionTemplate" type="text/x-jsrender">
      <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp" id="{{:id}}">
        <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-color-text--white {{:~state(state)}}">
          <i class="material-icons">{{:~icon(channel)}}</i>
        </header>
        <div class="mdl-card mdl-cell mdl-cell--9-col-desktop">
          <div class="mdl-card mdl-shadow--2dp mdl-textfield--full-width">
            <div class="mdl-card__title">
              <h2 class="mdl-card__title-text">{{:~address(direction, originatingAddress, destinationAddress)}}</h2>
            </div>
            <div class="mdl-card__supporting-text">
              <div class="participants-panel hide"></div>
              <div class="chat-panel hide"></div>
              <div class="email-panel hide"></div>
            </div>
            <div class="mdl-card__actions mdl-card--border">
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canAccept}} hide{{/if}} accept">Accept</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canHold}} hide{{/if}} hold">Hold</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canUnhold}} hide{{/if}} unhold">Unhold</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canSingleStepTransfer}} hide{{/if}} transfer">Transfer</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canConsult}} hide{{/if}} consult">Consult</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canTransferComplete}} hide{{/if}} complete-transfer">Complete As Transfer</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canConferenceComplete}} hide{{/if}} complete-conference">Complete As Conference</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canEnd}} hide{{/if}} end">End</button>
            </div>
          </div>
        </div>
      </section>
    </script>

  <script id="interactionVideoTemplate" type="text/x-jsrender">
      <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp" id="{{:id}}">
        <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-color-text--white {{:~state(state)}}">
          <i class="material-icons">{{:~icon(channel)}}</i>
        </header>
        <div class="mdl-card mdl-cell mdl-cell--9-col-desktop">
          <div class="mdl-card mdl-shadow--2dp mdl-textfield--full-width">
            <div class="mdl-card__title">
              <h2 class="mdl-card__title-text">{{:~address(direction, originatingAddress, destinationAddress)}}</h2>
            </div>
            <div class="mdl-card__supporting-text">
                <div class="participants-panel hide"></div>
                <div class="media hide">
                    <!-- REMOTE VIDEO -->
                    <video class="media__block remote-video" src="" autoplay></video>
                    
                    <!-- REMOTE - NOT AVAILABLE MESSAGE -->
                    <div class="disabled-content-container remote-video-disabled hide">
                      <div class="content--disabled">
                        <i class="material-icons">videocam_off</i>
                        <p>Video stream not available</p>
                      </div>
                    </div>
                    
                    <div class="media--small">
                        <!-- LOCAL VIDEO -->
                        <video class="media__block local-video" src="" autoplay></video>
                        
                        <!-- LOCAL VIDEO DISABLED OVERLAY -->
                        <div class="media__block media__overlay local-video-disabled hide">
                          <i class="material-icons">videocam_off</i><br>
                          <span>Agent Video Disabled</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mdl-card__actions mdl-card--border">
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canAccept}} hide{{/if}} accept">Accept</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canHold}} hide{{/if}} hold">Hold</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canUnhold}} hide{{/if}} unhold">Unhold</button>
              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored{{if !capabilities.canEnd}} hide{{/if}} end">End</button>
            </div>
          </div>
        </div>
      </section>
    </script>

  <script id="participantTemplate" type="text/x-jsrender">
      <h2 class="mdl-card__title-text">Participants</h2>
      <ul class="demo-list-two mdl-list">
        {{for participants}}
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-icon">{{:~participantIcon(participantType, participantState)}}</i>
              <span>{{:participantName}}</span>
              <span class="mdl-list__item-sub-title">{{:participantAddress}}</span>
            </span>
          </li>
        {{/for}}
      </ul>
    </script>

  <script id="chatTemplate" type="text/x-jsrender">
      <h2 class="mdl-card__title-text">Active Chat</h2>
      <div class="chat-panel-content"></div>
      <form class="mdl-list__item" action="#">
        <span class="mdl-list__item-primary-content">
          <i class="material-icons mdl-list__item-icon">record_voice_over</i>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text">
            <label class="mdl-textfield__label"></label>
          </div>
        </span>
      </form>
      <div class="chat-panel-content-typing"></div>
    </script>

  <script id="chatMessageTemplate" type="text/x-jsrender">
      <ul class="demo-list-two mdl-list">
        {{for messages}}
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-icon">{{:~participantIcon(receivedFrom.participantType)}}</i>
              <span>{{:receivedFrom.participantName}}</span>
              <span class="mdl-list__item-sub-title">{{:body}}</span>
            </span>
          </li>
        {{/for}}
      </ul>
    </script>

  <script id="emailTemplate" type="text/x-jsrender">
      <h2 class="mdl-card__title-text">Email Content</h2>
      <div class="email-panel-content">
        {{:message.body}}
      </div>
    </script>

  <script id="memberTemplate" type="text/x-jsrender">
      <tr>
        <td class="mdl-data-table__cell--non-numeric">{{:displayName}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{:type}}</td>
        <td>{{:address}}</td>
      </tr>
    </script>

  <script id="contactTemplate" type="text/x-jsrender">
      <tr>
        <td class="mdl-data-table__cell--non-numeric">{{:displayName}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{:number}}</td>
      </tr>
    </script>

  <script type="text/javascript" src="libs/AvayaCustomerServices.js"></script>

  <script type="text/javascript" src="https://code.getmdl.io/1.2.1/material.min.js"></script>
  <script type="text/javascript"
    src="https://cdn.rawgit.com/CreativeIT/getmdl-select/1.1.0/getmdl-select.min.js"></script>
  <script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.82/jsrender.js"></script>

  <script type="text/javascript" src="src/app.js"></script>

</body>

</html>