Nibis/web/js/togetherjs/interface.html

<% /*
   This is basically all the markup and interface for TogetherJS.
   Note all links should be like http://localhost:8080/togetherjs/*
   these links are rewritten with the location where TogetherJS was deployed.

   This file is inlined into togetherjs/templates.js
*/ %>
<div id="togetherjs-container" class="togetherjs">

  <!-- This is the main set of buttons: -->
  <div id="togetherjs-dock" class="togetherjs-dock-right">
    <div id="togetherjs-dock-anchor" title="{{ gettext('Move the dock') }}">
      <span id="togetherjs-dock-anchor-horizontal">
        <img src="http://localhost:8080/togetherjs/images/icn-handle-circle@2x.png" alt="drag">
      </span>
      <span id="togetherjs-dock-anchor-vertical">
        <img src="http://localhost:8080/togetherjs/images/icn-handle-circle@2x.png" alt="drag">
      </span>
    </div>
    <div id="togetherjs-buttons">
      <div style="display: none">
        <button id="togetherjs-template-dock-person" class="togetherjs-button togetherjs-dock-person">
          <div class="togetherjs-tooltip togetherjs-dock-person-tooltip">
            <span class="togetherjs-person-name"></span>
            <span class="togetherjs-person-tooltip-arrow-r"></span>
          </div>
          <div class="togetherjs-person togetherjs-person-status-overlay"></div>
        </button>
      </div>
      <button id="togetherjs-profile-button" class="togetherjs-button" title="{{ gettext('This is you') }}">
        <div class="togetherjs-person togetherjs-person-self"></div>
        <div id="togetherjs-profile-arrow"></div>
      </button>
      <button id="togetherjs-share-button" class="togetherjs-button" title="{{ gettext('Add a friend') }}"></button>
      <button id="togetherjs-audio-button" class="togetherjs-button" title="{{ gettext('Turn on microphone')}}">
        <span id="togetherjs-audio-unavailable" class="togetherjs-audio-set" data-toggles=".togetherjs-audio-set">
        </span>
        <span id="togetherjs-audio-ready" class="togetherjs-audio-set" data-toggles=".togetherjs-audio-set" style="display: none">
        </span>
        <span id="togetherjs-audio-outgoing" class="togetherjs-audio-set" data-toggles=".togetherjs-audio-set" style="display: none">
        </span>
        <span id="togetherjs-audio-incoming" class="togetherjs-audio-set" data-toggles=".togetherjs-audio-set" style="display: none">
        </span>
        <span id="togetherjs-audio-active" class="togetherjs-audio-set" data-toggles=".togetherjs-audio-set" style="display: none">
        </span>
        <span id="togetherjs-audio-muted" class="togetherjs-audio-set" data-toggles=".togetherjs-audio-set" style="display: none">
        </span>
        <span id="togetherjs-audio-error" class="togetherjs-audio-set" data-toggles=".togetherjs-audio-set" style="display: none">
        </span>
      </button>
      <button id="togetherjs-chat-button" class="togetherjs-button" title="{{ gettext('Chat') }}"></button>
      <div id="togetherjs-dock-participants"></div>
    </div>
  </div>

  <!-- The window for editing the avatar: -->
  <div id="togetherjs-avatar-edit" class="togetherjs-modal"
       style="display: none">
    <header> {{ gettext('Update avatar') }} </header>
    <section>
      <div class="togetherjs-avatar-preview togetherjs-person togetherjs-person-self"></div>
      <div id="togetherjs-avatar-buttons">
        <input type="file" class="togetherjs-upload-avatar">
        <!--<button id="togetherjs-upload-avatar" class="togetherjs-primary">Upload a picture</button>-->
        <!--<button id="togetherjs-camera-avatar" class="togetherjs-default">Take a picture</button>-->
      </div>
    </section>
    <section class="togetherjs-buttons">
      <button class="togetherjs-cancel togetherjs-dismiss">{{ gettext('Cancel') }}</button>
      <span class="togetherjs-alt-text">{{ gettext('or') }}</span>
      <button class="togetherjs-avatar-save togetherjs-primary">{{ gettext('Save') }}</button>
    </section>
  </div>

  <!-- The window for sharing the link: -->
  <div id="togetherjs-share" class="togetherjs-window"
       data-bind-to="#togetherjs-share-button" style="display: none">
    <header> {{ gettext('Invite a friend') }} </header>
    <section>
      <div class="togetherjs-not-mobile">
        <p>{{ gettext('Copy and paste this link over IM or email:') }}</p>
        <input type="text" class="togetherjs-share-link">
      </div>
      <div class="togetherjs-only-mobile">
        <p>{{ gettext('Copy and paste this link over IM or email:') }}</p>
        <input type="text" class="togetherjs-share-link">
        <!-- <a class="togetherjs-share-link" href="#">Press your thumb here.</a> -->
      </div>
    </section>
  </div>

  <!-- Participant Full List view template: -->
  <div id="togetherjs-participantlist" class="togetherjs-window"
       data-bind-to="#togetherjs-participantlist-button" style="display: none">
    <header> {{ gettext('Participants') }} </header>
    <section>
      <div class="togetherjs-not-mobile">
        <ul>
          <li id="togetherjs-participant-item">
            <img class="togetherjs-person togetherjs-person-small" src="http://localhost:8080/togetherjs/images/btn-menu-change-avatar.png">
            <span class="tj-name togetherjs-person-name">NAME</span>
            <span class="tj-status">&#9679;</span>
            <p class="tj-urllocation">{{ gettext('Currently at:') }} <a class="togetherjs-person-url togetherjs-person-url-title" href="">http://www.location.comwww.location.comwww.location.comasdfsafd</a></p>
            <p class="tj-follow">{{ gettext('Follow:') }}
              <label class="togetherjs-follow-question" for="togetherjs-person-status-follow">
                <input type="checkbox" id="togetherjs-person-status-follow">
              </label>
            </p>
            <section class="togetherjs-buttons">
              <!-- Displayed when the peer is at a different URL: -->
              <div class="togetherjs-different-url">
                <a class="togetherjs-nudge togetherjs-default tj-btn-sm">{{ gettext('Nudge them') }}</a>
                <a href="#" class="togetherjs-follow togetherjs-person-url togetherjs-primary tj-btn-sm">{{ gettext('Join them') }}</a>
              </div>
              <!-- Displayed when the peer is at your same URL: -->
              <div class="togetherjs-same-url" style="display: none">
                <span class="togetherjs-person-name"></span> {{ gettext('is on the same page as you.')}}
              </div>
            </section>
          </li>
        </ul>
    </section>
  </div>

  <!-- Participant detail template: -->
  <div id="togetherjs-template-participant-window" class="togetherjs-window" style="display: none">
    <header><div class="togetherjs-person togetherjs-person-small"></div><span class="togetherjs-person-name"></span></header>

    <section class="togetherjs-participant-window-main">
      <p class="togetherjs-participant-window-row"><strong>{{ gettext('Role:') }}</strong>
        <span class="togetherjs-person-role"></span>
      </p>

      <p class="togetherjs-participant-window-row"><strong>{{ gettext('Currently at:') }}</strong>
        <a class="togetherjs-person-url togetherjs-person-url-title"></a>
      </p>

      <p class="togetherjs-participant-window-row"><strong>{{ gettext('Status:') }}</strong>
        <span class="togetherjs-person-status"></span>
      </p>

      <p class="togetherjs-participant-window-row"><strong class="togetherjs-float-left">{{ gettext('Follow this participant:') }}</strong>
        <label class="togetherjs-follow-question togetherjs-float-left" for="togetherjs-person-status-follow">
          <input type="checkbox" id="togetherjs-person-status-follow">
        </label>
        <span class="togetherjs-clear"></span>
      </p>

    </section>

    <section class="togetherjs-buttons">
      <!-- Displayed when the peer is at a different URL: -->
      <div class="togetherjs-different-url">
        <a class="togetherjs-nudge togetherjs-default">{{ gettext('Nudge them') }}</a>
        <a href="#" class="togetherjs-follow togetherjs-person-url togetherjs-primary">{{ gettext('Join them') }}</a>
      </div>
      <!-- Displayed when the peer is at your same URL: -->
      <div class="togetherjs-same-url" style="display: none">
        <span class="togetherjs-person-name"></span> {{ gettext('is on the same page as you.') }}
      </div>
    </section>
  </div>

  <!-- The chat screen: -->
  <div id="togetherjs-chat" class="togetherjs-window" data-bind-to="#togetherjs-chat-button"
       style="display: none">
    <header> {{ gettext('Chat') }} </header>
    <section class="togetherjs-subtitle">
      <div id="togetherjs-chat-participants" data-toggles="#togetherjs-chat-no-participants" style="display: none">
        <span id="togetherjs-chat-participant-list"></span>
        &amp; {{ gettext('You') }}
      </div>
      <div id="togetherjs-chat-no-participants" data-toggles="#togetherjs-chat-participants">
        {{ gettext('No one else is here.') }}
      </div>
    </section>

    <div style="display: none">

      <!-- Template for one message: -->
      <div id="togetherjs-template-chat-message" class="togetherjs-chat-item togetherjs-chat-message">
        <div class="togetherjs-person"></div>
        <div class="togetherjs-timestamp"><span class="togetherjs-time">HH:MM</span> <span class="togetherjs-ampm">AM/PM</span></div>
        <div class="togetherjs-person-name-abbrev"></div>
        <div class="togetherjs-chat-content togetherjs-sub-content"></div>
      </div>

      <!-- Template for when a person leaves: -->
      <div id="togetherjs-template-chat-left" class="togetherjs-chat-item togetherjs-chat-left-item">
        <div class="togetherjs-person"></div>
        <div class="togetherjs-ifnot-declinedJoin">
          <div class="togetherjs-inline-text"><span class="togetherjs-person-name"></span> {{ gettext('left the session.') }}</div>
        </div>
        <div class="togetherjs-if-declinedJoin">
          <div class="togetherjs-inline-text"><span class="togetherjs-person-name"></span> {{ gettext('declined to join the session.')}}</div>
        </div>
        <div class="togetherjs-clear"></div>
      </div>

      <!-- Template when a person joins the session: -->
      <div id="togetherjs-template-chat-joined" class="togetherjs-chat-item togetherjs-chat-join-item">
        <div class="togetherjs-person"></div>
        <div class="togetherjs-inline-text"><span class="togetherjs-person-name"></span> {{ gettext('joined the session.') }}</div>
        <div class="togetherjs-clear"></div>
      </div>

      <!-- Template for system-derived messages: -->
      <div id="togetherjs-template-chat-system" class="togetherjs-chat-item">
        <span class="togetherjs-chat-content togetherjs-sub-content"></span>
      </div>

      <!-- Template when a person joins the session: -->
      <!-- <div id="togetherjs-template-chat-joined" class="togetherjs-chat-item togetherjs-chat-join-item">
        <div class="togetherjs-person"></div>
        <div class="togetherjs-inline-text"><span class="togetherjs-person-name"></span> joined the session.</div>
        <div class="togetherjs-clear"></div>
      </div> -->

      <!-- Template for when someone goes to a new URL: -->
      <div id="togetherjs-template-url-change" class="togetherjs-chat-item togetherjs-chat-url-change">
        <div class="togetherjs-person"></div>
        <div class="togetherjs-inline-text">
          <div class="togetherjs-if-sameUrl">
            <span class="togetherjs-person-name"></span>
            {{ gettext('is on the same page as you.') }}
          </div>
          <div class="togetherjs-ifnot-sameUrl">
            <span class="togetherjs-person-name"></span>
            {{ gettext('has gone to:') }} <a href="#" class="togetherjs-person-url togetherjs-person-url-title" target="_self"></a>
            <section class="togetherjs-buttons togetherjs-buttons-notification-diff-url">
              <!-- Displayed when the peer is at a different URL: -->
              <div class="togetherjs-different-url togetherjs-notification-diff-url">
                <a class="togetherjs-nudge togetherjs-default">{{ gettext('Nudge them') }}</a>
                <a href="#" class="togetherjs-follow togetherjs-person-url togetherjs-primary">{{ gettext('Join them') }}</a>
              </div>
            </section>

            <!-- <div>
              <a class="togetherjs-nudge togetherjs-secondary">Nudge them</a>
              <a href="" class="togetherjs-person-url togetherjs-follow togetherjs-primary">Join them</a>
            </div> -->

          </div>
        </div>
        <div class="togetherjs-clear"></div>
      </div>
    </div>

    <section id="togetherjs-chat-messages">
      <!-- FIX ME// need to have some dialogue that says something like - There are no chats yet! -->
    </section>
    <section id="togetherjs-chat-input-box">
      <textarea id="togetherjs-chat-input" placeholder="{{ gettext('Type your message here') }}"></textarea>
    </section>
  </div>

  <!-- this is a kind of warning popped up when you (successfully) start RTC: -->
  <div id="togetherjs-rtc-info" class="togetherjs-window"
       data-bind-to="#togetherjs-audio-button"
       style="display: none">

    <header> {{ gettext('Audio Chat') }} </header>
    <section>
      <p>
        {{ gettext('Activate your <strong>browser microphone</strong> near your URL bar above.') }}
      </p>
      <p>
        {{ gettext('Talking on your microphone through your web browser is an experimental feature.') }}
      </p>
      <p>
        {{ gettext('Read more about Audio Chat') }} <a href="https://github.com/mozilla/togetherjs/wiki/About-Audio-Chat-and-WebRTC" target="_blank">{{ gettext('here') }}</a>.
      </p>
    </section>

    <section class="togetherjs-buttons">
      <label for="togetherjs-rtc-info-dismiss" style="display: inline;">
        <input class="togetherjs-dont-show-again" id="togetherjs-rtc-info-dismiss" type="checkbox">
        {{ gettext('Don\'t show again.') }}
      </label>
      <button class="togetherjs-default togetherjs-dismiss" type="button">{{ gettext('Close') }}</button>
    </section>
  </div>

  <!-- this is popped up when you hit the audio button, but RTC isn't
  supported: -->
  <div id="togetherjs-rtc-not-supported" class="togetherjs-window"
       data-bind-to="#togetherjs-audio-button"
       style="display: none">
    <header> {{ gettext('Audio Chat') }} </header>

    <section>
      <p>{{ gettext('Audio chat requires you to use a <a href=\'https://github.com/mozilla/togetherjs/wiki/About-Audio-Chat-and-WebRTC\' target=\'_blank\'>newer browser</a>!') }}</p>
      <p>
        {{ gettext('Live audio chat requires a newer (or different) browser than you\'re using.') }}
      </p>
      <p>
        {{ gettext('See <a href=\'https://github.com/mozilla/togetherjs/wiki/About-Audio-Chat-and-WebRTC\' target=\'_blank\'>this page</a>for more information and a list of supported browsers.') }}
      </p>
    </section>

    <section class="togetherjs-buttons">
      <div class="togetherjs-rtc-dialog-btn">
        <button class="togetherjs-default togetherjs-dismiss" type="button">{{ gettext('Close') }}</button>
      </div>
    </section>
  </div>

  <!-- The popup when a chat message comes in and the #togetherjs-chat window isn't open -->
  <div id="togetherjs-chat-notifier" class="togetherjs-notification"
       data-bind-to="#togetherjs-chat-button"
       style="display: none">
    <img src="http://localhost:8080/togetherjs/images/notification-togetherjs-logo.png" class="togetherjs-notification-logo" alt="">
    <img src="http://localhost:8080/togetherjs/images/notification-btn-close.png" class="togetherjs-notification-closebtn togetherjs-dismiss" alt="[close]">
    <section id="togetherjs-chat-notifier-message">
    </section>
  </div>

  <!-- The menu when you click on the profile: -->
  <div id="togetherjs-menu" class="togetherjs-menu" style="display: none">
    <div class="togetherjs-menu-item togetherjs-menu-disabled" id="togetherjs-menu-profile">
      <img id="togetherjs-menu-avatar">
      <span class="togetherjs-person-name-self" id="togetherjs-self-name-display" data-toggles="#togetherjs-menu .togetherjs-self-name">[nickname]</span>
      <input class="togetherjs-self-name" type="text" data-toggles="#togetherjs-self-name-display" style="display: none" placeholder="{{ gettext("Enter your name") }}">
    </div>
    <div class="togetherjs-menu-hr-avatar"></div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-update-name"><img src="http://localhost:8080/togetherjs/images/button-pencil.png" alt=""> {{ gettext('Update your name') }}</div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-update-avatar"><img src="http://localhost:8080/togetherjs/images/btn-menu-change-avatar.png" alt=""> {{ gettext('Change avatar') }}</div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-update-color"><span class="togetherjs-person-bgcolor-self"></span> {{ gettext('Pick profile color') }}</div>
    <div class="togetherjs-hr"></div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-help">{{ gettext('Help') }}</div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-feedback">{{ gettext('Feedback') }}</div>
    <div id="togetherjs-invite" style="display: none">
      <div class="togetherjs-hr"></div>
      <div id="togetherjs-invite-users"></div>
      <div class="togetherjs-menu-item" id="togetherjs-menu-refresh-invite">{{ gettext('Refresh users') }}</div>
      <div class="togetherjs-menu-item" id="togetherjs-menu-invite-anyone">{{ gettext('Invite anyone') }}</div>
    </div>
    <div class="togetherjs-hr"></div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-end"><img src="http://localhost:8080/togetherjs/images/button-end-session.png" alt=""> {{ gettext('End') }} <span class="togetherjs-tool-name">{{ gettext('TogetherJS') }}</span></div>
  </div>

  <!-- template for one person in the invite-users list -->
  <div style="display: none">
    <div id="togetherjs-template-invite-user-item" class="togetherjs-menu-item">
      <!-- FIXME: should include avatar in some way -->
      <span class="togetherjs-person-name"></span>
    </div>
  </div>

  <!-- A window version of #togetherjs-menu, for use on mobile -->
  <div id="togetherjs-menu-window" class="togetherjs-window" style="display: none">
    <header>{{ gettext('Settings and Profile') }}</header>
    <section>
    <div class="togetherjs-menu-item">
      <img class="togetherjs-menu-avatar">
      <span class="togetherjs-person-name-self" id="togetherjs-self-name-display"></span>
    </div>
    <div class="togetherjs-menu-hr-avatar"></div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-update-name-button"><img src="http://localhost:8080/togetherjs/images/button-pencil.png" alt=""> {{ gettext('Update your name') }}</div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-update-avatar-button"><img src="http://localhost:8080/togetherjs/images/btn-menu-change-avatar.png" alt=""> {{ gettext('Change avatar') }}</div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-update-color-button"><span class="togetherjs-person-bgcolor-self"></span> {{ gettext('Pick profile color') }}</div>
    <div class="togetherjs-hr"></div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-help-button">{{ gettext('Help') }}</div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-feedback-button">{{ gettext('Feedback') }}</div>
    <div class="togetherjs-hr"></div>
    <div class="togetherjs-menu-item" id="togetherjs-menu-end-button"><img src="http://localhost:8080/togetherjs/images/button-end-session.png" alt=""> {{ gettext('End TOOL_NAME') }}</div>
    </section>
    <section class="togetherjs-buttons">
      <button class="togetherjs-dismiss togetherjs-primary">{{ gettext('OK') }}</button>
    </section>
  </div>

  <!-- The name editor, for use on mobile -->
  <div id="togetherjs-edit-name-window" class="togetherjs-window" style="display: none">
    <header>{{ gettext('Update Name') }}</header>
    <section>
      <div>
        <input class="togetherjs-self-name" type="text" placeholder="{{ gettext('Enter your name') }}">
      </div>
    </section>
    <section class="togetherjs-buttons">
      <button class="togetherjs-dismiss togetherjs-primary">{{ gettext('OK') }}</button>
    </section>
  </div>

  <div class="togetherjs-menu" id="togetherjs-pick-color" style="display: none">
    <div class="togetherjs-triangle-up"><img src="http://localhost:8080/togetherjs/images/icn-triangle-up.png"></div>
    <div style="display: none">
      <div id="togetherjs-template-swatch" class="togetherjs-swatch">
      </div>
    </div>
  </div>

  <!-- Invisible elements that handle the RTC audio: -->
  <audio id="togetherjs-audio-element"></audio>
  <audio id="togetherjs-local-audio" muted="true" volume="0.3"></audio>
  <audio id="togetherjs-notification" src="http://localhost:8080/togetherjs/images/notification.ogg"></audio>

  <!-- The intro screen for someone who joins a session the first time: -->
  <div id="togetherjs-intro" class="togetherjs-modal" style="display: none">
    <header>{{ gettext('Join TOOL_NAME session?') }}</header>
    <section>
      <p>{{ gettext("Your friend has asked you to join their TOOL_SITE_LINK browser session to collaborate in real-time!")}}</p>
      <p>{{ gettext("Would you like to join their session?") }}</p>
    </section>

    <section class="togetherjs-buttons">
      <button class="togetherjs-destructive togetherjs-modal-dont-join">{{ gettext( "No, don't join" ) }}</button>
      <button class="togetherjs-primary togetherjs-dismiss">{{ gettext( "Yes, join session" ) }}</button>
    </section>
  </div>

  <!-- Shown when a web browser is completely incapable of running TogetherJS: -->
  <div id="togetherjs-browser-broken" class="togetherjs-modal" style="display: none">
    <header> {{ gettext('Sorry') }} </header>

    <section>
      <p>
        {{ gettext("We're sorry, TOOL_NAME doesn't work with this browser.  Please <a href='https://github.com/mozilla/togetherjs/wiki/Supported-Browsers#supported-browsers'>upgrade to a supported browser</a> to try TOOL_NAME." ) }}
      </p>

      <p id="togetherjs-browser-broken-is-ie" style="display: none">
        {{ gettext('We need your help fixing TogetherJS on Internet Explorer!  Here are a list of IE <a href=\"https://github.com/mozilla/togetherjs/issues?labels=IE&milestone=&page=1&state=open\" target=\"_blank\">GitHub issues</a> we need fixed that you can work on.') }}
        {{ gettext("Internet Explorer <a href=\"https://github.com/mozilla/togetherjs/wiki/Supported-Browsers#internet-explorer\">is currently not supported</a>.  If you do want to try out TogetherJS, we'd suggest using Firefox or Chrome.") }}
      </p>
    </section>

    <section class="togetherjs-buttons">
      <button class="togetherjs-dismiss togetherjs-primary">{{ gettext('End TOOL_NAME') }}</button>
    </section>

  </div>

  <!-- Shown when the browser has WebSockets, but is IE (i.e., IE10) -->
  <div id="togetherjs-browser-unsupported" class="togetherjs-modal" style="display: none">
    <header> {{ gettext('Unsupported Browser') }} </header>

    <section>
      <p>
        {{ gettext('We need your help fixing TogetherJS on Internet Explorer!  Here are a list of IE <a href="https://github.com/mozilla/togetherjs/issues?labels=IE&milestone=&page=1&state=open" target="_blank">GitHub issues</a> we need fixed that you can work on.') }}
        {{ gettext("Internet Explorer <a href=\"https://github.com/mozilla/togetherjs/wiki/Supported-Browsers#internet-explorer\">is currently not supported</a>.  If you do want to try out TogetherJS, we'd suggest using Firefox or Chrome.") }}
      </p>

      <p>{{ gettext('You can continue to try to use TOOL_NAME, but you are likely to hit lots of bugs.  So be warned.') }}</p>

    </section>

    <section class="togetherjs-buttons">
      <button class="togetherjs-dismiss togetherjs-primary">{{ gettext('End TOOL_NAME') }}</button>
      <button class="togetherjs-dismiss togetherjs-secondary togetherjs-browser-unsupported-anyway">{{ gettext('Try TOOL_NAME Anyway') }}</button>
    </section>

  </div>

  <div id="togetherjs-confirm-end" class="togetherjs-modal" style="display: none">
    <header> {{ gettext('End session?') }} </header>
    <section>
      <p>
        {{ gettext("Are you sure you'd like to end your TOOL_NAME session?") }}
      </p>
    </section>
    <section class="togetherjs-buttons">
      <button class="togetherjs-cancel togetherjs-dismiss">{{ gettext('Cancel') }}</button>
      <span class="togetherjs-alt-text">{{ gettext('or') }}</span>
      <button id="togetherjs-end-session" class="togetherjs-destructive">{{ gettext('End session') }}</button>
    </section>
  </div>

  <div id="togetherjs-feedback-form" class="togetherjs-modal" style="display: none;">
    <header> {{ gettext('Feedback') }} </header>
    <iframe src="https://docs.google.com/a/mozilla.com/forms/d/1lVE7JyRo_tjakN0mLG1Cd9X9vseBX9wci153z9JcNEs/viewform?embedded=true" width="400" height="300" frameborder="0" marginheight="0" marginwidth="0">{{ gettext('Loading form...') }}</iframe>
    <!-- <p><button class="togetherjs-modal-close">Close</button></p> -->
  </div>

  <div style="display: none">
    <!-- This is when you join a session and the other person has already changed to another URL: -->
    <div id="togetherjs-template-url-change" class="togetherjs-modal">
      <header> {{ gettext('Following to new URL...') }} </header>
      <section>
        <div class="togetherjs-person"></div>
        {{ gettext('Following') }}
        <span class="togetherjs-person-name"></span>
        {{ gettext( "to" ) }} <a href="" class="togetherjs-person-url togetherjs-person-url-title"></a>
      </section>
    </div>

    <!-- This is when someone invites you to their session: -->
    <div id="togetherjs-template-invite" class="togetherjs-chat-item">
      <div class="togetherjs-person"></div>
      <div>
        <span class="togetherjs-person-name"></span>
        {{ gettext('has invited') }} <strong class="togetherjs-if-forEveryone">{{ gettext('anyone') }}</strong>
        <strong class="togetherjs-ifnot-forEveryone">{{ gettext('you') }}</strong>
        {{ gettext( "to" ) }} <a href="" data-togetherjs-subattr-href="href" class="togetherjs-sub-hrefTitle" target="_blank"></a>
      </div>
    </div>

  </div>

  <!-- The pointer at the side of a window: -->
  <div id="togetherjs-window-pointer-right" style="display: none"></div>
  <div id="togetherjs-window-pointer-left" style="display: none"></div>

  <!-- The element that overlaps the background of the page during a modal dialog: -->
  <div id="togetherjs-modal-background" style="display: none"></div>

  <!-- Some miscellaneous templates -->
  <div style="display: none">

    <!-- This is the cursor: -->
    <div id="togetherjs-template-cursor" class="togetherjs-cursor togetherjs">
      <!-- Note: images/cursor.svg is a copy of this (for editing): -->
      <!-- crossbrowser svg dropshadow http://demosthenes.info/blog/600/Creating-a-True-CrossBrowser-Drop-Shadow- -->
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      	 width="15px" height="22.838px" viewBox="96.344 146.692 15 22.838" enable-background="new 96.344 146.692 15 22.838"
      	 xml:space="preserve">
      <path fill="#231F20" d="M98.984,146.692c2.167,1.322,1.624,6.067,3.773,7.298c-0.072-0.488,2.512-0.931,3.097,0
      	c0.503,0.337,1.104-0.846,2.653,0.443c0.555,0.593,3.258,2.179,1.001,8.851c-0.446,1.316,2.854,0.135,1.169,2.619
      	c-3.748,5.521-9.455,2.787-9.062,1.746c1.06-2.809-6.889-4.885-4.97-9.896c0.834-2.559,2.898,0.653,2.923,0.29
      	c-0.434-1.07-2.608-5.541-2.923-6.985C96.587,150.793,95.342,147.033,98.984,146.692z"/>
      </svg>
      <!-- <img class="togetherjs-cursor-img" src="http://localhost:8080/togetherjs/images/cursor.svg"> -->
      <span class="togetherjs-cursor-container">
        <span class="togetherjs-cursor-name"></span>
        <span style="display:none" class="togetherjs-cursor-typing" id="togetherjs-cursor-typebox">
          <span class="togetherjs-typing-ellipse-one">&#9679;</span><span class="togetherjs-typing-ellipse-two">&#9679;</span><span class="togetherjs-typing-ellipse-three">&#9679;</span>
        </span>
        <!-- Displayed when the cursor is below the screen: -->
        <span class="togetherjs-cursor-down">

        </span>
        <!-- Displayed when the cursor is above the screen: -->
        <span class="togetherjs-cursor-up">

        </span>
      </span>
    </div>

    <!-- This is the element that goes around focused form elements: -->
    <div id="togetherjs-template-focus">
      <div class="togetherjs-focus togetherjs-person-bordercolor"></div>
    </div>

    <!-- This is a click: -->
    <div id="togetherjs-template-click" class="togetherjs-click togetherjs">
    </div>
  </div>
</div>