{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% trans "Live Classroom" %} - {{ subject.name_en }}{% endblock %}

{% block content %}
<div class="container-fluid p-0" style="height: calc(100vh - 76px); margin-top: 76px;"> 
    
    <div id="meet" style="width: 100%; height: 100%;"></div>

</div>

<script src='https://meet.jit.si/external_api.js'></script>
<script>
    const domain = 'meet.jit.si';
    const options = {
        roomName: '{{ room_name }}',
        width: '100%',
        height: '100%',
        parentNode: document.querySelector('#meet'),
        userInfo: {
            displayName: '{{ user_display_name }}'
        },
        configOverwrite: {
            startWithAudioMuted: true,
            startWithVideoMuted: true,
            {% if not is_teacher %}
            // Hide some controls for students
            disableRemoteMute: true,
            {% endif %}
            prejoinPageEnabled: false
        },
        interfaceConfigOverwrite: {
            // Customize toolbar if needed
            SHOW_JITSI_WATERMARK: false,
            DEFAULT_BACKGROUND: 'white',
            DEFAULT_LOCAL_DISPLAY_NAME: '{{ user_display_name }}',
            TOOLBAR_BUTTONS: [
                'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
                'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
                'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
                'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
                'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone',
                'security'
            ],
        }
    };
    const api = new JitsiMeetExternalAPI(domain, options);
    
    // Redirect when hanging up
    api.addEventListeners({
        videoConferenceLeft: function () {
            window.location.href = "{% url 'profile' %}";
        }
    });
</script>
{% endblock %}
