<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resco Studio Registration</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: #ffffff;
            color: #242424;
            font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
            font-size: 14px;
            line-height: 20px;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 24px 16px;
        }

        .state {
            display: none;
            flex-direction: column;
            align-items: center;
            text-align: center;
            max-width: 520px;
        }

        body[data-state="checking"] #checking,
        body[data-state="not-registered"] #notRegistered {
            display: flex;
        }

        #checking {
            flex-direction: row;
            gap: 12px;
            color: #616161;
        }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #e0e0e0;
            border-top-color: #0f6cbd;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .icon {
            width: 48px;
            height: 48px;
            margin-bottom: 16px;
            border-radius: 50%;
            background: #ebf3fc;
            color: #0f6cbd;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        h1 {
            margin: 0 0 8px;
            font-size: 20px;
            line-height: 28px;
            font-weight: 600;
        }

        p {
            margin: 0 0 12px;
            color: #424242;
        }

        .org-url {
            display: inline-block;
            max-width: 100%;
            box-sizing: border-box;
            margin: 4px 0 16px;
            padding: 4px 10px;
            border-radius: 4px;
            background: #f5f5f5;
            color: #242424;
            font-family: Consolas, "Courier New", monospace;
            font-size: 13px;
            overflow-wrap: anywhere;
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 8px;
        }

        .button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 32px;
            padding: 0 12px;
            border: 1px solid #d1d1d1;
            border-radius: 4px;
            background: #ffffff;
            color: #242424;
            font: inherit;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
        }

        .button:hover {
            background: #f5f5f5;
        }

        .button.primary {
            border-color: #0f6cbd;
            background: #0f6cbd;
            color: #ffffff;
        }

        .button.primary:hover {
            background: #115ea3;
        }

        .button:focus-visible {
            outline: 2px solid #000000;
            outline-offset: 1px;
        }
    </style>
    <script>
        // Called by the form library resco_extendedsharing/extendedSharingForm.js (RescoExtendedSharing.onLoad).
        // state: "checking" while the registration is being verified, "not-registered" once the service says so.
        // studioUrl: the Resco Studio of this environment, so this page does not have to hardcode one; the link
        // below keeps its production URL when an older form library does not pass it.
        var retryRegistrationCheck = null;

        function setRegistrationNoticeState(state, orgUrl, onRetry, studioUrl) {
            retryRegistrationCheck = onRetry || null;
            var apply = function () {
                document.body.setAttribute("data-state", state);
                document.getElementById("orgUrl").textContent = orgUrl || "This environment";
                document.getElementById("checkAgain").style.display = retryRegistrationCheck ? "" : "none";
                if (studioUrl) {
                    document.getElementById("openStudio").href = studioUrl;
                }
            };
            if (document.body) {
                apply();
            } else {
                document.addEventListener("DOMContentLoaded", apply);
            }
        }

        function checkAgain() {
            if (retryRegistrationCheck) {
                retryRegistrationCheck();
            }
        }
    </script>
</head>
<body data-state="checking">
    <div id="checking" class="state" role="status">
        <div class="spinner" aria-hidden="true"></div>
        <span>Checking the Resco Studio registration of this environment&hellip;</span>
    </div>

    <div id="notRegistered" class="state" role="region" aria-labelledby="notRegisteredTitle">
        <div class="icon" aria-hidden="true">
            <svg width="24" height="24" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 10.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5ZM10 6a.5.5 0 0 1 .5.41V11.6a.5.5 0 0 1-1 .09V6.5A.5.5 0 0 1 10 6Z" />
            </svg>
        </div>
        <h1 id="notRegisteredTitle">Register this environment in Resco Studio</h1>
        <p>Extended form sharing creates and manages safe links through Resco Studio. This environment is not registered or not active there yet:</p>
        <span id="orgUrl" class="org-url">This environment</span>
        <p>Sign in to Resco Studio and register it, or ask your administrator to do it. Then check again to start sharing forms.</p>
        <div class="actions">
            <a id="openStudio" class="button primary" href="https://studio.resco.net" target="_blank" rel="noopener noreferrer">
                Open Resco Studio
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                    <path d="M4.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 1 1 0v2a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 11.5v-7A2.5 2.5 0 0 1 4.5 2h2a.5.5 0 0 1 0 1h-2ZM9 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V3.7L9.85 6.85a.5.5 0 1 1-.7-.7L12.29 3H9.5a.5.5 0 0 1-.5-.5Z" />
                </svg>
            </a>
            <button id="checkAgain" class="button" type="button" onclick="checkAgain()" style="display: none">Check again</button>
        </div>
    </div>
</body>
</html>
