{{ define "devices" }}
{{ template "header" .}}

<section class="container">
    <h2 style="display: flex; align-items: center;">
        <span>Device activity</span>
        <button id="refresh-devices">
            <svg fill="#000000" height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 383.748 383.748" xml:space="preserve">
                <g>
                    <path d="M62.772,95.042C90.904,54.899,137.496,30,187.343,30c83.743,0,151.874,68.13,151.874,151.874h30
		C369.217,81.588,287.629,0,187.343,0c-35.038,0-69.061,9.989-98.391,28.888C70.368,40.862,54.245,56.032,41.221,73.593
		L2.081,34.641v113.365h113.91L62.772,95.042z" />
                    <path d="M381.667,235.742h-113.91l53.219,52.965c-28.132,40.142-74.724,65.042-124.571,65.042
		c-83.744,0-151.874-68.13-151.874-151.874h-30c0,100.286,81.588,181.874,181.874,181.874c35.038,0,69.062-9.989,98.391-28.888
		c18.584-11.975,34.707-27.145,47.731-44.706l39.139,38.952V235.742z" />
                </g>
            </svg>
        </button>
    </h2>
    {{ if .Devices }}
    <ul class="device-list">
        {{range .Devices}}
        <li class="device">
            <p>{{.DeviceSerial}} - <strong>Last time used</strong>: {{.LastTimeUsedHuman}}</span>
        </li>
        {{end}}
    </ul>
    {{ else }}
    <p>No devices connected</p>
    {{ end }}
    {{if .IsWindows}}
    <button id="reboot-all" class="cancel">Reboot the proxy</button>
    {{end}}
</section>

<script>
    const rebootButton = document.querySelector("button#reboot-all");

    document.getElementById("refresh-devices")?.addEventListener("click", () => {
        window.location.reload();
    })

    rebootButton.addEventListener("click", async () => {
        try {
            const refreshtime = 5000;
            const psw = window.prompt("Enter the password to reboot the proxy");
            if (!psw) return;
            rebootButton.disabled = true;
            await betterFetch("/reboot", {
                method: "POST",
                body: JSON.stringify({ password: psw })
            });
            showToast("Proxy rebooted successfully, reloading the page in 5 seconds", "success", refreshtime);
            setTimeout(() => {
                window.location.reload();
            }, refreshtime)
        } catch (error) {
            rebootButton.disabled = false;
            showToast(error?.message || String(error) || "Failed to reboot the proxy", "error");
        }
    })
</script>


{{ template "footer" . }}
{{ end }}