<!-- SPDX-License-Identifier: MIT -->
<!-- Copyright (c) 2025 Matthias Bilger matthias@bilger.info -->
<div id="mainDiv" style="background-color: black; border-radius: 10px; padding: 20px 10px; display: flex; flex-direction: column; align-items: center; width: 157px;">
    <div style="display: flex; align-items: center;">
        <div style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
        <button style="background-color: green; border-radius: 50%; margin: 5px; padding: 30px;" title="(Un)Mute" onclick="sendButtonPress(1)"></button>
        <div class="indicator1" style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
    </div>
    <div style="display: flex; align-items: center;">
        <div style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
        <button style="background-color: yellow; border-radius: 50%; margin: 5px; padding: 30px;" title="Lower/Raise Hand" onclick="sendButtonPress(2)"></button>
        <div class="indicator2" style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
    </div>
    <div style="display: flex; align-items: center;">
        <div style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
        <button style="background-color: black; color:black; border-radius: 50%; margin: 5px; padding: 30px;" title="Show Teams" onclick="sendButtonPress(3)"></button>
        <div class="indicator3" style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
    </div>
    <div style="display: flex; align-items: center;">
        <div style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
        <button style="background-color: blue; border-radius: 50%; margin: 5px; padding: 30px;" title="Like" onclick="sendButtonPress(4)"></button>
        <div class="indicator4" style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
    </div>
    <div style="display: flex; align-items: center;">
        <div style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
        <button style="background-color: red; border-radius: 50%; margin: 5px; padding: 30px;" title="Leave Call" onclick="sendButtonPress(5)"></button>
        <div class="indicator5" style="background-color: black; border-radius: 50%; width: 20px; height: 20px; margin-left: 10px;"></div>
    </div>
</div>
<button onclick="openPopup()">Open in Popup</button>
