<script setup>
import axios from '@axios';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
import {
    LocalParticipant,
    Room,
    RoomEvent,
    Track,
    VideoPresets,
    facingModeFromLocalTrack
} from 'livekit-client';
import { defineEmits, defineProps, nextTick, onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore()
const router = useRouter()
const route = useRoute()
const props = defineProps({
    token: {
        type: String,
        required: true,
    },
    recording: {
        type: Boolean,
        default: false,
    },
    call_type: {
        type: String,
        required: true,
    },
})
const emit = defineEmits([
    'update:token',
    'update:transcriptData'
])
const agentName = ref(null);
const patientName = ref(null);
const patientGender = ref(null);
const patientAge = ref(null);
const large_video = ref(null)
const imageSrc = ref('');
const cropping = ref(false);
let cropper = null;
let imageBlob = null;
const imageSaved = ref(false)
const image = ref(null);
const canvas = ref(null);
const canvasPopup = ref(false)
const addingToNote = ref(false)
const note = ref(null)
// Assuming you have a way to track participant states
const participantStates = new Map();
const signalStrength = ref(3); // Initial signal strength (5 bars)
const signals = ref(0);
const participantSignals = ref(); // Array representing the signal bars
// Simulating signal strength changes (you can replace this with your actual signal strength logic)
let intervalId;
const isLoadingVisible = ref(false)
let room = null
let reconnectionTimer = null;
const url = "wss://plugnmeet.codelfi.com"
const userReconnectedPopup = ref(false)
const userReconnecting = ref(false)
const participants = ref([])
const cameras = ref([])
const cameraDefault = ref()
const microphones = ref([])
const microphoneDefault = ref()
const speakers = ref([])
const speakerDefault = ref()
const callStart = ref(false)
const userRole = localStorage.getItem('user_role'); // Fetch user role from local storage
const isPatient = computed(() => userRole.toLowerCase() === 'patient');
const isAgent = computed(() => userRole.toLowerCase() === 'agent');
const recording = ref(false)
const recordVid = ref(true)
const isMobile = ref(window.innerWidth <= 768);
const transcriptData = ref('')
const patientMuted = ref(false)
const patientCamDisabled = ref(false)
let rtCon = null
const appointmentId = localStorage.getItem('patient_appiontment_id')
const strData = JSON.stringify({ some: "data" })
const encoder = new TextEncoder()
const decoder = new TextDecoder()
const patientId = ref(localStorage.getItem('patient_id'))
const agentId = ref(localStorage.getItem('agent_id'))
const token = ref(localStorage.getItem('agent_meeting_id'))
const screenHeight = ref(window.innerHeight);
const callSectionHeight = ref(0);
const fullscreenDiv = ref(null);
const isFullscreen = ref(false);
const sideBarOpen = ref(true);
const signalIconColor = computed(() => {
    if (signals.value == 3) return 'green';
    if (signals.value == 2) return 'yellow';
    if (signals.value == 1) return 'red';
    if (signals.value == 0) return 'red';

});
const participantSignalIconColor = computed(() => {
    if (participantSignals.value == 3) return 'green';
    if (participantSignals.value == 2) return 'yellow';
    if (participantSignals.value == 1) return 'red';
    if (participantSignals.value == 0) return 'red';

});

const isMuted = ref(false);
const isCamDisabled = ref(false);


const sideIcon = computed(() => {
    return sideBarOpen.value ? 'mdi-chevron-left' : 'mdi-menu';
});
const screenIcon = computed(() => {
    return isFullscreen.value ? 'mdi-fullscreen-exit' : 'mdi-fullscreen';
});
const muteIcon = computed(() => {
    return isMuted.value ? 'mdi-microphone-off' : 'mdi-microphone';
});
const camIcon = computed(() => {
    return isCamDisabled.value ? 'mdi-video-off' : 'mdi-video';
});

const sideIconColor = computed(() => {
    return sideBarOpen.value ? 'red' : 'white';
});
const screenIconColor = computed(() => {
    return isFullscreen.value ? 'red' : 'white';
});
const muteIconColor = computed(() => {
    return isMuted.value ? 'red' : 'white';
});
const camIconColor = computed(() => {
    return isCamDisabled.value ? 'red' : 'white';
});

// Message Box Start
const isOpen = ref(false);
const messages = ref([]);
const newMessage = ref('');
const bottomOffset = ref(20);
const showMessage = ref(true)
const toggleChat = () => {
    isOpen.value = !isOpen.value;
};

const sendMessage = () => {
    if (newMessage.value.trim() !== '') {
        messages.value.push({
            id: messages.value.length + 1,
            text: newMessage.value.trim(),
            sender: 'doctor', // Assuming the user is sending the message
            timestamp: Date.now()
        });
        newMessage.value = '';
        // Scroll to the last message
        const messageContainer = document.querySelector('.message-container');
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }
};

const adjustBottomOffset = () => {
    if (showMessage.value) {
        const windowHeight = window.innerHeight;
        const chatboxHeight = document.querySelector('.chatbox');
        if (chatboxHeight)
            bottomOffset.value = windowHeight - chatboxHeight.offsetHeight - 20;
    }

};

const updateScreenHeight = () => {
    screenHeight.value = window.innerHeight;
};

const checkMobile = () => {
    isMobile.value = window.innerWidth <= 768; // Adjust the breakpoint as needed
    const navbar = document.querySelector('.layout-navbar');

    if (navbar) {
        if (!isMobile.value) {
            navbar.style.display = 'none';
        } else {
            navbar.style.display = 'block';
        }
    }
    if (isMobile.value == true)
        showMessage.value = false
    else
        showMessage.value = true


};
const showMessageBox = () => {
    showMessage.value = true
    isOpen.value = true
}
const hideMessageBox = () => {
    showMessage.value = false
    isOpen.value = false
}
onBeforeMount(() => {


})
onMounted(async () => {
    // intervalId = setInterval(() => {
    //     signalStrength.value = Math.floor(Math.random() * 6); // Random signal strength between 0 and 5
    // }, 2000);
    // if (isAgent.value) {
    //     await patientDetails()
    // }
    if (isAgent.value) {
        await axios.post('/agent/api/agent-profile', {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
            }
        })
            .then(response => {
                console.log('ResponseTest:', response.data);
                if (response.data) {
                    let patientData = response.data.ai_switch;
                    agentName.value = patientData.name;
                    console.log("agentName", agentName.value);
                } else {
                    isLoadingVisible.value = false;
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

    if (isAgent.value) { localStorage.setItem('call_started', false) }
    const navbar = document.querySelector('.layout-navbar');
    const callDiv = document.querySelector('.layout-page-content');
    const footer = document.querySelector('.layout-footer');

    if (navbar) {
        if (!isMobile.value) {
            navbar.style.display = 'none';
        } else {
            navbar.style.display = 'block';
        }
    }
    if (callDiv)
        callDiv.style.padding = '0px';
    if (footer)
        footer.style.display = 'none';
    window.addEventListener('resize', checkMobile);
    document.addEventListener('mousemove', handleMouseMove)
    window.addEventListener('resize', updateScreenHeight);
    window.addEventListener('resize', adjustBottomOffset);
    adjustBottomOffset();
    connect();
    if (isAgent.value) { localStorage.setItem('call_started', true) }

    // if (userType.value == 'agent')
    //   getAppointmentDetails();
    if (isMobile.value == true)
        showMessage.value = false
    else
        showMessage.value = true

    // callSectionHeight.value = document.querySelector('.layout-page-content').clientHeight;
    // console.log('Call Section height:', callSectionHeight.value);
    document.addEventListener('fullscreenchange', exitFullscreen);
    //     document.addEventListener('webkitfullscreenchange', toggleFullscreen);
    // document.addEventListener('mozfullscreenchange', toggleFullscreen);
    // document.addEventListener('MSFullscreenChange', toggleFullscreen);
    // document.addEventListener('keydown', (event) => {
    //     console.log('esc',event.keyCode)
    //     if (event.keyCode === 27) {
    //         event.preventDefault(); // Check if the pressed key is ESC (key code 27)
    //       toggleFullscreen();
    //     }
    //   });
});
onUnmounted(async () => {
    // room.disconnect();
    clearReconnectionTimer();
    clearInterval(intervalId);
    const navbar = document.querySelector('.layout-navbar');
    const callDiv = document.querySelector('.layout-page-content');
    const footer = document.querySelector('.layout-footer');
    if (navbar)
        navbar.style.display = 'block';
    if (callDiv)
        callDiv.style.padding = '1.5rem';
    if (footer)
        footer.style.display = 'block';
    window.removeEventListener('resize', checkMobile);
    document.removeEventListener('mousemove', handleMouseMove)
    window.removeEventListener('resize', adjustBottomOffset);
    document.removeEventListener('fullscreenchange', exitFullscreen);
});
const patientDetails = async () => {
    isLoadingVisible.value = true;

    await axios.post('/agent/api/patient-profile-details/' + patientId.value, {
        headers: {
            'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
        }
    })
        .then(response => {
            console.log('Patient details:', response.data.patient);
            patientName.value = response.data.patient.first_name + ' ' + response.data.patient.last_name
            patientGender.value = response.data.patient.gender
            patientAge.value = calculateAge(response.data.patient.dob)
            isLoadingVisible.value = false;
        })
        .catch(error => {
            isLoadingVisible.value = false;
            console.error('Error:', error);
        });
};

const x = ref(0)
const y = ref(10)
const dragging = ref(false)

const rect = ref(null)

const style = computed(() => {
    return {
        transform: `translate(${x.value}px, ${y.value}px)`
    }
})


const handleMouseDown = e => {
    rect.value = e.currentTarget.getBoundingClientRect()
    dragging.value = true
}

const handleMouseMove = e => {
    if (!dragging.value) return
    x.value = Math.min(Math.max(0, e.clientX - rect.value.left), window.innerWidth - rect.value.width) - 25
    y.value = Math.min(Math.max(0, e.clientY - rect.value.top), window.innerHeight - rect.value.height) - 25
}

const handleReconnection = () => {
    // Clear existing timer if any
    clearReconnectionTimer();

    // Set a new timer
    reconnectionTimer = setTimeout(() => {
        // Code to notify other participants
        notifyParticipants();
    }, 10000); // 50 seconds
}

const clearReconnectionTimer = () => {
    if (reconnectionTimer) {
        clearTimeout(reconnectionTimer);
        reconnectionTimer = null;
    }
}

const notifyParticipants = () => {
    userReconnectedPopup.value = true
    // Emit an event or call a method to show a popup to other participants
    console.log('User has not reconnected after 50 seconds');
    // This could be an event bus, state management dispatch, or direct UI manipulation
}

const connect = async () => {
    isLoadingVisible.value = true
    room = new Room({
        // automatically manage subscribed video quality
        adaptiveStream: true,

        dynacast: true,
        // default capture settings
        videoCaptureDefaults: {
            resolution: VideoPresets.h720.resolution,
        },
        publishDefaults: {
            videoCodec: 'vp9',
        },
        disconnectOnPageLeave: false,
        reconnectPolicy: {
            nextRetryDelayInMs: (context) => {
                let retryCount = context.retryCount
                if (retryCount > 20) {
                    return null
                }
                return context.retryCount * 300;
            },
            // maxAttempts: 18,  // 18 attempts
            // initialDelay: 10000,  // 10 seconds
            // maxDelay: 30000,  // 10 seconds
            // jitter: 1000,  // 1-second jitter
        }
    });

    // pre-warm connection, this can be called as early as your page is loaded
    room.prepareConnection(url, props.token);
    console.log(props.token)

    // set up event listeners
    room
        .on(RoomEvent.TrackSubscribed, (track, publication, participant) => renderParticipant(participant))
        .on(RoomEvent.TrackUnsubscribed, (track, publication, participant) => renderParticipant(participant, true))
        // .on(RoomEvent.ActiveSpeakersChanged, (speakers) => console.log("handleTrackSubscribed"))
        .on(RoomEvent.Disconnected, () => {
            console.log('>>Disconnected<<')
            renderParticipant(room.localParticipant, true)
            room.participants.forEach((p) => {
                renderParticipant(p, true);
            })
            room = null
        })
        .on(RoomEvent.Reconnecting, () => {
            console.log('Reconnecting to room')
            clearReconnectionTimer();
            userReconnecting.value = true
        })
        .on(RoomEvent.Reconnected, async (participant) => {
            console.log('---Participant Reconnected---', participant)
            clearReconnectionTimer();
            userReconnecting.value = false
            if (!participant.isLocal) {
                userReconnectedPopup.value = false
            }
            console.log(
                'Successfully reconnected. server',
                await room.engine.getConnectedServerAddress(),
                participant
            );
            participant.on('trackMuted', publication => {
                if (publication.kind === 'video') {
                    patientCamDisabled.value = true
                }
                if (publication.kind === 'audio') {
                    patientMuted.value = true
                }
                console.log(`Track muted: ${publication.trackSid}`, publication);
            });

            participant.on('trackUnmuted', publication => {
                if (publication.kind === 'video') {
                    patientCamDisabled.value = false
                }
                if (publication.kind === 'audio') {
                    patientMuted.value = false
                }
                console.log(`Track unmuted: ${publication.trackSid}`, publication);
            });
        })
        .on(RoomEvent.ParticipantConnected, async (participant) => {
            console.log('ParticipantConnected', participant)
            callStart.value = true
            participant.on('trackMuted', publication => {
                if (publication.kind === 'video') {
                    patientCamDisabled.value = true
                }
                if (publication.kind === 'audio') {
                    patientMuted.value = true
                }
                console.log(`Track muted: ${publication.trackSid}`, publication);
            });

            participant.on('trackUnmuted', publication => {
                if (publication.kind === 'video') {
                    patientCamDisabled.value = false
                }
                if (publication.kind === 'audio') {
                    patientMuted.value = false
                }
                console.log(`Track unmuted: ${publication.trackSid}`, publication);
            });

        })
        .on(RoomEvent.DataReceived, async (payload, participant, kind) => {
            const strData = decoder.decode(payload)
            transcriptData.value = strData
            emit('update:transcriptData', transcriptData.value);
            console.log('strData', strData)
        })
        .on(RoomEvent.ParticipantDisconnected, (participant) => {
            clearReconnectionTimer();
            renderParticipant(participant, true);
            console.log('part length ', room.participants.size, room, participant, participant._connectionQuality)

            if (participant.isLocal) {
                userReconnecting.value = true
            } else {
                // Check if the remote participant's connection quality is poor or unknown
                if (participant._connectionQuality === 'poor' || participant._connectionQuality === 'unknown' || participant._connectionQuality === 'lost') {
                    userReconnectedPopup.value = true
                }
            }
            if (!userReconnectedPopup.value) {
                console.log('>>>Disconnected Here')
                setTimeout(async () => {
                    if (room.participants.size == 0) {
                        isLoadingVisible.value = true
                        console.log('disconnect')
                        room.disconnect();
                        callStart.value = false

                        if (isAgent.value) {
                            if (!sideBarOpen.value) { toggleSideBar(); }
                            await axios.post('/agent/api/end-call/' + patientId.value + '/' + localStorage.getItem('patient_appiontment_id'))
                                .then(response => {
                                    console.log('call end', response.data.message)
                                })
                                .catch(error => {
                                    console.error('error end call ', error);
                                });
                            store.dispatch('updateCurrentPage', '/provider/patient-profile')
                            store.dispatch('updateFloatingWindow', false)
                            store.dispatch('updateCallStarted', false)
                            localStorage.removeItem('getCurrentPatient');
                            router.push('/provider/patient-profile');
                        }
                        localStorage.setItem('call_started', true)

                        if (isPatient.value) {
                            localStorage.setItem('call-end-message', 'Password Sent to Email Address')
                            store.dispatch('updateCurrentPage', '/overview')
                            window.close();
                            router.push('/overview');
                        }
                        isLoadingVisible.value = false
                    }

                }, 3000)
            }


        })
        .on(RoomEvent.MediaDevicesChanged, async () => {
            console.log('device changed')
        })
        .on(RoomEvent.LocalTrackUnpublished, () => renderParticipant(room.localParticipant))
        .on(RoomEvent.LocalTrackPublished, () => renderParticipant(room.localParticipant))
        .on(RoomEvent.ConnectionQualityChanged, (participant, quality) => {
            console.log('Signal Changed', room.localParticipant.connectionQuality, quality._connectionQuality)
            if (quality._connectionQuality == 'excellent') {
                participantSignals.value = 3
            } else if (quality._connectionQuality == 'good') {
                participantSignals.value = 2
            } else if (quality._connectionQuality == 'poor') {
                participantSignals.value = 1
            } else if (quality._connectionQuality == 'unknown') {
                participantSignals.value = 0
            } else {
                participantSignals.value = 0
            }
            if (room.localParticipant.connectionQuality == 'excellent') {
                signals.value = 3
            } else if (room.localParticipant.connectionQuality == 'good') {
                signals.value = 2
            } else if (room.localParticipant.connectionQuality == 'poor') {
                signals.value = 1
            } else if (room.localParticipant.connectionQuality == 'unknown') {
                signals.value = 1
            } else {
                signals.value = 0
            }
            console.log('Signal Changed value', signals.value)
        });

    // connect to room
    await room.connect(url, props.token);

    // get transceivers from local participant's tracks
    // const transceivers = [];
    // room.localParticipant.tracks.forEach(track => {
    //     if (track.transceiver) {
    //         transceivers.push(track.transceiver);
    //     }
    // });

    // // set preferred codecs for each transceiver
    // transceivers.forEach((transceiver) => {
    //     if (transceiver.codec) {
    //         const preferredCodecs = ['VP8', 'H264', 'VP9', 'AV1']; // or any other supported codecs
    //         transceiver.setCodecPreferences(preferredCodecs);
    //     }
    // });
    console.log("connected to room", room.name);
    console.log("Signal", room.localParticipant.connectionQuality)
    if (room.localParticipant.connectionQuality == 'excellent') {
        signals.value = 3
    } else if (room.localParticipant.connectionQuality == 'good') {
        signals.value = 2
    } else if (room.localParticipant.connectionQuality == 'poor') {
        signals.value = 1
    } else if (room.localParticipant.connectionQuality == 'unknown') {
        signals.value = 1
    } else {
        signals.value = 0
    }
    console.log('props.call_type----', props.call_type)
    // publish local camera and mic tracks
    if (props.call_type === 'audio') {

        await room.localParticipant.setCameraEnabled(false);
        await room.localParticipant.setMicrophoneEnabled(true);
        isCamDisabled.value = true
    }

    if (props.call_type === 'video') {
        await room.localParticipant.enableCameraAndMicrophone();
    }


    callStart.value = true
    // connectSpeach();

    if (props.recording == true) {

        await axios.post('/agent/api/start-record/' + localStorage.getItem('patient_appiontment_id'))
            .then(response => {
                console.log('start rec', response.data.message)
                if (response.data.message == 'Success')
                    recording.value = response.data.message

            });

    }
    room.participants.forEach((participant) => {
        renderParticipant(participant);
    });
    renderParticipant(room.localParticipant);
    window.room = room;
    const videoDevices = await Room.getLocalDevices('videoinput');
    const audioDevices = await Room.getLocalDevices('audioinput');
    const audioOutputs = await Room.getLocalDevices('audiooutput');
    callStart.value = true
    let selectedVideoDevice = videoDevices[0];
    let selectedMicDevice = audioDevices[0];
    let selectedSpeakerDevice = audioOutputs[0];

    cameras.value = videoDevices;
    microphones.value = audioDevices;
    speakers.value = audioOutputs;

    console.log('camera ', cameras.value)
    console.log('mic ', microphones.value)
    console.log('speaker ', speakers.value)
    // console.log('Devices ', videoDevices, audioDevices, audioOutputs)
    // if (videoDevices.length > 0) {
    //     for (const videoDevice of videoDevices) {

    //         if (videoDevice.deviceId == 'default') {
    //             selectedVideoDevice = videoDevice
    //             break;
    //         }
    //     }
    //     cameraDefault.value = selectedVideoDevice.deviceId
    //     console.log('default video', cameraDefault.value)

    //     await room.switchActiveDevice('videoinput', cameraDefault.value);
    // }
    if (audioDevices.length > 0) {
        for (const audioDevice of audioDevices) {

            if (audioDevice.deviceId == 'default') {
                selectedMicDevice = audioDevice
                break;
            }
        }
        microphoneDefault.value = selectedMicDevice.deviceId
        console.log('default mic', microphoneDefault.value)
        await room.switchActiveDevice('audioinput', microphoneDefault.value);
    }
    if (audioOutputs.length > 0) {
        for (const audioOutput of audioOutputs) {

            if (audioOutput.deviceId == 'default') {
                selectedSpeakerDevice = audioOutput
                break;
            }
        }
        speakerDefault.value = selectedSpeakerDevice.deviceId
        console.log('default audio', speakerDefault.value)
        try {
            await room.switchActiveDevice('audiooutput', speakerDefault.value);
        } catch (e) {

        }

    }

    isLoadingVisible.value = false
    return room;
}

const getActiveCamDevice = () => {
    return room.getActiveDevice("videoinput")
};

const getActiveMicDevice = () => {
    return room.getActiveDevice("audioinput")
};

const getActiveSpeakerDevice = () => {
    return room.getActiveDevice("audiooutput")
};

const renderParticipant = async (participant, remove = false) => {

    let _participant = participants.value.find(part => part.id == participant.identity)
    console.log('----Participant----', _participant)
    if (!_participant) {
        _participant = {
            id: participant.identity,
            type: (participant instanceof LocalParticipant) ? "local" : "remote",
            video: null,
            audio: null,
        };
        participants.value.push(_participant)

    }
    if (_participant.type == 'remote') {

        participant.on('trackMuted', publication => {
            if (publication.kind === 'video') {
                patientCamDisabled.value = true
            }
            if (publication.kind === 'audio') {
                patientMuted.value = true
            }
            console.log(`Track muted: ${publication.trackSid}`, publication);
        });

        participant.on('trackUnmuted', publication => {
            if (publication.kind === 'video') {
                patientCamDisabled.value = false
            }
            if (publication.kind === 'audio') {
                patientMuted.value = false
            }
            console.log(`Track unmuted: ${publication.trackSid}`, publication);
        });
    }

    if (remove) {
        participants.value.splice(participants.value.indexOf(_participant), 1)
        return;
    }

    const cameraPub = participant.getTrack(Track.Source.Camera);
    const micPub = participant.getTrack(Track.Source.Microphone);

    await nextTick()
    // if ((participant instanceof LocalParticipant) && micPub?.track.getProcessor()?.name != "local-processor") {
    //   micPub.track.setProcessor(localProcessor);
    // }
    // if (micPub?.getProcessor()?.name != "remote-processor" && !(participant instanceof LocalParticipant)) {
    //   micPub.setProcessor(remoteProcessor);
    // }
    if (cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted && participant instanceof LocalParticipant) {
        console.log('Local camera publication:', cameraPub);
    }
    window.r = room
    _participant.video = document.getElementById("video-" + _participant.id)
    _participant.audio = document.getElementById("audio-" + _participant.id)
    console.log('video ', _participant.video)




    const cameraEnabled = cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted;
    if (cameraEnabled) {

        cameraPub?.videoTrack?.attach(_participant.video);
    } else {
        if (cameraPub?.videoTrack) {
            // detach manually whenever possible
            cameraPub.videoTrack?.detach(_participant.video);
        } else if (_participant.video) {

            _participant.video.src = '';
            _participant.video.srcObject = null;
        }
    }


    const micEnabled = micPub && micPub.isSubscribed && !micPub.isMuted;
    if (micEnabled) {
        if (!(participant instanceof LocalParticipant)) {



            if (!rtCon) {
                micPub?.audioTrack?.attach(_participant.audio);

                console.log('audioTrack', _participant.audio)
            }
        }
    }




}

const endCall = async () => {
    isLoadingVisible.value = true
    if (room) room.disconnect()
    callStart.value = false
    if (isAgent.value) {
        if (!sideBarOpen.value) { toggleSideBar(); }
        await axios.post('/agent/api/end-call/' + patientId.value + '/' + localStorage.getItem('patient_appiontment_id'))
            .then(response => {
                console.log('call end', response.data.message)
            })
            .catch(error => {
                console.error('error end call ', error);
            });
        localStorage.setItem('call_started', false)
        localStorage.removeItem('getCurrentPatient');
        store.dispatch('updateFloatingWindow', false)
        store.dispatch('updateCallStarted', false)
        store.dispatch('updateCurrentPage', '/provider/patient-profile')
        router.push('/provider/patient-profile');
    }


    if (isPatient.value) {
        localStorage.setItem('call-end-message', 'Password Sent to Email Address')
        store.dispatch('updateCurrentPage', '/overview')
        window.close();
        router.push('/overview');
    }
    isLoadingVisible.value = false
}

const getAppointmentDetails = async () => {
    axios.post('/agent/api/appointment-detail/' + appointmentId)
        .then(r => {
            let appointmentAnalytics = r.data.agent_appointment.analytics
            transcriptData.value = appointmentAnalytics
            console.log('appointmentAnalytics ', transcriptData.value)
            emit('update:transcriptData', transcriptData.value);
        }).catch(error => {
            console.log("Error", error);
        });

}


const flipCamera = () => {
    const videoPub = room?.localParticipant.getTrack(Track.Source.Camera);
    console.log('videoPub', videoPub)
    if (!videoPub) {
        return;
    }
    const track = videoPub.track;
    const facingMode = track && facingModeFromLocalTrack(track);

    const options = {
        resolution: VideoPresets.h720.resolution,
        facingMode: facingMode?.facingMode === 'environment' ? 'user' : 'environment',
    }
    console.log('options', options)
    videoPub.videoTrack?.restartTrack(options)

};

const selectCamera = async (deviceId) => {
    await room.switchActiveDevice('videoinput', deviceId);
    // cameraDefault.value = deviceId
    console.log('camera selected  ', deviceId);
}

const selectMicrophone = async (deviceId) => {
    await room.switchActiveDevice('audioinput', deviceId);
    microphoneDefault.value = deviceId
    console.log('mic selected  ', deviceId);
}

const selectSpeaker = async (deviceId) => {
    await room.switchActiveDevice('audiooutput', deviceId);
    speakerDefault.value = deviceId
    console.log('speaker selected  ', deviceId);
};

const muteMicrophone = async () => {
    const checkMuted = !room.localParticipant.isMicrophoneEnabled;

    if (checkMuted) {
        await room.localParticipant.setMicrophoneEnabled(true);
    } else {
        await room.localParticipant.setMicrophoneEnabled(false);
    }
    isMuted.value = !isMuted.value;
    console.log(`Local participant is ${checkMuted ? 'muted' : 'unmuted'}`, isMuted, room.localParticipant);
};
const cameraToggle = async () => {
    const checkCam = !room.localParticipant.isCameraEnabled;

    if (checkCam) {
        await room.localParticipant.setCameraEnabled(true);
    } else {
        await room.localParticipant.setCameraEnabled(false);
    }
    isCamDisabled.value = !isCamDisabled.value;
    console.log(`Local participant is ${checkCam ? 'muted' : 'unmuted'}`, isCamDisabled, room.localParticipant);
}

const toggleFullscreen = () => {
    // callSectionHeight.value = 0
    const elem = document.body;
    if (!document.fullscreenElement) {
        // If the document is not currently in fullscreen mode
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { /* Safari */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE11 */
            elem.msRequestFullscreen();
        }
    } else {
        // If the document is currently in fullscreen mode
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) { /* Safari */
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE11 */
            document.msExitFullscreen();
        }
    }
    isFullscreen.value = !isFullscreen.value
};

const exitFullscreen = () => {
    callSectionHeight.value = 0
    const elem = document.body;


    // if (!document.fullscreenElement) {
    //     // If the document is not currently in fullscreen mode
    //     if (elem.requestFullscreen) {
    //         elem.requestFullscreen();
    //     } else if (elem.webkitRequestFullscreen) { /* Safari */
    //         elem.webkitRequestFullscreen();
    //     } else if (elem.msRequestFullscreen) { /* IE11 */
    //         elem.msRequestFullscreen();
    //     }
    // } else {
    //     // If the document is currently in fullscreen mode
    //     if (document.exitFullscreen) {
    //         document.exitFullscreen();
    //     } else if (document.webkitExitFullscreen) { /* Safari */
    //         document.webkitExitFullscreen();
    //     } else if (document.msExitFullscreen) { /* IE11 */
    //         document.msExitFullscreen();
    //     }
    // }



    // Set height after a delay
    // setTimeout(() => {
    //     callSectionHeight.value = document.querySelector('.layout-page-content').clientHeight;
    //     console.log('Call Section height:', callSectionHeight.value);
    // }, 500); // You can adjust the delay as needed
    isFullscreen.value = !isFullscreen.value
};

const toggleSideBar = () => {
    const wrapper = document.querySelector('.layout-content-wrapper');
    const sideBar = document.querySelector('.layout-vertical-nav');
    const callContainer = document.querySelector('.draggable-off');
    if (!sideBarOpen.value) {
        sideBarOpen.value = true;
        if (sideBar)
            sideBar.style.display = 'block';
        if (wrapper)
            wrapper.style.paddingInlineStart = '260px'
        if (callContainer) {
            callContainer.style.width = '83%'
            callContainer.style.left = '260px'
        }

    } else {
        sideBarOpen.value = false;
        if (sideBar)
            sideBar.style.display = 'none';
        if (wrapper)
            wrapper.style.paddingInlineStart = '0px'
        if (callContainer) {
            callContainer.style.width = '100%';
            callContainer.style.left = '0px'
        }

    }
    console.log(wrapper.style, callContainer.style.width)

};


const saveImage = async (blob) => {
    const formData = new FormData();
    formData.append('image', blob, 'profile.png');  // 'file' is the key expected by the server

    // Use axios to send a POST request
    await axios.post('/agent/api/profile-image-upload/' + patientId.value, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
        .then(response => {
            console.log('Image uploaded successfully:', response.data);
        })
        .catch(error => {
            console.error('Error uploading image:', error);
        });
};
const captureImage = async () => {
    imageSrc.value = null
    console.log('--------->', room)
    const cameraPub = room.participants.entries().next().value[1].getTrack(Track.Source.Camera);
    if (cameraPub && cameraPub.track && cameraPub.track._mediaStreamTrack) {
        let image = new ImageCapture(cameraPub.track._mediaStreamTrack);
        console.log('---Track Image---', image);
        canvasPopup.value = true
        if (image.track.enabled) {

            try {

                const imageBitmap = await image.grabFrame()
                const canvas = document.createElement('canvas')
                canvas.width = imageBitmap.width
                canvas.height = imageBitmap.height
                const context = canvas.getContext('2d')
                context.drawImage(imageBitmap, 0, 0)
                imageSrc.value = canvas.toDataURL('image/png')
                canvas.toBlob(async (blob) => {
                    // await saveImage(blob)
                    imageBlob = blob
                }, 'image/png');
            } catch (error) {
                console.error('Error capturing image:', error)
            }
        } else {
            console.error('Video element is not ready')
        }
    }
};
const startCropping = () => {
    if (image.value) {
        cropper = new Cropper(image.value, {
            aspectRatio: 1,
            viewMode: 1
        });
        cropping.value = true;
    }
};

const cropImage = () => {
    if (cropper) {
        cropper.getCroppedCanvas().toBlob(async (blob) => {
            imageBlob = blob;
            try {
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = async () => {
                    const base64data = reader.result.split(',')[1]; // Get base64 string without the prefix

                    const response = await axios.post('/agent/api/profile-image-upload/' + patientId.value, {
                        image: base64data,
                        filename: 'profile.png'
                    }, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });

                    console.log('Upload successful', response.data);
                    imageSrc.value = URL.createObjectURL(blob); // Optionally update imageSrc to the local blob URL
                    imageSaved.value = true;
                };
            } catch (error) {
                console.error('Upload failed:', error);
            }
            cropper.destroy(); // Clean up cropper instance
            cropper = null;
            cropping.value = false;
        }, 'image/png');

    }
};
const addToNotes = () => {
    addingToNote.value = true
};
const saveAddToNotes = async () => {
    isLoadingVisible.value = true
    try {
        const formData = new FormData();
        formData.append('note', note.value.trim());
        formData.append('note_type', 'Notes');

        if (imageBlob)
            formData.append('file', imageBlob, 'noteImage.png');

        const response = await axios.post('/agent/api/add-note/' + patientId.value + '/' + appointmentId, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });
        note.value = null
        addingToNote.value = false
        isLoadingVisible.value = false
        console.log('Note added successful', response.data);
    } catch (error) {
        isLoadingVisible.value = false
        console.error('Upload failed:', error);
    }

};
const calculateAge = (dob) => {
    const birthDate = new Date(dob);
    const today = new Date();

    let years = today.getFullYear() - birthDate.getFullYear();
    let months = today.getMonth() - birthDate.getMonth();
    let days = today.getDate() - birthDate.getDate();

    // Adjust the days and months if negative
    if (days < 0) {
        months -= 1;
        let previousMonth = today.getMonth() - 1;
        if (previousMonth < 0) {
            previousMonth = 11; // December
        }
        const daysInPreviousMonth = new Date(today.getFullYear(), previousMonth + 1, 0).getDate();
        days += daysInPreviousMonth;
    }

    if (months < 0) {
        years -= 1;
        months += 12;
    }

    // Return the largest unit that is non-zero
    if (years > 0) {
        return `${years} year${years !== 1 ? 's' : ''}`;
    } else if (months > 0) {
        return `${months} month${months !== 1 ? 's' : ''}`;
    } else {
        return `${days} day${days !== 1 ? 's' : ''}`;
    }
};

// Register the navigation guard

</script>


<template>
    <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>
    <VDialog v-model="canvasPopup" refs="canvasDialog" persistent width="500">
        <v-card>
            <v-card-text>
                <div v-if="imageSrc" class="image-container">
                    <img :src="imageSrc" ref="image" alt="Captured Image" width="100%" />
                </div>
                <div v-if="imageSrc" class="mt-2">
                    <VRow v-if="addingToNote" class="mb-2">
                        <VCol cols="12" md="12">
                            <VTextField v-model="note" label="Your Note" type="text" />
                            <small class="float-right">By {{ agentName }}</small>
                        </VCol>
                    </VRow>
                    <VBtn class="mr-2" @click="startCropping" v-if="!cropping">Set Profile</VBtn>
                    <VBtn class="mr-2" @click="cropImage" v-if="cropping">Save Profile</VBtn>
                    <VBtn @click="addToNotes" v-if="!addingToNote">Add to Note</VBtn>
                    <VBtn @click="saveAddToNotes" v-if="addingToNote" :disabled="isLoadingVisible || !note">Save Note
                    </VBtn>
                </div>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="Close" @click="canvasPopup = false"></v-btn>
            </v-card-actions>
        </v-card>
    </VDialog>
    <VDialog v-model="userReconnectedPopup" refs="reconnectingDialog" persistent width="500">
        <v-card>
            <v-card-text>
                <p>Reconnecting Failed...</p>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="Close" @click="userReconnectedPopup = false"></v-btn>
            </v-card-actions>
        </v-card>
    </VDialog>
    <VCard class="text-center text-sm-start rounded-0 fullscreen-div" ref="fullscreenDiv"
        :class="{ 'fullscreen': isFullscreen }">

        <div v-if="audioDevices">{{ audioDevices }}</div>
        <div class="livekit-container video-bg" @mouseup="dragging = false" @mouseleave="dragging = false"
            :style="store.getters.getFloatingWindow ? 'min-height: 150px' : 'min-height: 100vh'">
            <!-- <v-card class="pt-info" v-if="isAgent">
                <VRow>
                    <VCol md="12">
                        <p class="info-container">
                            <span class="text-white"><b>Name: </b></span>
                            <span class="text-white">{{ patientName }}</span>
                            <span class="text-white"><b>Age: </b></span>
                            <span class="text-white">{{ patientAge }}</span>
                            <span class="text-white"><b>Gender: </b></span>
                            <span class="text-white">Male</span>
                        </p>
                    </VCol>
                </VRow>
            </v-card> -->
            <div class="recording-badge" v-if="recording && !store.getters.getFloatingWindow">Recording</div>
            <div class="call-quality-indicator btn-transparent"
                v-if="participantSignals && !store.getters.getFloatingWindow">
                <!-- <VIcon v-if="signals == 0" :color="signalIconColor" icon="mdi-signal-off"></VIcon>
                <VIcon v-if="signals == 1" :color="signalIconColor" icon="mdi-signal-cellular-1"></VIcon>
                <VIcon v-if="signals == 2" :color="signalIconColor" icon="mdi-signal-cellular-2"></VIcon>
                <VIcon v-if="signals == 3" :color="signalIconColor" icon="mdi-signal-cellular-3"></VIcon> -->
                <svg v-if="participantSignals == 0" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="25px" height="25px" viewBox="0 0 25 25"
                    version="1.1">
                    <g id="surface1">
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;"
                            d="M 23.902344 0.859375 C 24.089844 1.039062 24.207031 1.1875 24.242188 1.449219 C 24.246094 1.519531 24.246094 1.585938 24.242188 1.65625 C 24.242188 1.710938 24.242188 1.710938 24.246094 1.769531 C 24.246094 1.898438 24.246094 2.027344 24.242188 2.15625 C 24.242188 2.25 24.242188 2.339844 24.246094 2.433594 C 24.246094 2.6875 24.246094 2.941406 24.246094 3.199219 C 24.242188 3.472656 24.246094 3.746094 24.246094 4.023438 C 24.246094 4.5625 24.246094 5.097656 24.246094 5.636719 C 24.246094 6.074219 24.246094 6.511719 24.246094 6.949219 C 24.246094 7.011719 24.246094 7.074219 24.246094 7.140625 C 24.246094 7.265625 24.246094 7.390625 24.246094 7.519531 C 24.246094 8.667969 24.246094 9.820312 24.242188 10.972656 C 24.242188 12.023438 24.242188 13.078125 24.246094 14.128906 C 24.246094 15.308594 24.246094 16.492188 24.246094 17.671875 C 24.246094 17.796875 24.246094 17.925781 24.246094 18.050781 C 24.246094 18.113281 24.246094 18.171875 24.246094 18.238281 C 24.246094 18.675781 24.246094 19.113281 24.246094 19.546875 C 24.246094 20.082031 24.246094 20.613281 24.246094 21.144531 C 24.246094 21.417969 24.242188 21.691406 24.246094 21.960938 C 24.246094 22.210938 24.246094 22.457031 24.242188 22.707031 C 24.242188 22.796875 24.242188 22.886719 24.246094 22.976562 C 24.246094 23.101562 24.246094 23.222656 24.242188 23.34375 C 24.242188 23.378906 24.246094 23.414062 24.246094 23.449219 C 24.242188 23.695312 24.175781 23.835938 24.023438 24.023438 C 23.800781 24.210938 23.648438 24.242188 23.359375 24.242188 C 23.308594 24.246094 23.308594 24.246094 23.253906 24.246094 C 23.136719 24.246094 23.019531 24.246094 22.898438 24.246094 C 22.816406 24.246094 22.734375 24.246094 22.652344 24.246094 C 22.480469 24.246094 22.3125 24.246094 22.140625 24.246094 C 21.917969 24.242188 21.699219 24.242188 21.480469 24.246094 C 21.3125 24.246094 21.140625 24.246094 20.972656 24.246094 C 20.890625 24.246094 20.808594 24.246094 20.730469 24.246094 C 20.617188 24.246094 20.503906 24.246094 20.390625 24.242188 C 20.324219 24.242188 20.261719 24.242188 20.195312 24.242188 C 19.929688 24.207031 19.785156 24.097656 19.621094 23.890625 C 19.519531 23.707031 19.507812 23.601562 19.507812 23.394531 C 19.507812 23.34375 19.507812 23.34375 19.503906 23.292969 C 19.503906 23.183594 19.503906 23.074219 19.507812 22.964844 C 19.507812 22.882812 19.507812 22.804688 19.503906 22.722656 C 19.503906 22.503906 19.503906 22.285156 19.503906 22.066406 C 19.507812 21.828125 19.503906 21.59375 19.503906 21.355469 C 19.503906 20.894531 19.503906 20.429688 19.503906 19.96875 C 19.503906 19.589844 19.503906 19.214844 19.503906 18.839844 C 19.503906 18.785156 19.503906 18.730469 19.503906 18.675781 C 19.503906 18.566406 19.503906 18.457031 19.503906 18.347656 C 19.503906 17.328125 19.503906 16.308594 19.507812 15.289062 C 19.507812 14.414062 19.507812 13.539062 19.503906 12.660156 C 19.503906 11.644531 19.503906 10.628906 19.503906 9.613281 C 19.503906 9.503906 19.503906 9.394531 19.503906 9.285156 C 19.503906 9.234375 19.503906 9.179688 19.503906 9.125 C 19.503906 8.75 19.503906 8.375 19.503906 7.996094 C 19.503906 7.539062 19.503906 7.082031 19.503906 6.625 C 19.503906 6.390625 19.507812 6.15625 19.503906 5.921875 C 19.503906 5.707031 19.503906 5.492188 19.507812 5.28125 C 19.507812 5.203125 19.507812 5.125 19.503906 5.046875 C 19.503906 4.941406 19.503906 4.835938 19.507812 4.730469 C 19.507812 4.671875 19.507812 4.613281 19.507812 4.554688 C 19.546875 4.300781 19.691406 4.121094 19.871094 3.945312 C 19.910156 3.902344 19.910156 3.902344 19.953125 3.863281 C 19.980469 3.832031 20.011719 3.804688 20.042969 3.773438 C 20.074219 3.742188 20.105469 3.710938 20.136719 3.679688 C 20.238281 3.578125 20.339844 3.472656 20.445312 3.371094 C 20.515625 3.300781 20.585938 3.226562 20.660156 3.15625 C 20.808594 3.007812 20.957031 2.855469 21.109375 2.707031 C 21.300781 2.515625 21.492188 2.324219 21.683594 2.132812 C 21.832031 1.984375 21.976562 1.835938 22.125 1.691406 C 22.195312 1.617188 22.265625 1.546875 22.335938 1.476562 C 22.4375 1.378906 22.535156 1.28125 22.632812 1.179688 C 22.664062 1.152344 22.691406 1.121094 22.722656 1.09375 C 23.058594 0.757812 23.449219 0.652344 23.902344 0.859375 Z M 23.902344 0.859375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;"
                            d="M 17.652344 7.109375 C 17.890625 7.339844 17.980469 7.476562 17.992188 7.808594 C 17.996094 7.929688 17.996094 8.046875 17.992188 8.167969 C 17.992188 8.234375 17.992188 8.300781 17.996094 8.367188 C 17.996094 8.550781 17.996094 8.734375 17.996094 8.917969 C 17.992188 9.117188 17.996094 9.316406 17.996094 9.515625 C 17.996094 9.902344 17.996094 10.289062 17.996094 10.679688 C 17.996094 10.992188 17.996094 11.308594 17.996094 11.625 C 17.996094 11.667969 17.996094 11.714844 17.996094 11.761719 C 17.996094 11.851562 17.996094 11.941406 17.996094 12.035156 C 17.996094 12.886719 17.996094 13.742188 17.992188 14.597656 C 17.992188 15.332031 17.992188 16.066406 17.996094 16.796875 C 17.996094 17.648438 17.996094 18.5 17.996094 19.355469 C 17.996094 19.445312 17.996094 19.535156 17.996094 19.625 C 17.996094 19.671875 17.996094 19.714844 17.996094 19.761719 C 17.996094 20.078125 17.996094 20.390625 17.996094 20.707031 C 17.996094 21.089844 17.996094 21.472656 17.996094 21.859375 C 17.996094 22.054688 17.992188 22.25 17.996094 22.445312 C 17.996094 22.625 17.996094 22.804688 17.992188 22.984375 C 17.992188 23.078125 17.996094 23.175781 17.996094 23.269531 C 17.988281 23.789062 17.988281 23.789062 17.773438 24.023438 C 17.550781 24.210938 17.398438 24.242188 17.109375 24.242188 C 17.058594 24.246094 17.058594 24.246094 17.003906 24.246094 C 16.886719 24.246094 16.769531 24.246094 16.648438 24.246094 C 16.566406 24.246094 16.484375 24.246094 16.402344 24.246094 C 16.230469 24.246094 16.0625 24.246094 15.890625 24.246094 C 15.667969 24.242188 15.449219 24.242188 15.230469 24.246094 C 15.0625 24.246094 14.890625 24.246094 14.722656 24.246094 C 14.640625 24.246094 14.558594 24.246094 14.480469 24.246094 C 14.367188 24.246094 14.253906 24.246094 14.140625 24.242188 C 14.074219 24.242188 14.011719 24.242188 13.945312 24.242188 C 13.683594 24.207031 13.542969 24.097656 13.371094 23.902344 C 13.246094 23.664062 13.253906 23.464844 13.257812 23.199219 C 13.257812 23.121094 13.257812 23.121094 13.253906 23.039062 C 13.253906 22.859375 13.253906 22.679688 13.257812 22.5 C 13.253906 22.371094 13.253906 22.242188 13.253906 22.113281 C 13.253906 21.800781 13.253906 21.488281 13.253906 21.175781 C 13.253906 20.921875 13.253906 20.667969 13.253906 20.414062 C 13.253906 20.378906 13.253906 20.339844 13.253906 20.304688 C 13.253906 20.230469 13.253906 20.15625 13.253906 20.082031 C 13.253906 19.394531 13.253906 18.703125 13.257812 18.015625 C 13.257812 17.425781 13.257812 16.832031 13.253906 16.242188 C 13.253906 15.554688 13.253906 14.867188 13.253906 14.179688 C 13.253906 14.109375 13.253906 14.035156 13.253906 13.960938 C 13.253906 13.925781 13.253906 13.890625 13.253906 13.851562 C 13.253906 13.597656 13.253906 13.34375 13.253906 13.089844 C 13.253906 12.75 13.253906 12.40625 13.253906 12.066406 C 13.253906 11.9375 13.253906 11.8125 13.253906 11.6875 C 13.253906 11.515625 13.253906 11.347656 13.257812 11.175781 C 13.257812 11.125 13.253906 11.074219 13.253906 11.023438 C 13.257812 10.660156 13.363281 10.453125 13.621094 10.195312 C 13.660156 10.152344 13.660156 10.152344 13.703125 10.113281 C 13.730469 10.082031 13.761719 10.054688 13.792969 10.023438 C 13.824219 9.992188 13.855469 9.960938 13.886719 9.929688 C 13.988281 9.828125 14.089844 9.722656 14.195312 9.621094 C 14.265625 9.550781 14.335938 9.476562 14.410156 9.40625 C 14.558594 9.257812 14.707031 9.105469 14.859375 8.957031 C 15.050781 8.765625 15.242188 8.574219 15.433594 8.382812 C 15.582031 8.234375 15.726562 8.085938 15.875 7.941406 C 15.945312 7.867188 16.015625 7.796875 16.085938 7.726562 C 16.1875 7.628906 16.285156 7.53125 16.382812 7.429688 C 16.414062 7.402344 16.441406 7.371094 16.472656 7.34375 C 16.808594 7.007812 17.199219 6.902344 17.652344 7.109375 Z M 17.652344 7.109375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;"
                            d="M 11.402344 13.359375 C 11.59375 13.546875 11.707031 13.691406 11.742188 13.960938 C 11.746094 14.035156 11.746094 14.105469 11.742188 14.179688 C 11.742188 14.222656 11.746094 14.261719 11.746094 14.304688 C 11.746094 14.441406 11.746094 14.578125 11.742188 14.710938 C 11.746094 14.808594 11.746094 14.90625 11.746094 15.003906 C 11.746094 15.269531 11.746094 15.535156 11.746094 15.800781 C 11.746094 16.078125 11.746094 16.355469 11.746094 16.632812 C 11.746094 17.097656 11.746094 17.566406 11.746094 18.03125 C 11.742188 18.570312 11.742188 19.109375 11.746094 19.648438 C 11.746094 20.109375 11.746094 20.574219 11.746094 21.035156 C 11.746094 21.3125 11.746094 21.585938 11.746094 21.863281 C 11.746094 22.125 11.746094 22.382812 11.746094 22.644531 C 11.746094 22.738281 11.746094 22.832031 11.746094 22.929688 C 11.746094 23.058594 11.746094 23.1875 11.742188 23.320312 C 11.742188 23.355469 11.746094 23.394531 11.746094 23.433594 C 11.742188 23.6875 11.683594 23.828125 11.523438 24.023438 C 11.300781 24.210938 11.148438 24.242188 10.859375 24.242188 C 10.824219 24.246094 10.789062 24.246094 10.753906 24.246094 C 10.636719 24.246094 10.519531 24.246094 10.398438 24.246094 C 10.316406 24.246094 10.234375 24.246094 10.152344 24.246094 C 9.980469 24.246094 9.8125 24.246094 9.640625 24.246094 C 9.417969 24.242188 9.199219 24.242188 8.980469 24.246094 C 8.8125 24.246094 8.640625 24.246094 8.472656 24.246094 C 8.390625 24.246094 8.308594 24.246094 8.230469 24.246094 C 8.117188 24.246094 8.003906 24.246094 7.890625 24.242188 C 7.824219 24.242188 7.761719 24.242188 7.695312 24.242188 C 7.429688 24.207031 7.292969 24.09375 7.113281 23.90625 C 6.988281 23.632812 7.003906 23.371094 7.007812 23.074219 C 7.003906 23.007812 7.003906 22.941406 7.003906 22.875 C 7.003906 22.691406 7.003906 22.511719 7.003906 22.328125 C 7.003906 22.140625 7.003906 21.949219 7.003906 21.761719 C 7.003906 21.441406 7.003906 21.121094 7.003906 20.804688 C 7.007812 20.433594 7.007812 20.066406 7.003906 19.699219 C 7.003906 19.382812 7.003906 19.066406 7.003906 18.75 C 7.003906 18.558594 7.003906 18.371094 7.003906 18.183594 C 7.003906 18.003906 7.003906 17.828125 7.003906 17.648438 C 7.007812 17.554688 7.003906 17.457031 7.003906 17.363281 C 7.011719 16.835938 7.011719 16.835938 7.226562 16.601562 C 7.25 16.578125 7.273438 16.550781 7.296875 16.527344 C 7.375 16.441406 7.457031 16.355469 7.542969 16.273438 C 7.574219 16.242188 7.605469 16.210938 7.636719 16.179688 C 7.738281 16.078125 7.839844 15.972656 7.945312 15.871094 C 8.015625 15.800781 8.085938 15.726562 8.160156 15.65625 C 8.308594 15.507812 8.457031 15.355469 8.609375 15.207031 C 8.800781 15.015625 8.992188 14.824219 9.183594 14.632812 C 9.332031 14.484375 9.476562 14.335938 9.625 14.191406 C 9.695312 14.117188 9.765625 14.046875 9.835938 13.976562 C 9.9375 13.878906 10.035156 13.78125 10.132812 13.679688 C 10.164062 13.652344 10.191406 13.621094 10.222656 13.59375 C 10.558594 13.257812 10.949219 13.152344 11.402344 13.359375 Z M 11.402344 13.359375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,0%,0%);fill-opacity:1;"
                            d="M 5.152344 19.609375 C 5.335938 19.789062 5.457031 19.933594 5.492188 20.195312 C 5.492188 20.257812 5.492188 20.324219 5.492188 20.390625 C 5.496094 20.425781 5.496094 20.460938 5.496094 20.496094 C 5.496094 20.613281 5.496094 20.730469 5.496094 20.851562 C 5.496094 20.933594 5.496094 21.015625 5.496094 21.097656 C 5.496094 21.269531 5.496094 21.4375 5.496094 21.609375 C 5.492188 21.832031 5.492188 22.050781 5.496094 22.269531 C 5.496094 22.4375 5.496094 22.609375 5.496094 22.777344 C 5.496094 22.859375 5.496094 22.941406 5.496094 23.019531 C 5.496094 23.132812 5.496094 23.246094 5.492188 23.359375 C 5.492188 23.425781 5.492188 23.488281 5.492188 23.554688 C 5.457031 23.824219 5.34375 23.964844 5.136719 24.136719 C 4.949219 24.234375 4.824219 24.242188 4.609375 24.242188 C 4.574219 24.246094 4.539062 24.246094 4.503906 24.246094 C 4.386719 24.246094 4.269531 24.246094 4.148438 24.246094 C 4.066406 24.246094 3.984375 24.246094 3.902344 24.246094 C 3.730469 24.246094 3.5625 24.246094 3.390625 24.246094 C 3.167969 24.242188 2.949219 24.242188 2.730469 24.246094 C 2.5625 24.246094 2.390625 24.246094 2.222656 24.246094 C 2.140625 24.246094 2.058594 24.246094 1.980469 24.246094 C 1.867188 24.246094 1.753906 24.246094 1.640625 24.242188 C 1.574219 24.242188 1.511719 24.242188 1.445312 24.242188 C 1.183594 24.207031 1.039062 24.085938 0.859375 23.902344 C 0.746094 23.65625 0.734375 23.414062 0.78125 23.144531 C 0.921875 22.90625 1.09375 22.71875 1.292969 22.523438 C 1.324219 22.492188 1.355469 22.460938 1.386719 22.429688 C 1.488281 22.328125 1.589844 22.222656 1.695312 22.121094 C 1.765625 22.050781 1.835938 21.976562 1.910156 21.90625 C 2.058594 21.757812 2.207031 21.605469 2.359375 21.457031 C 2.550781 21.265625 2.742188 21.074219 2.933594 20.882812 C 3.082031 20.734375 3.226562 20.585938 3.375 20.441406 C 3.445312 20.367188 3.515625 20.296875 3.585938 20.226562 C 3.6875 20.128906 3.785156 20.03125 3.882812 19.929688 C 3.914062 19.902344 3.941406 19.871094 3.972656 19.84375 C 4.308594 19.507812 4.699219 19.402344 5.152344 19.609375 Z M 5.152344 19.609375 " />
                    </g>
                </svg>
                <svg v-if="participantSignals == 1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="25px" height="25px" viewBox="0 0 25 25"
                    version="1.1">
                    <g id="surface1">
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;"
                            d="M 23.902344 0.859375 C 24.089844 1.039062 24.207031 1.1875 24.242188 1.449219 C 24.246094 1.519531 24.246094 1.585938 24.242188 1.65625 C 24.242188 1.710938 24.242188 1.710938 24.246094 1.769531 C 24.246094 1.898438 24.246094 2.027344 24.242188 2.15625 C 24.242188 2.25 24.242188 2.339844 24.246094 2.433594 C 24.246094 2.6875 24.246094 2.941406 24.246094 3.199219 C 24.242188 3.472656 24.246094 3.746094 24.246094 4.023438 C 24.246094 4.5625 24.246094 5.097656 24.246094 5.636719 C 24.246094 6.074219 24.246094 6.511719 24.246094 6.949219 C 24.246094 7.011719 24.246094 7.074219 24.246094 7.140625 C 24.246094 7.265625 24.246094 7.390625 24.246094 7.519531 C 24.246094 8.667969 24.246094 9.820312 24.242188 10.972656 C 24.242188 12.023438 24.242188 13.078125 24.246094 14.128906 C 24.246094 15.308594 24.246094 16.492188 24.246094 17.671875 C 24.246094 17.796875 24.246094 17.925781 24.246094 18.050781 C 24.246094 18.113281 24.246094 18.171875 24.246094 18.238281 C 24.246094 18.675781 24.246094 19.113281 24.246094 19.546875 C 24.246094 20.082031 24.246094 20.613281 24.246094 21.144531 C 24.246094 21.417969 24.242188 21.691406 24.246094 21.960938 C 24.246094 22.210938 24.246094 22.457031 24.242188 22.707031 C 24.242188 22.796875 24.242188 22.886719 24.246094 22.976562 C 24.246094 23.101562 24.246094 23.222656 24.242188 23.34375 C 24.242188 23.378906 24.246094 23.414062 24.246094 23.449219 C 24.242188 23.695312 24.175781 23.835938 24.023438 24.023438 C 23.800781 24.210938 23.648438 24.242188 23.359375 24.242188 C 23.308594 24.246094 23.308594 24.246094 23.253906 24.246094 C 23.136719 24.246094 23.019531 24.246094 22.898438 24.246094 C 22.816406 24.246094 22.734375 24.246094 22.652344 24.246094 C 22.480469 24.246094 22.3125 24.246094 22.140625 24.246094 C 21.917969 24.242188 21.699219 24.242188 21.480469 24.246094 C 21.3125 24.246094 21.140625 24.246094 20.972656 24.246094 C 20.890625 24.246094 20.808594 24.246094 20.730469 24.246094 C 20.617188 24.246094 20.503906 24.246094 20.390625 24.242188 C 20.324219 24.242188 20.261719 24.242188 20.195312 24.242188 C 19.929688 24.207031 19.785156 24.097656 19.621094 23.890625 C 19.519531 23.707031 19.507812 23.601562 19.507812 23.394531 C 19.507812 23.34375 19.507812 23.34375 19.503906 23.292969 C 19.503906 23.183594 19.503906 23.074219 19.507812 22.964844 C 19.507812 22.882812 19.507812 22.804688 19.503906 22.722656 C 19.503906 22.503906 19.503906 22.285156 19.503906 22.066406 C 19.507812 21.828125 19.503906 21.59375 19.503906 21.355469 C 19.503906 20.894531 19.503906 20.429688 19.503906 19.96875 C 19.503906 19.589844 19.503906 19.214844 19.503906 18.839844 C 19.503906 18.785156 19.503906 18.730469 19.503906 18.675781 C 19.503906 18.566406 19.503906 18.457031 19.503906 18.347656 C 19.503906 17.328125 19.503906 16.308594 19.507812 15.289062 C 19.507812 14.414062 19.507812 13.539062 19.503906 12.660156 C 19.503906 11.644531 19.503906 10.628906 19.503906 9.613281 C 19.503906 9.503906 19.503906 9.394531 19.503906 9.285156 C 19.503906 9.234375 19.503906 9.179688 19.503906 9.125 C 19.503906 8.75 19.503906 8.375 19.503906 7.996094 C 19.503906 7.539062 19.503906 7.082031 19.503906 6.625 C 19.503906 6.390625 19.507812 6.15625 19.503906 5.921875 C 19.503906 5.707031 19.503906 5.492188 19.507812 5.28125 C 19.507812 5.203125 19.507812 5.125 19.503906 5.046875 C 19.503906 4.941406 19.503906 4.835938 19.507812 4.730469 C 19.507812 4.671875 19.507812 4.613281 19.507812 4.554688 C 19.546875 4.300781 19.691406 4.121094 19.871094 3.945312 C 19.910156 3.902344 19.910156 3.902344 19.953125 3.863281 C 19.980469 3.832031 20.011719 3.804688 20.042969 3.773438 C 20.074219 3.742188 20.105469 3.710938 20.136719 3.679688 C 20.238281 3.578125 20.339844 3.472656 20.445312 3.371094 C 20.515625 3.300781 20.585938 3.226562 20.660156 3.15625 C 20.808594 3.007812 20.957031 2.855469 21.109375 2.707031 C 21.300781 2.515625 21.492188 2.324219 21.683594 2.132812 C 21.832031 1.984375 21.976562 1.835938 22.125 1.691406 C 22.195312 1.617188 22.265625 1.546875 22.335938 1.476562 C 22.4375 1.378906 22.535156 1.28125 22.632812 1.179688 C 22.664062 1.152344 22.691406 1.121094 22.722656 1.09375 C 23.058594 0.757812 23.449219 0.652344 23.902344 0.859375 Z M 23.902344 0.859375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;"
                            d="M 17.652344 7.109375 C 17.890625 7.339844 17.980469 7.476562 17.992188 7.808594 C 17.996094 7.929688 17.996094 8.046875 17.992188 8.167969 C 17.992188 8.234375 17.992188 8.300781 17.996094 8.367188 C 17.996094 8.550781 17.996094 8.734375 17.996094 8.917969 C 17.992188 9.117188 17.996094 9.316406 17.996094 9.515625 C 17.996094 9.902344 17.996094 10.289062 17.996094 10.679688 C 17.996094 10.992188 17.996094 11.308594 17.996094 11.625 C 17.996094 11.667969 17.996094 11.714844 17.996094 11.761719 C 17.996094 11.851562 17.996094 11.941406 17.996094 12.035156 C 17.996094 12.886719 17.996094 13.742188 17.992188 14.597656 C 17.992188 15.332031 17.992188 16.066406 17.996094 16.796875 C 17.996094 17.648438 17.996094 18.5 17.996094 19.355469 C 17.996094 19.445312 17.996094 19.535156 17.996094 19.625 C 17.996094 19.671875 17.996094 19.714844 17.996094 19.761719 C 17.996094 20.078125 17.996094 20.390625 17.996094 20.707031 C 17.996094 21.089844 17.996094 21.472656 17.996094 21.859375 C 17.996094 22.054688 17.992188 22.25 17.996094 22.445312 C 17.996094 22.625 17.996094 22.804688 17.992188 22.984375 C 17.992188 23.078125 17.996094 23.175781 17.996094 23.269531 C 17.988281 23.789062 17.988281 23.789062 17.773438 24.023438 C 17.550781 24.210938 17.398438 24.242188 17.109375 24.242188 C 17.058594 24.246094 17.058594 24.246094 17.003906 24.246094 C 16.886719 24.246094 16.769531 24.246094 16.648438 24.246094 C 16.566406 24.246094 16.484375 24.246094 16.402344 24.246094 C 16.230469 24.246094 16.0625 24.246094 15.890625 24.246094 C 15.667969 24.242188 15.449219 24.242188 15.230469 24.246094 C 15.0625 24.246094 14.890625 24.246094 14.722656 24.246094 C 14.640625 24.246094 14.558594 24.246094 14.480469 24.246094 C 14.367188 24.246094 14.253906 24.246094 14.140625 24.242188 C 14.074219 24.242188 14.011719 24.242188 13.945312 24.242188 C 13.683594 24.207031 13.542969 24.097656 13.371094 23.902344 C 13.246094 23.664062 13.253906 23.464844 13.257812 23.199219 C 13.257812 23.121094 13.257812 23.121094 13.253906 23.039062 C 13.253906 22.859375 13.253906 22.679688 13.257812 22.5 C 13.253906 22.371094 13.253906 22.242188 13.253906 22.113281 C 13.253906 21.800781 13.253906 21.488281 13.253906 21.175781 C 13.253906 20.921875 13.253906 20.667969 13.253906 20.414062 C 13.253906 20.378906 13.253906 20.339844 13.253906 20.304688 C 13.253906 20.230469 13.253906 20.15625 13.253906 20.082031 C 13.253906 19.394531 13.253906 18.703125 13.257812 18.015625 C 13.257812 17.425781 13.257812 16.832031 13.253906 16.242188 C 13.253906 15.554688 13.253906 14.867188 13.253906 14.179688 C 13.253906 14.109375 13.253906 14.035156 13.253906 13.960938 C 13.253906 13.925781 13.253906 13.890625 13.253906 13.851562 C 13.253906 13.597656 13.253906 13.34375 13.253906 13.089844 C 13.253906 12.75 13.253906 12.40625 13.253906 12.066406 C 13.253906 11.9375 13.253906 11.8125 13.253906 11.6875 C 13.253906 11.515625 13.253906 11.347656 13.257812 11.175781 C 13.257812 11.125 13.253906 11.074219 13.253906 11.023438 C 13.257812 10.660156 13.363281 10.453125 13.621094 10.195312 C 13.660156 10.152344 13.660156 10.152344 13.703125 10.113281 C 13.730469 10.082031 13.761719 10.054688 13.792969 10.023438 C 13.824219 9.992188 13.855469 9.960938 13.886719 9.929688 C 13.988281 9.828125 14.089844 9.722656 14.195312 9.621094 C 14.265625 9.550781 14.335938 9.476562 14.410156 9.40625 C 14.558594 9.257812 14.707031 9.105469 14.859375 8.957031 C 15.050781 8.765625 15.242188 8.574219 15.433594 8.382812 C 15.582031 8.234375 15.726562 8.085938 15.875 7.941406 C 15.945312 7.867188 16.015625 7.796875 16.085938 7.726562 C 16.1875 7.628906 16.285156 7.53125 16.382812 7.429688 C 16.414062 7.402344 16.441406 7.371094 16.472656 7.34375 C 16.808594 7.007812 17.199219 6.902344 17.652344 7.109375 Z M 17.652344 7.109375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 11.402344 13.359375 C 11.59375 13.546875 11.707031 13.691406 11.742188 13.960938 C 11.746094 14.035156 11.746094 14.105469 11.742188 14.179688 C 11.742188 14.222656 11.746094 14.261719 11.746094 14.304688 C 11.746094 14.441406 11.746094 14.578125 11.742188 14.710938 C 11.746094 14.808594 11.746094 14.90625 11.746094 15.003906 C 11.746094 15.269531 11.746094 15.535156 11.746094 15.800781 C 11.746094 16.078125 11.746094 16.355469 11.746094 16.632812 C 11.746094 17.097656 11.746094 17.566406 11.746094 18.03125 C 11.742188 18.570312 11.742188 19.109375 11.746094 19.648438 C 11.746094 20.109375 11.746094 20.574219 11.746094 21.035156 C 11.746094 21.3125 11.746094 21.585938 11.746094 21.863281 C 11.746094 22.125 11.746094 22.382812 11.746094 22.644531 C 11.746094 22.738281 11.746094 22.832031 11.746094 22.929688 C 11.746094 23.058594 11.746094 23.1875 11.742188 23.320312 C 11.742188 23.355469 11.746094 23.394531 11.746094 23.433594 C 11.742188 23.6875 11.683594 23.828125 11.523438 24.023438 C 11.300781 24.210938 11.148438 24.242188 10.859375 24.242188 C 10.824219 24.246094 10.789062 24.246094 10.753906 24.246094 C 10.636719 24.246094 10.519531 24.246094 10.398438 24.246094 C 10.316406 24.246094 10.234375 24.246094 10.152344 24.246094 C 9.980469 24.246094 9.8125 24.246094 9.640625 24.246094 C 9.417969 24.242188 9.199219 24.242188 8.980469 24.246094 C 8.8125 24.246094 8.640625 24.246094 8.472656 24.246094 C 8.390625 24.246094 8.308594 24.246094 8.230469 24.246094 C 8.117188 24.246094 8.003906 24.246094 7.890625 24.242188 C 7.824219 24.242188 7.761719 24.242188 7.695312 24.242188 C 7.429688 24.207031 7.292969 24.09375 7.113281 23.90625 C 6.988281 23.632812 7.003906 23.371094 7.007812 23.074219 C 7.003906 23.007812 7.003906 22.941406 7.003906 22.875 C 7.003906 22.691406 7.003906 22.511719 7.003906 22.328125 C 7.003906 22.140625 7.003906 21.949219 7.003906 21.761719 C 7.003906 21.441406 7.003906 21.121094 7.003906 20.804688 C 7.007812 20.433594 7.007812 20.066406 7.003906 19.699219 C 7.003906 19.382812 7.003906 19.066406 7.003906 18.75 C 7.003906 18.558594 7.003906 18.371094 7.003906 18.183594 C 7.003906 18.003906 7.003906 17.828125 7.003906 17.648438 C 7.007812 17.554688 7.003906 17.457031 7.003906 17.363281 C 7.011719 16.835938 7.011719 16.835938 7.226562 16.601562 C 7.25 16.578125 7.273438 16.550781 7.296875 16.527344 C 7.375 16.441406 7.457031 16.355469 7.542969 16.273438 C 7.574219 16.242188 7.605469 16.210938 7.636719 16.179688 C 7.738281 16.078125 7.839844 15.972656 7.945312 15.871094 C 8.015625 15.800781 8.085938 15.726562 8.160156 15.65625 C 8.308594 15.507812 8.457031 15.355469 8.609375 15.207031 C 8.800781 15.015625 8.992188 14.824219 9.183594 14.632812 C 9.332031 14.484375 9.476562 14.335938 9.625 14.191406 C 9.695312 14.117188 9.765625 14.046875 9.835938 13.976562 C 9.9375 13.878906 10.035156 13.78125 10.132812 13.679688 C 10.164062 13.652344 10.191406 13.621094 10.222656 13.59375 C 10.558594 13.257812 10.949219 13.152344 11.402344 13.359375 Z M 11.402344 13.359375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 5.152344 19.609375 C 5.335938 19.789062 5.457031 19.933594 5.492188 20.195312 C 5.492188 20.257812 5.492188 20.324219 5.492188 20.390625 C 5.496094 20.425781 5.496094 20.460938 5.496094 20.496094 C 5.496094 20.613281 5.496094 20.730469 5.496094 20.851562 C 5.496094 20.933594 5.496094 21.015625 5.496094 21.097656 C 5.496094 21.269531 5.496094 21.4375 5.496094 21.609375 C 5.492188 21.832031 5.492188 22.050781 5.496094 22.269531 C 5.496094 22.4375 5.496094 22.609375 5.496094 22.777344 C 5.496094 22.859375 5.496094 22.941406 5.496094 23.019531 C 5.496094 23.132812 5.496094 23.246094 5.492188 23.359375 C 5.492188 23.425781 5.492188 23.488281 5.492188 23.554688 C 5.457031 23.824219 5.34375 23.964844 5.136719 24.136719 C 4.949219 24.234375 4.824219 24.242188 4.609375 24.242188 C 4.574219 24.246094 4.539062 24.246094 4.503906 24.246094 C 4.386719 24.246094 4.269531 24.246094 4.148438 24.246094 C 4.066406 24.246094 3.984375 24.246094 3.902344 24.246094 C 3.730469 24.246094 3.5625 24.246094 3.390625 24.246094 C 3.167969 24.242188 2.949219 24.242188 2.730469 24.246094 C 2.5625 24.246094 2.390625 24.246094 2.222656 24.246094 C 2.140625 24.246094 2.058594 24.246094 1.980469 24.246094 C 1.867188 24.246094 1.753906 24.246094 1.640625 24.242188 C 1.574219 24.242188 1.511719 24.242188 1.445312 24.242188 C 1.183594 24.207031 1.039062 24.085938 0.859375 23.902344 C 0.746094 23.65625 0.734375 23.414062 0.78125 23.144531 C 0.921875 22.90625 1.09375 22.71875 1.292969 22.523438 C 1.324219 22.492188 1.355469 22.460938 1.386719 22.429688 C 1.488281 22.328125 1.589844 22.222656 1.695312 22.121094 C 1.765625 22.050781 1.835938 21.976562 1.910156 21.90625 C 2.058594 21.757812 2.207031 21.605469 2.359375 21.457031 C 2.550781 21.265625 2.742188 21.074219 2.933594 20.882812 C 3.082031 20.734375 3.226562 20.585938 3.375 20.441406 C 3.445312 20.367188 3.515625 20.296875 3.585938 20.226562 C 3.6875 20.128906 3.785156 20.03125 3.882812 19.929688 C 3.914062 19.902344 3.941406 19.871094 3.972656 19.84375 C 4.308594 19.507812 4.699219 19.402344 5.152344 19.609375 Z M 5.152344 19.609375 " />
                    </g>
                </svg>
                <svg v-if="participantSignals == 2" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="25px" height="25px" viewBox="0 0 25 25"
                    version="1.1">
                    <g id="surface1">
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;"
                            d="M 23.902344 0.859375 C 24.089844 1.039062 24.207031 1.1875 24.242188 1.449219 C 24.246094 1.519531 24.246094 1.585938 24.242188 1.65625 C 24.242188 1.710938 24.242188 1.710938 24.246094 1.769531 C 24.246094 1.898438 24.246094 2.027344 24.242188 2.15625 C 24.242188 2.25 24.242188 2.339844 24.246094 2.433594 C 24.246094 2.6875 24.246094 2.941406 24.246094 3.199219 C 24.242188 3.472656 24.246094 3.746094 24.246094 4.023438 C 24.246094 4.5625 24.246094 5.097656 24.246094 5.636719 C 24.246094 6.074219 24.246094 6.511719 24.246094 6.949219 C 24.246094 7.011719 24.246094 7.074219 24.246094 7.140625 C 24.246094 7.265625 24.246094 7.390625 24.246094 7.519531 C 24.246094 8.667969 24.246094 9.820312 24.242188 10.972656 C 24.242188 12.023438 24.242188 13.078125 24.246094 14.128906 C 24.246094 15.308594 24.246094 16.492188 24.246094 17.671875 C 24.246094 17.796875 24.246094 17.925781 24.246094 18.050781 C 24.246094 18.113281 24.246094 18.171875 24.246094 18.238281 C 24.246094 18.675781 24.246094 19.113281 24.246094 19.546875 C 24.246094 20.082031 24.246094 20.613281 24.246094 21.144531 C 24.246094 21.417969 24.242188 21.691406 24.246094 21.960938 C 24.246094 22.210938 24.246094 22.457031 24.242188 22.707031 C 24.242188 22.796875 24.242188 22.886719 24.246094 22.976562 C 24.246094 23.101562 24.246094 23.222656 24.242188 23.34375 C 24.242188 23.378906 24.246094 23.414062 24.246094 23.449219 C 24.242188 23.695312 24.175781 23.835938 24.023438 24.023438 C 23.800781 24.210938 23.648438 24.242188 23.359375 24.242188 C 23.308594 24.246094 23.308594 24.246094 23.253906 24.246094 C 23.136719 24.246094 23.019531 24.246094 22.898438 24.246094 C 22.816406 24.246094 22.734375 24.246094 22.652344 24.246094 C 22.480469 24.246094 22.3125 24.246094 22.140625 24.246094 C 21.917969 24.242188 21.699219 24.242188 21.480469 24.246094 C 21.3125 24.246094 21.140625 24.246094 20.972656 24.246094 C 20.890625 24.246094 20.808594 24.246094 20.730469 24.246094 C 20.617188 24.246094 20.503906 24.246094 20.390625 24.242188 C 20.324219 24.242188 20.261719 24.242188 20.195312 24.242188 C 19.929688 24.207031 19.785156 24.097656 19.621094 23.890625 C 19.519531 23.707031 19.507812 23.601562 19.507812 23.394531 C 19.507812 23.34375 19.507812 23.34375 19.503906 23.292969 C 19.503906 23.183594 19.503906 23.074219 19.507812 22.964844 C 19.507812 22.882812 19.507812 22.804688 19.503906 22.722656 C 19.503906 22.503906 19.503906 22.285156 19.503906 22.066406 C 19.507812 21.828125 19.503906 21.59375 19.503906 21.355469 C 19.503906 20.894531 19.503906 20.429688 19.503906 19.96875 C 19.503906 19.589844 19.503906 19.214844 19.503906 18.839844 C 19.503906 18.785156 19.503906 18.730469 19.503906 18.675781 C 19.503906 18.566406 19.503906 18.457031 19.503906 18.347656 C 19.503906 17.328125 19.503906 16.308594 19.507812 15.289062 C 19.507812 14.414062 19.507812 13.539062 19.503906 12.660156 C 19.503906 11.644531 19.503906 10.628906 19.503906 9.613281 C 19.503906 9.503906 19.503906 9.394531 19.503906 9.285156 C 19.503906 9.234375 19.503906 9.179688 19.503906 9.125 C 19.503906 8.75 19.503906 8.375 19.503906 7.996094 C 19.503906 7.539062 19.503906 7.082031 19.503906 6.625 C 19.503906 6.390625 19.507812 6.15625 19.503906 5.921875 C 19.503906 5.707031 19.503906 5.492188 19.507812 5.28125 C 19.507812 5.203125 19.507812 5.125 19.503906 5.046875 C 19.503906 4.941406 19.503906 4.835938 19.507812 4.730469 C 19.507812 4.671875 19.507812 4.613281 19.507812 4.554688 C 19.546875 4.300781 19.691406 4.121094 19.871094 3.945312 C 19.910156 3.902344 19.910156 3.902344 19.953125 3.863281 C 19.980469 3.832031 20.011719 3.804688 20.042969 3.773438 C 20.074219 3.742188 20.105469 3.710938 20.136719 3.679688 C 20.238281 3.578125 20.339844 3.472656 20.445312 3.371094 C 20.515625 3.300781 20.585938 3.226562 20.660156 3.15625 C 20.808594 3.007812 20.957031 2.855469 21.109375 2.707031 C 21.300781 2.515625 21.492188 2.324219 21.683594 2.132812 C 21.832031 1.984375 21.976562 1.835938 22.125 1.691406 C 22.195312 1.617188 22.265625 1.546875 22.335938 1.476562 C 22.4375 1.378906 22.535156 1.28125 22.632812 1.179688 C 22.664062 1.152344 22.691406 1.121094 22.722656 1.09375 C 23.058594 0.757812 23.449219 0.652344 23.902344 0.859375 Z M 23.902344 0.859375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 17.652344 7.109375 C 17.890625 7.339844 17.980469 7.476562 17.992188 7.808594 C 17.996094 7.929688 17.996094 8.046875 17.992188 8.167969 C 17.992188 8.234375 17.992188 8.300781 17.996094 8.367188 C 17.996094 8.550781 17.996094 8.734375 17.996094 8.917969 C 17.992188 9.117188 17.996094 9.316406 17.996094 9.515625 C 17.996094 9.902344 17.996094 10.289062 17.996094 10.679688 C 17.996094 10.992188 17.996094 11.308594 17.996094 11.625 C 17.996094 11.667969 17.996094 11.714844 17.996094 11.761719 C 17.996094 11.851562 17.996094 11.941406 17.996094 12.035156 C 17.996094 12.886719 17.996094 13.742188 17.992188 14.597656 C 17.992188 15.332031 17.992188 16.066406 17.996094 16.796875 C 17.996094 17.648438 17.996094 18.5 17.996094 19.355469 C 17.996094 19.445312 17.996094 19.535156 17.996094 19.625 C 17.996094 19.671875 17.996094 19.714844 17.996094 19.761719 C 17.996094 20.078125 17.996094 20.390625 17.996094 20.707031 C 17.996094 21.089844 17.996094 21.472656 17.996094 21.859375 C 17.996094 22.054688 17.992188 22.25 17.996094 22.445312 C 17.996094 22.625 17.996094 22.804688 17.992188 22.984375 C 17.992188 23.078125 17.996094 23.175781 17.996094 23.269531 C 17.988281 23.789062 17.988281 23.789062 17.773438 24.023438 C 17.550781 24.210938 17.398438 24.242188 17.109375 24.242188 C 17.058594 24.246094 17.058594 24.246094 17.003906 24.246094 C 16.886719 24.246094 16.769531 24.246094 16.648438 24.246094 C 16.566406 24.246094 16.484375 24.246094 16.402344 24.246094 C 16.230469 24.246094 16.0625 24.246094 15.890625 24.246094 C 15.667969 24.242188 15.449219 24.242188 15.230469 24.246094 C 15.0625 24.246094 14.890625 24.246094 14.722656 24.246094 C 14.640625 24.246094 14.558594 24.246094 14.480469 24.246094 C 14.367188 24.246094 14.253906 24.246094 14.140625 24.242188 C 14.074219 24.242188 14.011719 24.242188 13.945312 24.242188 C 13.683594 24.207031 13.542969 24.097656 13.371094 23.902344 C 13.246094 23.664062 13.253906 23.464844 13.257812 23.199219 C 13.257812 23.121094 13.257812 23.121094 13.253906 23.039062 C 13.253906 22.859375 13.253906 22.679688 13.257812 22.5 C 13.253906 22.371094 13.253906 22.242188 13.253906 22.113281 C 13.253906 21.800781 13.253906 21.488281 13.253906 21.175781 C 13.253906 20.921875 13.253906 20.667969 13.253906 20.414062 C 13.253906 20.378906 13.253906 20.339844 13.253906 20.304688 C 13.253906 20.230469 13.253906 20.15625 13.253906 20.082031 C 13.253906 19.394531 13.253906 18.703125 13.257812 18.015625 C 13.257812 17.425781 13.257812 16.832031 13.253906 16.242188 C 13.253906 15.554688 13.253906 14.867188 13.253906 14.179688 C 13.253906 14.109375 13.253906 14.035156 13.253906 13.960938 C 13.253906 13.925781 13.253906 13.890625 13.253906 13.851562 C 13.253906 13.597656 13.253906 13.34375 13.253906 13.089844 C 13.253906 12.75 13.253906 12.40625 13.253906 12.066406 C 13.253906 11.9375 13.253906 11.8125 13.253906 11.6875 C 13.253906 11.515625 13.253906 11.347656 13.257812 11.175781 C 13.257812 11.125 13.253906 11.074219 13.253906 11.023438 C 13.257812 10.660156 13.363281 10.453125 13.621094 10.195312 C 13.660156 10.152344 13.660156 10.152344 13.703125 10.113281 C 13.730469 10.082031 13.761719 10.054688 13.792969 10.023438 C 13.824219 9.992188 13.855469 9.960938 13.886719 9.929688 C 13.988281 9.828125 14.089844 9.722656 14.195312 9.621094 C 14.265625 9.550781 14.335938 9.476562 14.410156 9.40625 C 14.558594 9.257812 14.707031 9.105469 14.859375 8.957031 C 15.050781 8.765625 15.242188 8.574219 15.433594 8.382812 C 15.582031 8.234375 15.726562 8.085938 15.875 7.941406 C 15.945312 7.867188 16.015625 7.796875 16.085938 7.726562 C 16.1875 7.628906 16.285156 7.53125 16.382812 7.429688 C 16.414062 7.402344 16.441406 7.371094 16.472656 7.34375 C 16.808594 7.007812 17.199219 6.902344 17.652344 7.109375 Z M 17.652344 7.109375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 11.402344 13.359375 C 11.59375 13.546875 11.707031 13.691406 11.742188 13.960938 C 11.746094 14.035156 11.746094 14.105469 11.742188 14.179688 C 11.742188 14.222656 11.746094 14.261719 11.746094 14.304688 C 11.746094 14.441406 11.746094 14.578125 11.742188 14.710938 C 11.746094 14.808594 11.746094 14.90625 11.746094 15.003906 C 11.746094 15.269531 11.746094 15.535156 11.746094 15.800781 C 11.746094 16.078125 11.746094 16.355469 11.746094 16.632812 C 11.746094 17.097656 11.746094 17.566406 11.746094 18.03125 C 11.742188 18.570312 11.742188 19.109375 11.746094 19.648438 C 11.746094 20.109375 11.746094 20.574219 11.746094 21.035156 C 11.746094 21.3125 11.746094 21.585938 11.746094 21.863281 C 11.746094 22.125 11.746094 22.382812 11.746094 22.644531 C 11.746094 22.738281 11.746094 22.832031 11.746094 22.929688 C 11.746094 23.058594 11.746094 23.1875 11.742188 23.320312 C 11.742188 23.355469 11.746094 23.394531 11.746094 23.433594 C 11.742188 23.6875 11.683594 23.828125 11.523438 24.023438 C 11.300781 24.210938 11.148438 24.242188 10.859375 24.242188 C 10.824219 24.246094 10.789062 24.246094 10.753906 24.246094 C 10.636719 24.246094 10.519531 24.246094 10.398438 24.246094 C 10.316406 24.246094 10.234375 24.246094 10.152344 24.246094 C 9.980469 24.246094 9.8125 24.246094 9.640625 24.246094 C 9.417969 24.242188 9.199219 24.242188 8.980469 24.246094 C 8.8125 24.246094 8.640625 24.246094 8.472656 24.246094 C 8.390625 24.246094 8.308594 24.246094 8.230469 24.246094 C 8.117188 24.246094 8.003906 24.246094 7.890625 24.242188 C 7.824219 24.242188 7.761719 24.242188 7.695312 24.242188 C 7.429688 24.207031 7.292969 24.09375 7.113281 23.90625 C 6.988281 23.632812 7.003906 23.371094 7.007812 23.074219 C 7.003906 23.007812 7.003906 22.941406 7.003906 22.875 C 7.003906 22.691406 7.003906 22.511719 7.003906 22.328125 C 7.003906 22.140625 7.003906 21.949219 7.003906 21.761719 C 7.003906 21.441406 7.003906 21.121094 7.003906 20.804688 C 7.007812 20.433594 7.007812 20.066406 7.003906 19.699219 C 7.003906 19.382812 7.003906 19.066406 7.003906 18.75 C 7.003906 18.558594 7.003906 18.371094 7.003906 18.183594 C 7.003906 18.003906 7.003906 17.828125 7.003906 17.648438 C 7.007812 17.554688 7.003906 17.457031 7.003906 17.363281 C 7.011719 16.835938 7.011719 16.835938 7.226562 16.601562 C 7.25 16.578125 7.273438 16.550781 7.296875 16.527344 C 7.375 16.441406 7.457031 16.355469 7.542969 16.273438 C 7.574219 16.242188 7.605469 16.210938 7.636719 16.179688 C 7.738281 16.078125 7.839844 15.972656 7.945312 15.871094 C 8.015625 15.800781 8.085938 15.726562 8.160156 15.65625 C 8.308594 15.507812 8.457031 15.355469 8.609375 15.207031 C 8.800781 15.015625 8.992188 14.824219 9.183594 14.632812 C 9.332031 14.484375 9.476562 14.335938 9.625 14.191406 C 9.695312 14.117188 9.765625 14.046875 9.835938 13.976562 C 9.9375 13.878906 10.035156 13.78125 10.132812 13.679688 C 10.164062 13.652344 10.191406 13.621094 10.222656 13.59375 C 10.558594 13.257812 10.949219 13.152344 11.402344 13.359375 Z M 11.402344 13.359375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 5.152344 19.609375 C 5.335938 19.789062 5.457031 19.933594 5.492188 20.195312 C 5.492188 20.257812 5.492188 20.324219 5.492188 20.390625 C 5.496094 20.425781 5.496094 20.460938 5.496094 20.496094 C 5.496094 20.613281 5.496094 20.730469 5.496094 20.851562 C 5.496094 20.933594 5.496094 21.015625 5.496094 21.097656 C 5.496094 21.269531 5.496094 21.4375 5.496094 21.609375 C 5.492188 21.832031 5.492188 22.050781 5.496094 22.269531 C 5.496094 22.4375 5.496094 22.609375 5.496094 22.777344 C 5.496094 22.859375 5.496094 22.941406 5.496094 23.019531 C 5.496094 23.132812 5.496094 23.246094 5.492188 23.359375 C 5.492188 23.425781 5.492188 23.488281 5.492188 23.554688 C 5.457031 23.824219 5.34375 23.964844 5.136719 24.136719 C 4.949219 24.234375 4.824219 24.242188 4.609375 24.242188 C 4.574219 24.246094 4.539062 24.246094 4.503906 24.246094 C 4.386719 24.246094 4.269531 24.246094 4.148438 24.246094 C 4.066406 24.246094 3.984375 24.246094 3.902344 24.246094 C 3.730469 24.246094 3.5625 24.246094 3.390625 24.246094 C 3.167969 24.242188 2.949219 24.242188 2.730469 24.246094 C 2.5625 24.246094 2.390625 24.246094 2.222656 24.246094 C 2.140625 24.246094 2.058594 24.246094 1.980469 24.246094 C 1.867188 24.246094 1.753906 24.246094 1.640625 24.242188 C 1.574219 24.242188 1.511719 24.242188 1.445312 24.242188 C 1.183594 24.207031 1.039062 24.085938 0.859375 23.902344 C 0.746094 23.65625 0.734375 23.414062 0.78125 23.144531 C 0.921875 22.90625 1.09375 22.71875 1.292969 22.523438 C 1.324219 22.492188 1.355469 22.460938 1.386719 22.429688 C 1.488281 22.328125 1.589844 22.222656 1.695312 22.121094 C 1.765625 22.050781 1.835938 21.976562 1.910156 21.90625 C 2.058594 21.757812 2.207031 21.605469 2.359375 21.457031 C 2.550781 21.265625 2.742188 21.074219 2.933594 20.882812 C 3.082031 20.734375 3.226562 20.585938 3.375 20.441406 C 3.445312 20.367188 3.515625 20.296875 3.585938 20.226562 C 3.6875 20.128906 3.785156 20.03125 3.882812 19.929688 C 3.914062 19.902344 3.941406 19.871094 3.972656 19.84375 C 4.308594 19.507812 4.699219 19.402344 5.152344 19.609375 Z M 5.152344 19.609375 " />
                    </g>
                </svg>
                <svg v-if="participantSignals == 3" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="25px" height="25px" viewBox="0 0 25 25"
                    version="1.1">
                    <g id="surface1">
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 23.902344 0.859375 C 24.089844 1.039062 24.207031 1.1875 24.242188 1.449219 C 24.246094 1.519531 24.246094 1.585938 24.242188 1.65625 C 24.242188 1.710938 24.242188 1.710938 24.246094 1.769531 C 24.246094 1.898438 24.246094 2.027344 24.242188 2.15625 C 24.242188 2.25 24.242188 2.339844 24.246094 2.433594 C 24.246094 2.6875 24.246094 2.941406 24.246094 3.199219 C 24.242188 3.472656 24.246094 3.746094 24.246094 4.023438 C 24.246094 4.5625 24.246094 5.097656 24.246094 5.636719 C 24.246094 6.074219 24.246094 6.511719 24.246094 6.949219 C 24.246094 7.011719 24.246094 7.074219 24.246094 7.140625 C 24.246094 7.265625 24.246094 7.390625 24.246094 7.519531 C 24.246094 8.667969 24.246094 9.820312 24.242188 10.972656 C 24.242188 12.023438 24.242188 13.078125 24.246094 14.128906 C 24.246094 15.308594 24.246094 16.492188 24.246094 17.671875 C 24.246094 17.796875 24.246094 17.925781 24.246094 18.050781 C 24.246094 18.113281 24.246094 18.171875 24.246094 18.238281 C 24.246094 18.675781 24.246094 19.113281 24.246094 19.546875 C 24.246094 20.082031 24.246094 20.613281 24.246094 21.144531 C 24.246094 21.417969 24.242188 21.691406 24.246094 21.960938 C 24.246094 22.210938 24.246094 22.457031 24.242188 22.707031 C 24.242188 22.796875 24.242188 22.886719 24.246094 22.976562 C 24.246094 23.101562 24.246094 23.222656 24.242188 23.34375 C 24.242188 23.378906 24.246094 23.414062 24.246094 23.449219 C 24.242188 23.695312 24.175781 23.835938 24.023438 24.023438 C 23.800781 24.210938 23.648438 24.242188 23.359375 24.242188 C 23.308594 24.246094 23.308594 24.246094 23.253906 24.246094 C 23.136719 24.246094 23.019531 24.246094 22.898438 24.246094 C 22.816406 24.246094 22.734375 24.246094 22.652344 24.246094 C 22.480469 24.246094 22.3125 24.246094 22.140625 24.246094 C 21.917969 24.242188 21.699219 24.242188 21.480469 24.246094 C 21.3125 24.246094 21.140625 24.246094 20.972656 24.246094 C 20.890625 24.246094 20.808594 24.246094 20.730469 24.246094 C 20.617188 24.246094 20.503906 24.246094 20.390625 24.242188 C 20.324219 24.242188 20.261719 24.242188 20.195312 24.242188 C 19.929688 24.207031 19.785156 24.097656 19.621094 23.890625 C 19.519531 23.707031 19.507812 23.601562 19.507812 23.394531 C 19.507812 23.34375 19.507812 23.34375 19.503906 23.292969 C 19.503906 23.183594 19.503906 23.074219 19.507812 22.964844 C 19.507812 22.882812 19.507812 22.804688 19.503906 22.722656 C 19.503906 22.503906 19.503906 22.285156 19.503906 22.066406 C 19.507812 21.828125 19.503906 21.59375 19.503906 21.355469 C 19.503906 20.894531 19.503906 20.429688 19.503906 19.96875 C 19.503906 19.589844 19.503906 19.214844 19.503906 18.839844 C 19.503906 18.785156 19.503906 18.730469 19.503906 18.675781 C 19.503906 18.566406 19.503906 18.457031 19.503906 18.347656 C 19.503906 17.328125 19.503906 16.308594 19.507812 15.289062 C 19.507812 14.414062 19.507812 13.539062 19.503906 12.660156 C 19.503906 11.644531 19.503906 10.628906 19.503906 9.613281 C 19.503906 9.503906 19.503906 9.394531 19.503906 9.285156 C 19.503906 9.234375 19.503906 9.179688 19.503906 9.125 C 19.503906 8.75 19.503906 8.375 19.503906 7.996094 C 19.503906 7.539062 19.503906 7.082031 19.503906 6.625 C 19.503906 6.390625 19.507812 6.15625 19.503906 5.921875 C 19.503906 5.707031 19.503906 5.492188 19.507812 5.28125 C 19.507812 5.203125 19.507812 5.125 19.503906 5.046875 C 19.503906 4.941406 19.503906 4.835938 19.507812 4.730469 C 19.507812 4.671875 19.507812 4.613281 19.507812 4.554688 C 19.546875 4.300781 19.691406 4.121094 19.871094 3.945312 C 19.910156 3.902344 19.910156 3.902344 19.953125 3.863281 C 19.980469 3.832031 20.011719 3.804688 20.042969 3.773438 C 20.074219 3.742188 20.105469 3.710938 20.136719 3.679688 C 20.238281 3.578125 20.339844 3.472656 20.445312 3.371094 C 20.515625 3.300781 20.585938 3.226562 20.660156 3.15625 C 20.808594 3.007812 20.957031 2.855469 21.109375 2.707031 C 21.300781 2.515625 21.492188 2.324219 21.683594 2.132812 C 21.832031 1.984375 21.976562 1.835938 22.125 1.691406 C 22.195312 1.617188 22.265625 1.546875 22.335938 1.476562 C 22.4375 1.378906 22.535156 1.28125 22.632812 1.179688 C 22.664062 1.152344 22.691406 1.121094 22.722656 1.09375 C 23.058594 0.757812 23.449219 0.652344 23.902344 0.859375 Z M 23.902344 0.859375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 17.652344 7.109375 C 17.890625 7.339844 17.980469 7.476562 17.992188 7.808594 C 17.996094 7.929688 17.996094 8.046875 17.992188 8.167969 C 17.992188 8.234375 17.992188 8.300781 17.996094 8.367188 C 17.996094 8.550781 17.996094 8.734375 17.996094 8.917969 C 17.992188 9.117188 17.996094 9.316406 17.996094 9.515625 C 17.996094 9.902344 17.996094 10.289062 17.996094 10.679688 C 17.996094 10.992188 17.996094 11.308594 17.996094 11.625 C 17.996094 11.667969 17.996094 11.714844 17.996094 11.761719 C 17.996094 11.851562 17.996094 11.941406 17.996094 12.035156 C 17.996094 12.886719 17.996094 13.742188 17.992188 14.597656 C 17.992188 15.332031 17.992188 16.066406 17.996094 16.796875 C 17.996094 17.648438 17.996094 18.5 17.996094 19.355469 C 17.996094 19.445312 17.996094 19.535156 17.996094 19.625 C 17.996094 19.671875 17.996094 19.714844 17.996094 19.761719 C 17.996094 20.078125 17.996094 20.390625 17.996094 20.707031 C 17.996094 21.089844 17.996094 21.472656 17.996094 21.859375 C 17.996094 22.054688 17.992188 22.25 17.996094 22.445312 C 17.996094 22.625 17.996094 22.804688 17.992188 22.984375 C 17.992188 23.078125 17.996094 23.175781 17.996094 23.269531 C 17.988281 23.789062 17.988281 23.789062 17.773438 24.023438 C 17.550781 24.210938 17.398438 24.242188 17.109375 24.242188 C 17.058594 24.246094 17.058594 24.246094 17.003906 24.246094 C 16.886719 24.246094 16.769531 24.246094 16.648438 24.246094 C 16.566406 24.246094 16.484375 24.246094 16.402344 24.246094 C 16.230469 24.246094 16.0625 24.246094 15.890625 24.246094 C 15.667969 24.242188 15.449219 24.242188 15.230469 24.246094 C 15.0625 24.246094 14.890625 24.246094 14.722656 24.246094 C 14.640625 24.246094 14.558594 24.246094 14.480469 24.246094 C 14.367188 24.246094 14.253906 24.246094 14.140625 24.242188 C 14.074219 24.242188 14.011719 24.242188 13.945312 24.242188 C 13.683594 24.207031 13.542969 24.097656 13.371094 23.902344 C 13.246094 23.664062 13.253906 23.464844 13.257812 23.199219 C 13.257812 23.121094 13.257812 23.121094 13.253906 23.039062 C 13.253906 22.859375 13.253906 22.679688 13.257812 22.5 C 13.253906 22.371094 13.253906 22.242188 13.253906 22.113281 C 13.253906 21.800781 13.253906 21.488281 13.253906 21.175781 C 13.253906 20.921875 13.253906 20.667969 13.253906 20.414062 C 13.253906 20.378906 13.253906 20.339844 13.253906 20.304688 C 13.253906 20.230469 13.253906 20.15625 13.253906 20.082031 C 13.253906 19.394531 13.253906 18.703125 13.257812 18.015625 C 13.257812 17.425781 13.257812 16.832031 13.253906 16.242188 C 13.253906 15.554688 13.253906 14.867188 13.253906 14.179688 C 13.253906 14.109375 13.253906 14.035156 13.253906 13.960938 C 13.253906 13.925781 13.253906 13.890625 13.253906 13.851562 C 13.253906 13.597656 13.253906 13.34375 13.253906 13.089844 C 13.253906 12.75 13.253906 12.40625 13.253906 12.066406 C 13.253906 11.9375 13.253906 11.8125 13.253906 11.6875 C 13.253906 11.515625 13.253906 11.347656 13.257812 11.175781 C 13.257812 11.125 13.253906 11.074219 13.253906 11.023438 C 13.257812 10.660156 13.363281 10.453125 13.621094 10.195312 C 13.660156 10.152344 13.660156 10.152344 13.703125 10.113281 C 13.730469 10.082031 13.761719 10.054688 13.792969 10.023438 C 13.824219 9.992188 13.855469 9.960938 13.886719 9.929688 C 13.988281 9.828125 14.089844 9.722656 14.195312 9.621094 C 14.265625 9.550781 14.335938 9.476562 14.410156 9.40625 C 14.558594 9.257812 14.707031 9.105469 14.859375 8.957031 C 15.050781 8.765625 15.242188 8.574219 15.433594 8.382812 C 15.582031 8.234375 15.726562 8.085938 15.875 7.941406 C 15.945312 7.867188 16.015625 7.796875 16.085938 7.726562 C 16.1875 7.628906 16.285156 7.53125 16.382812 7.429688 C 16.414062 7.402344 16.441406 7.371094 16.472656 7.34375 C 16.808594 7.007812 17.199219 6.902344 17.652344 7.109375 Z M 17.652344 7.109375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 11.402344 13.359375 C 11.59375 13.546875 11.707031 13.691406 11.742188 13.960938 C 11.746094 14.035156 11.746094 14.105469 11.742188 14.179688 C 11.742188 14.222656 11.746094 14.261719 11.746094 14.304688 C 11.746094 14.441406 11.746094 14.578125 11.742188 14.710938 C 11.746094 14.808594 11.746094 14.90625 11.746094 15.003906 C 11.746094 15.269531 11.746094 15.535156 11.746094 15.800781 C 11.746094 16.078125 11.746094 16.355469 11.746094 16.632812 C 11.746094 17.097656 11.746094 17.566406 11.746094 18.03125 C 11.742188 18.570312 11.742188 19.109375 11.746094 19.648438 C 11.746094 20.109375 11.746094 20.574219 11.746094 21.035156 C 11.746094 21.3125 11.746094 21.585938 11.746094 21.863281 C 11.746094 22.125 11.746094 22.382812 11.746094 22.644531 C 11.746094 22.738281 11.746094 22.832031 11.746094 22.929688 C 11.746094 23.058594 11.746094 23.1875 11.742188 23.320312 C 11.742188 23.355469 11.746094 23.394531 11.746094 23.433594 C 11.742188 23.6875 11.683594 23.828125 11.523438 24.023438 C 11.300781 24.210938 11.148438 24.242188 10.859375 24.242188 C 10.824219 24.246094 10.789062 24.246094 10.753906 24.246094 C 10.636719 24.246094 10.519531 24.246094 10.398438 24.246094 C 10.316406 24.246094 10.234375 24.246094 10.152344 24.246094 C 9.980469 24.246094 9.8125 24.246094 9.640625 24.246094 C 9.417969 24.242188 9.199219 24.242188 8.980469 24.246094 C 8.8125 24.246094 8.640625 24.246094 8.472656 24.246094 C 8.390625 24.246094 8.308594 24.246094 8.230469 24.246094 C 8.117188 24.246094 8.003906 24.246094 7.890625 24.242188 C 7.824219 24.242188 7.761719 24.242188 7.695312 24.242188 C 7.429688 24.207031 7.292969 24.09375 7.113281 23.90625 C 6.988281 23.632812 7.003906 23.371094 7.007812 23.074219 C 7.003906 23.007812 7.003906 22.941406 7.003906 22.875 C 7.003906 22.691406 7.003906 22.511719 7.003906 22.328125 C 7.003906 22.140625 7.003906 21.949219 7.003906 21.761719 C 7.003906 21.441406 7.003906 21.121094 7.003906 20.804688 C 7.007812 20.433594 7.007812 20.066406 7.003906 19.699219 C 7.003906 19.382812 7.003906 19.066406 7.003906 18.75 C 7.003906 18.558594 7.003906 18.371094 7.003906 18.183594 C 7.003906 18.003906 7.003906 17.828125 7.003906 17.648438 C 7.007812 17.554688 7.003906 17.457031 7.003906 17.363281 C 7.011719 16.835938 7.011719 16.835938 7.226562 16.601562 C 7.25 16.578125 7.273438 16.550781 7.296875 16.527344 C 7.375 16.441406 7.457031 16.355469 7.542969 16.273438 C 7.574219 16.242188 7.605469 16.210938 7.636719 16.179688 C 7.738281 16.078125 7.839844 15.972656 7.945312 15.871094 C 8.015625 15.800781 8.085938 15.726562 8.160156 15.65625 C 8.308594 15.507812 8.457031 15.355469 8.609375 15.207031 C 8.800781 15.015625 8.992188 14.824219 9.183594 14.632812 C 9.332031 14.484375 9.476562 14.335938 9.625 14.191406 C 9.695312 14.117188 9.765625 14.046875 9.835938 13.976562 C 9.9375 13.878906 10.035156 13.78125 10.132812 13.679688 C 10.164062 13.652344 10.191406 13.621094 10.222656 13.59375 C 10.558594 13.257812 10.949219 13.152344 11.402344 13.359375 Z M 11.402344 13.359375 " />
                        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(255%,255%,255%);fill-opacity:1;"
                            d="M 5.152344 19.609375 C 5.335938 19.789062 5.457031 19.933594 5.492188 20.195312 C 5.492188 20.257812 5.492188 20.324219 5.492188 20.390625 C 5.496094 20.425781 5.496094 20.460938 5.496094 20.496094 C 5.496094 20.613281 5.496094 20.730469 5.496094 20.851562 C 5.496094 20.933594 5.496094 21.015625 5.496094 21.097656 C 5.496094 21.269531 5.496094 21.4375 5.496094 21.609375 C 5.492188 21.832031 5.492188 22.050781 5.496094 22.269531 C 5.496094 22.4375 5.496094 22.609375 5.496094 22.777344 C 5.496094 22.859375 5.496094 22.941406 5.496094 23.019531 C 5.496094 23.132812 5.496094 23.246094 5.492188 23.359375 C 5.492188 23.425781 5.492188 23.488281 5.492188 23.554688 C 5.457031 23.824219 5.34375 23.964844 5.136719 24.136719 C 4.949219 24.234375 4.824219 24.242188 4.609375 24.242188 C 4.574219 24.246094 4.539062 24.246094 4.503906 24.246094 C 4.386719 24.246094 4.269531 24.246094 4.148438 24.246094 C 4.066406 24.246094 3.984375 24.246094 3.902344 24.246094 C 3.730469 24.246094 3.5625 24.246094 3.390625 24.246094 C 3.167969 24.242188 2.949219 24.242188 2.730469 24.246094 C 2.5625 24.246094 2.390625 24.246094 2.222656 24.246094 C 2.140625 24.246094 2.058594 24.246094 1.980469 24.246094 C 1.867188 24.246094 1.753906 24.246094 1.640625 24.242188 C 1.574219 24.242188 1.511719 24.242188 1.445312 24.242188 C 1.183594 24.207031 1.039062 24.085938 0.859375 23.902344 C 0.746094 23.65625 0.734375 23.414062 0.78125 23.144531 C 0.921875 22.90625 1.09375 22.71875 1.292969 22.523438 C 1.324219 22.492188 1.355469 22.460938 1.386719 22.429688 C 1.488281 22.328125 1.589844 22.222656 1.695312 22.121094 C 1.765625 22.050781 1.835938 21.976562 1.910156 21.90625 C 2.058594 21.757812 2.207031 21.605469 2.359375 21.457031 C 2.550781 21.265625 2.742188 21.074219 2.933594 20.882812 C 3.082031 20.734375 3.226562 20.585938 3.375 20.441406 C 3.445312 20.367188 3.515625 20.296875 3.585938 20.226562 C 3.6875 20.128906 3.785156 20.03125 3.882812 19.929688 C 3.914062 19.902344 3.941406 19.871094 3.972656 19.84375 C 4.308594 19.507812 4.699219 19.402344 5.152344 19.609375 Z M 5.152344 19.609375 " />
                    </g>
                </svg>
            </div>
            <!-- <v-card class="draggable-card" width="150px" height="150px" color="light" @mousedown=""></v-card> -->

            <template v-for="(participant, index) in participants" :key="index" :value="index">
                <div v-if="participant.type == 'local' && props.call_type === 'video'" :style="style"
                    @mousedown="handleMouseDown" class="box"
                    :class="!store.getters.getFloatingWindow ? '' : 'hide-box'">
                    <div
                        style="position: absolute; right: 6px; top: 3px; background: #ffffff4f; border-radius: 5px;padding-right: 5px;">
                        <!-- <svg v-if="signals == 0" width="45px" height="24px" viewBox="0 0 40 24" style="float:right;"
                            xmlns="http://www.w3.org/2000/svg">
                            <circle cx="8" cy="12" r="3" :fill="signals == 0 ? signalIconColor : 'white'" />
                            <circle cx="18" cy="12" r="3" :fill="signals == 0 ? 'white' : ''" />
                            <circle cx="28" cy="12" r="3" :fill="signals == 0 ? 'white' : ''" />
                            <circle cx="38" cy="12" r="3" :fill="signals == 0 ? 'white' : ''" />
                        </svg>

                        <svg v-if="signals == 1" width="45px" height="24px" viewBox="0 0 40 24" style="float:right;"
                            xmlns="http://www.w3.org/2000/svg">
                            <circle cx="8" cy="12" r="3" :fill="signals == 1 ? signalIconColor : 'white'" />
                            <circle cx="18" cy="12" r="3" :fill="signals == 1 ? signalIconColor : 'white'" />
                            <circle cx="28" cy="12" r="3" :fill="signals == 1 ? 'white' : ''" />
                            <circle cx="38" cy="12" r="3" :fill="signals == 1 ? 'white' : ''" />
                        </svg>

                        <svg v-if="signals == 2" width="45px" height="24px" viewBox="0 0 40 24" style="float:right;"
                            xmlns="http://www.w3.org/2000/svg">
                            <circle cx="8" cy="12" r="3" :fill="signals == 2 ? signalIconColor : 'white'" />
                            <circle cx="18" cy="12" r="3" :fill="signals == 2 ? signalIconColor : 'white'" />
                            <circle cx="28" cy="12" r="3" :fill="signals == 2 ? signalIconColor : 'white'" />
                            <circle cx="38" cy="12" r="3" :fill="signals == 2 ? 'white' : ''" />
                        </svg>

                        <svg v-if="signals == 3" width="45px" height="24px" viewBox="0 0 40 24" style="float:right;"
                            xmlns="http://www.w3.org/2000/svg">
                            <circle cx="8" cy="12" r="3" :fill="signals == 3 ? signalIconColor : 'white'" />
                            <circle cx="18" cy="12" r="3" :fill="signals == 3 ? signalIconColor : 'white'" />
                            <circle cx="28" cy="12" r="3" :fill="signals == 3 ? signalIconColor : 'white'" />
                            <circle cx="38" cy="12" r="3" :fill="signals == 3 ? signalIconColor : 'white'" />
                        </svg> -->
                        <VIcon :color="camIconColor" :icon="camIcon"></VIcon>
                        <VIcon :color="muteIconColor" :icon="muteIcon"></VIcon>
                    </div>


                    <video class="small-video" ref="participant.video" :id="`video-` + participant.id"></video>
                    <audio ref="participant.audio" :id="`audio-` + participant.id"></audio>
                </div>
                <div class="remote-box" v-if="participant.type == 'remote'">
                    <div v-if="props.call_type === 'audio'" class="audio-call-icon">
                        <VIcon color="grey" icon="mdi-account-circle"></VIcon>
                    </div>
                    <div v-if="props.call_type === 'video' && patientCamDisabled" class="audio-call-icon">
                        <VIcon color="grey" icon="mdi-account-circle"></VIcon>
                    </div>
                    <div v-if="userReconnecting" class="audio-call-icon">
                        <VIcon color="grey" icon="mdi-account-circle"></VIcon>
                        <div style="font-size: 14px;color: white;">Re-connecting...</div>
                    </div>
                    <video class="large-video" ref="large_video" :id="`video-` + participant.id"></video>
                    <audio ref="participant.audio" :id="`audio-` + participant.id"></audio>
                </div>
            </template>
            <!-- <VRow class="video-bg" v-if="callStart">
                <VCol cols="12" md="12"> -->
            <div class="text-center mb-2 cam-buttons" v-if="callStart && !store.getters.getFloatingWindow"
                :class="isMobile && isAgent ? 'cam-btn-btm' : ''">
                <p><span class="btn-transparent muted-text" v-if="patientCamDisabled && isAgent">
                        <VIcon color="red" icon="mdi-video-off"></VIcon> Patient Camera
                        Off
                    </span></p>
                <p><span class="btn-transparent muted-text" v-if="patientMuted && isAgent">
                        <VIcon color="red" icon="mdi-microphone-off"></VIcon> Patient Microphone
                        Muted
                    </span></p>
                <v-btn v-if="isMobile && props.call_type === 'video'" rounded="xl" class="mr-2 btn-transparent"
                    color="white" icon="mdi-camera-flip" @click="flipCamera()"></v-btn>
                <v-btn v-if="!isMobile && isAgent" class="mr-2 btn-transparent float-left ml-10" :color="sideIconColor"
                    :icon="sideIcon" @click="toggleSideBar()"></v-btn>
                <v-btn v-if="isMobile" class="mr-2 btn-transparent" color="white" icon="mdi-message"
                    @click="showMessageBox()"></v-btn>
                <v-btn v-if="props.call_type === 'video' && !patientCamDisabled && isAgent" class="mr-2 btn-transparent"
                    color="white" icon="mdi-camera" @click="captureImage()" title="Take Photo"></v-btn>
                <v-btn v-if="props.call_type === 'video'" class="mr-2"
                    :class="isCamDisabled ? 'cam-off' : 'btn-transparent'" :color="camIconColor" :icon="camIcon"
                    @click="cameraToggle()" :title="isCamDisabled ? 'Turn on camera' : 'Turn off camera'"></v-btn>
                <v-btn class="mr-2" :class="isMuted ? 'muted' : 'btn-transparent'" :color="muteIconColor"
                    :icon="muteIcon" @click="muteMicrophone()"
                    :title="isMuted ? 'Turn on mic' : 'Turn off mic'"></v-btn>
                <v-btn-toggle v-if="!isMobile" v-model="toggle" divided rounded="xl" class="mr-2">
                    <v-row no-gutters>

                        <v-menu :location="top">
                            <template v-slot:activator="{ props }">
                                <v-btn class="btn-transparent" color="white" v-bind="props" icon="mdi-dots-vertical"
                                    title="Devices">
                                </v-btn>
                            </template>
                            <v-list>
                                <v-list-item>
                                    <v-list-item-title v-if="props.call_type === 'video'">

                                        <v-menu :location="top">
                                            <template v-slot:activator="{ props }">
                                                <v-btn color="white" v-bind="props">Camera
                                                    <VIcon icon="mdi-chevron-up"></VIcon>
                                                </v-btn>
                                            </template>
                                            <v-list>
                                                <v-list-item v-for="(camera, index) in cameras" :key="index"
                                                    :value="camera.deviceId" @click="selectCamera(camera.deviceId)">
                                                    <v-list-item-title>
                                                        <VIcon color="green" icon="mdi-check"
                                                            v-if="getActiveCamDevice() == camera.deviceId"></VIcon>
                                                        {{ camera.label }}
                                                    </v-list-item-title>
                                                </v-list-item>
                                            </v-list>
                                        </v-menu>
                                    </v-list-item-title>
                                    <v-list-item-title>

                                        <v-menu :location="top">
                                            <template v-slot:activator="{ props }">
                                                <v-btn color="white" v-bind="props">Microphone
                                                    <VIcon icon="mdi-chevron-up"></VIcon>
                                                </v-btn>
                                            </template>
                                            <v-list>
                                                <v-list-item v-for="(microphone, index) in microphones" :key="index"
                                                    :value="microphone.deviceId"
                                                    @click="selectMicrophone(microphone.deviceId)">
                                                    <v-list-item-title>
                                                        <VIcon color="green" icon="mdi-check"
                                                            v-if="getActiveMicDevice() == microphone.deviceId">
                                                        </VIcon>
                                                        {{ microphone.label }}
                                                    </v-list-item-title>
                                                </v-list-item>
                                            </v-list>
                                        </v-menu>
                                    </v-list-item-title>
                                    <v-list-item-title>

                                        <v-menu :location="top">
                                            <template v-slot:activator="{ props }">
                                                <v-btn color="white" v-bind="props">Speaker
                                                    <VIcon icon="mdi-chevron-up"></VIcon>
                                                </v-btn>
                                            </template>
                                            <v-list>
                                                <v-list-item v-for="(speaker, index) in speakers" :key="index"
                                                    :value="speaker.deviceId" @click="selectSpeaker(speaker.deviceId)">
                                                    <v-list-item-title>
                                                        <VIcon color="green" icon="mdi-check"
                                                            v-if="getActiveSpeakerDevice() == speaker.deviceId">
                                                        </VIcon>
                                                        {{ speaker.label }}
                                                    </v-list-item-title>
                                                </v-list-item>
                                            </v-list>
                                        </v-menu>
                                    </v-list-item-title>
                                </v-list-item>
                            </v-list>
                        </v-menu>
                    </v-row>
                </v-btn-toggle>
                <v-btn rounded="xl" class=" btn-endcall" color="white" icon="mdi-phone-hangup" @click="endCall()"
                    title="End Call"></v-btn>
                <v-btn v-if="!isMobile" class="mr-2 btn-transparent" :class="isMobile ? 'ml-2' : 'float-right mr-10'"
                    :color="screenIconColor" :icon="screenIcon" @click="toggleFullscreen()"></v-btn>
            </div>
            <!-- </VCol>
            </VRow> -->
        </div>

        <!-- <div id="jaas-container" >
        </div> -->
        <!-- Show the iframe when countdown reaches 1 -->
        <!-- <iframe v-if="showIframe" ref="myIframe" :src="responseUrl" width="100%" height="400" style="border:0"></iframe>
        <div v-else>
          Loading iframe...
        </div> -->
    </VCard>
    <v-card v-if="showMessage && !store.getters.getFloatingWindow" :class="isMobile ? 'wid-mob' : 'wid-desk'"
        class="chatbox" :style="{ bottom: '0px', right: '24px', overflow: `hidden` }">
        <v-card-title class="headline">
            <small>View Chat </small>
            <a v-if="isMobile" icon @click="hideMessageBox" class="float-right">
                <v-icon>{{ isOpen ? 'mdi-chevron-down' : 'mdi-chevron-up' }}</v-icon>
            </a>
            <a v-if="!isMobile" icon @click="toggleChat" class="float-right">
                <v-icon>{{ isOpen ? 'mdi-chevron-down' : 'mdi-chevron-up' }}</v-icon>
            </a>
        </v-card-title>
        <v-divider></v-divider>
        <div v-if="isOpen" ref="messageContainer">
            <v-card-text style="min-height: 250px;" class="message-container">
                <div v-for="message in messages" :key="message.id"
                    :class="message.sender === 'user' ? 'user-message' : 'other-message'" ref="message">
                    {{ message.text }}
                </div>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions class="pb-2 pt-2" style="display: flex; align-items: center;">
                <v-text-field v-model="newMessage" label="" outlined @keydown.enter.prevent="sendMessage"
                    style="flex: 1;"></v-text-field>
                <v-btn @click="sendMessage" size="small" flat class="btn btn-primary"
                    style="background-color: #696cff; color: white; height: 55px;">
                    <v-icon color="white">{{ 'mdi-send' }}</v-icon>
                </v-btn>
            </v-card-actions>
        </div>
    </v-card>
</template>
<style scoped>
.hide-box {
    display: none;
}

.info-container {
    display: flex;
    align-items: center;
    /* Aligns items vertically center */
    justify-content: start;
    /* Aligns items to the start of the flex container */
    gap: 10px;
    /* Adds space between each item */
    padding-left: 10px;
    margin: 0;
}

.pt-info {
    position: relative;
    /* top: 5px; */
    margin: 0px;
    width: 100%;
    z-index: 99;
    border-radius: 0px;
    background-color: #6d7176;
}

.muted-text {
    padding: 5px;
    border-radius: 5px;
}

.call-quality-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    margin-top: 10px;
    right: 10px;
    z-index: 999;
    padding: 5px;
    border-radius: 5px;
}

.signal-bar {
    width: 5px;
    height: 15px;
    margin-right: 2px;
    background-color: #ccc;
}

.signal-bar.active {
    background-color: #4caf50;
}

.audio-call-icon {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: calc(35% - 10px);
    width: 100%;
    font-size: 80px;
}

.cam-btn-btm {
    bottom: 85px !important;
}

.wid-mob {
    width: 87%;
}

.wid-desk {
    width: 300px;
}

.chatbox {
    position: fixed;
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
}

.message-container {
    display: flex;
    flex-direction: column;
}

.message-container {
    max-height: 250px;
    /* Set maximum height */
    overflow-y: auto;
    /* Enable vertical scrollbar */
}

.user-message {
    align-self: flex-end;
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 5px;
}

.other-message {
    align-self: flex-start;
    background-color: #f0f0f0;
    color: #333;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 5px;
}

.btn-transparent {
    background-color: #00000063 !important;
    color: white !important;
}

.cam-buttons {
    position: absolute;
    bottom: 50px;
    width: 100%;
    margin: 0 auto;
    z-index: 999
}

.fullscreen-div {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    transition: all 0.5s ease;
}

.fullscreen {
    /* position: fixed; */
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
}

/* Show navbar when not in full screen */
.layout-navbar:not(.fullscreen) {
    display: block;
}

/* Hide navbar when in full screen */
.layout-navbar.fullscreen {
    display: none;
}

.cam-off {
    background-color: red;
    color: white
}

.muted {
    background-color: red;
    color: white
}

.btn-endcall {
    background-color: #9702022b !important;
    color: red !important;
}

.recording-badge {
    text-align: right;
    color: white;
    margin-right: 10px;
    background: red;
    min-width: 10%;
    float: right;
    border-radius: 25px;
    padding-right: 3px;
    z-index: 10;
    position: relative;
}

.video-bg {
    background-color: #4d5d67;
}

.small-screen {
    background-color: white;
    min-height: 150px;
    max-width: 24%;
}

.livekit-container {
    /* min-height: 100vh; */
    /* background-color: #303a40; */
    position: relative;
}

.draggable-card {
    cursor: move;
    position: relative;
}

.box {
    position: absolute;
    cursor: move;
    width: 150px;
    height: 150px;
    background: #313131;
    border-radius: 10px;
    margin-left: 10px;
    z-index: 2;
}

.large-video {
    height: 100%;
    width: 100%;
}

.small-video {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    width: auto;
    z-index: 9;
}

.remote-box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}
</style>
