{% extends 'base.html.twig' %}
{% block title %}Canlı{% endblock %}
{% block datatable_css %}
<link href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/data-tables/datatables.bootstrap4.min.css') }}" rel="stylesheet" />
{% endblock %}


{% block body_class %} class="header-fixed sidebar-fixed sidebar-dark header-light" {% endblock %}

{% block body %}
   

  <div class="wrapper">


  {{ include('user/partials/left-sidebar.html.twig') }} 


    <div class="page-wrapper">
                <!-- Header -->
          {{ include('user/partials/header.html.twig') }} 


      <div class="content-wrapper">

       
        <div class="content">
          <div class="breadcrumb-wrapper">
                <h1>Görüşmelerim</h1>
                
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb p-0 mt-2">
            <li class="breadcrumb-item">
              <a href="index.html">
                <span class="mdi mdi-home"></span>                
              </a>
            </li>
            <li class="breadcrumb-item">
              Görüşmelerim
            </li>
            <li class="breadcrumb-item" aria-current="page">Canlı</li>
          </ol>
        </nav>

              </div>

              <div class="row" id="videos">
                

           
              </div>
</div>
 



          <div class="right-sidebar-2">
              <div class="right-sidebar-container-2">
                <div class="slim-scroll-right-sidebar-2">

                <div class="right-sidebar-2-header">
                  <h2>Layout Settings</h2>
                  <p>User Interface Settings</p>
                  <div class="btn-close-right-sidebar-2">
                    <i class="mdi mdi-window-close"></i>
                  </div>
                </div>

                <div class="right-sidebar-2-body">
                  <span class="right-sidebar-2-subtitle">Header Layout</span>
                  <div class="no-col-space">
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 header-fixed-to btn-right-sidebar-2-active">Fixed</a>
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 header-static-to">Static</a>
                  </div>

                  <span class="right-sidebar-2-subtitle">Sidebar Layout</span>
                  <div class="no-col-space">
                    <select class="right-sidebar-2-select" id="sidebar-option-select">
                      <option value="sidebar-fixed">Fixed Default</option>
                      <option value="sidebar-fixed-minified">Fixed Minified</option>
                      <option value="sidebar-fixed-offcanvas">Fixed Offcanvas</option>
                      <option value="sidebar-static">Static Default</option>
                      <option value="sidebar-static-minified">Static Minified</option>
                      <option value="sidebar-static-offcanvas">Static Offcanvas</option>
                    </select>
                  </div>

                  <span class="right-sidebar-2-subtitle">Header Background</span>
                  <div class="no-col-space">
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active header-light-to">Light</a>
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 header-dark-to">Dark</a>
                  </div>

                  <span class="right-sidebar-2-subtitle">Navigation Background</span>
                  <div class="no-col-space">
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active sidebar-dark-to">Dark</a>
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 sidebar-light-to">Light</a>
                  </div>

                  <span class="right-sidebar-2-subtitle">Direction</span>
                  <div class="no-col-space">
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active ltr-to">LTR</a>
                    <a href="javascript:void(0);" class="btn-right-sidebar-2 rtl-to">RTL</a>
                  </div>

                  <div class="d-flex justify-content-center" style="padding-top: 30px">
                    <div id="reset-options" style="width: auto; cursor: pointer" class="btn-right-sidebar-2 btn-reset">Reset
                      Settings</div>
                  </div>

                </div>

              </div>
            </div>

          </div>

      </div>

            {{ include('user/partials/footer.html.twig') }} 

    </div>
  </div>

{% endblock %}


{% block javascripts %}

  <script src="https://static.opentok.com/v2/js/opentok.js"></script>

  <script type="text/javascript">

    NProgress.configure({ showSpinner: false });
    NProgress.start();

    var apiKey = '{{ API_KEY }}';
    var sessionId = '{{ SESSION_ID }}';
    var token = '{{ TOKEN }}';

    function handleError(error) {
      if (error) {
        alert(error.message);
      }
        }

    var session = OT.initSession(apiKey, sessionId);

    // Subscribe to a newly created stream
    session.on('streamCreated', function(event) {
        session.subscribe(event.stream, 'videos', {
          insertMode: 'append',
        }, handleError);
    });

    var publisher = OT.initPublisher('videos', {
        insertMode: 'append',
      }, handleError);

      // Connect to the session
    session.connect(token, function(error) {
        // If the connection is successful, initialize a publisher and publish to the session
        if (error) {
          handleError(error);
        } else {
          session.publish(publisher, handleError);
        }
    });

    
  </script>

{% endblock %}