.modal-header#videModal
  .fs12.pull-left.bold.pl14.pt8
    | Live Video Session
  .session-timer.pull-left.ml350
    span.timer-title.hide
      | Session Timer:
    .time-elapsed data-since=@video_session_room.created_at.to_s(:iso8601) data-format: 'HMS'
  = link_to close_video_session_path(@video_session_room), data: {confirm: "Are you sure?"}, remote: true, method: :patch do
    button.close type="button"
      span aria-hidden="true"  ×
      span.sr-only Close
  .clearfix

.modal-body.videModal data-session-id=@video_session_room.tutoring_session_id
  .row
    P.italic Please click ALLOW on your Browser to start your video session
    - if @video_session_room
      .col-sm-12.mt10.no-padding
        .col-sm-5.pl0
          .video-box
            #streaming-videos
            #my-video
          .col-sm-12.no-padding.chat-window.mb20
            #conversation-messages data-id=@conversation.id
              .endlessScroll data-url=conversation_path(@conversation) data-scroll-type='reverse'
              = form_tag reply_conversation_path(@conversation), id: 'reply-to-conversation', remote: true
                = text_area_tag :msg, nil, placeholder: 'Reply', rows: 2
                = hidden_field_tag :typing, class: :typing
        .col-sm-7.no-padding
          #literally-canvas.drawing-area data-url=video_session_path(@video_session_room)
          .clearfix
          .col-sm-4.no-padding.pull-right.mb10
            = link_to 'End Video', close_video_session_path(@video_session_room), class: 'btn btn-pink', data: {confirm: "Are you sure?"}, remote: true, method: :patch
      javascript:
        videoSession.init({apiKey: "#{$opentok.api_key}", sessionId: "#{@video_session_room.session_id}", token: "#{@video_session_room.token_for(current_user)}"})
    - else
      .col-sm-12.mt10.text-center
        | This video session is not available.

javascript:
  loadMessages(1, $("#conversation-messages .endlessScroll"))
  bindEndlessEventOnConversation($("#conversation-messages .endlessScroll"))