{capture name="display"}
    <table width="50%" align="center" class="grid" cellspacing="1" cellpadding="1">
        <tr>
            <th>
                <h3 style="color: white">Selecione a fila para se conectar:</h3>
            </th>
        </tr>

        <tr>
            <th>
                <select name="selectqueue">
                    {$options}
                </select>
            </th>
        </tr>

        <tr>
            <th>
                <input type="submit" name="btConectar"  id="btConsulta" value="Conectar">
            </th>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <table width="30%" align="center" class="grid" cellspacing="1" cellpadding="1">
        <tr>
            <th>
                <h3 style="color: white">Escaneie pelo Aplicativo Simples Chat:</h3>
            </th>
        </tr>

        <tr align="center">
            <td>
                <div id="qrcode" style="padding: 15px 15px 15px"></div>
            </td>
        </tr>
    </table>


    {literal}
        <script src="../../scriptApl/qrcode.min.js"></script>
        <script>
            $(function () {
                const jsonapp = {/literal}{$jsonApp}{literal}
                console.log(JSON.stringify(jsonapp))
                new QRCode(document.getElementById("qrcode"), {
                    text: JSON.stringify(jsonapp),
                    width: 300,
                    height: 300,
                    correctLevel: QRCode.CorrectLevel.H
                });
            });
        </script>
    {/literal}
{/capture}