From 56b06c1f49609ec368a21c0f4e4f6273fa31abb9 Mon Sep 17 00:00:00 2001
From: tripathyr <rohit.tripathy@gmail.com>
Date: Mon, 25 Aug 2025 15:25:58 +0530
Subject: [PATCH] Update index.html

---
 index.html | 4205 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 4205 insertions(+)
diff --git a/index.html b/index.html
index a3bb5fa..f94bd5a 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,2483 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>RanchiMall Internships</title>
+    <meta name="description" content="Web app for managing interns and projects">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
+        rel="stylesheet">
+    <script src="scripts/components.js" defer></script>
+    <script id="floGlobals">
+        /* Constants for FLO blockchain operations !!Make sure to add this at beginning!! */
+        const floGlobals = {
+            blockchain: "FLO",
+            adminID: "FMyRTrz9CG4TFNM6rCQgy3VQ5NF23bY2xD",
+            application: "InternManage",
+            rmIncorporationId: "FKNW5eCCp2SnJMJ6pLLpUCvk5hAage8Jtk",
+            ribcId: "FDaX363r1ooANA9A2erhehhigNTnidq3o4",
+            certificateIssuerAddress: "FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE"
+        }
+    </script>
+    <script src="scripts/lib.min.js" defer></script>
+    <script src="scripts/floCrypto.min.js" defer></script>
+    <script src="scripts/floBlockchainAPI.min.js" defer></script>
+    <script src="scripts/compactIDB.min.js" defer></script>
+    <script src="scripts/floCloudAPI.min.js" defer></script>
+    <script src="scripts/floDapps.min.js" defer></script>
+    <script src="scripts/btcOperator.min.js" defer></script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"
+        integrity="sha512-/hVAZO5POxCKdZMSLefw30xEVwjm94PAV9ynjskGbIpBvHO9EBplEcdUlBdCKutpZsF+La8Ag4gNrG0gAOn3Ig=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
+    <script src="scripts/ribc.min.js" defer></script>
+    <script id="onLoadStartUp">
+        function onLoadStartUp() {
+            routeTo('loading')
+            document.body.classList.remove('hidden')
+            floDapps.setCustomPrivKeyInput(getSignedIn);
+            floDapps.setMidStartup(() =>
+                new Promise((resolve, reject) => {
+                    RIBC.refreshObjectData()
+                        .then(() => {
+                            resolve()
+                            setTimeout(() => {
+                                if (!floGlobals.loaded) {
+                                    routeTo(window.location.hash);
+                                }
+                            }, 0);
+                        }).catch((err) => {
+                            reject(err)
+                        })
+                    fetchCertificateIssueTxs()
+                    fetchPayments()
+                })
+            )
+            floDapps.launchStartUp().then(result => {
+                console.log(result)
+                if (!floCrypto.validateFloID(floDapps.user.id)) {
+                    floGlobals.myBtcID = floDapps.user.id
+                    const type = coinjs.addressDecode(floGlobals.myBtcID).type
+                    if (type === 'standard') {
+                        floGlobals.myFloID = btcOperator.convert.legacy2legacy(floGlobals.myBtcID, 0x23);
+                    } else if (type === 'bech32') {
+                        floGlobals.myFloID = btcOperator.convert.bech2legacy(floGlobals.myBtcID, 0x23);
+                    } else {
+                        notify(`Multisig address can't be used to sign in`, 'error');
+                        return;
+                    }
+                } else {
+                    floGlobals.myFloID = floDapps.user.id
+                    floGlobals.myBtcID = btcOperator.convert.legacy2bech(floDapps.user.id)
+                }
+                getRef('user_profile_id').textContent = floGlobals.myFloID
+                let showingFloID = true
+                // alternating between floID and btcID every 10 seconds
+                setInterval(() => {
+                    getRef('user_profile_id').textContent = showingFloID ? floGlobals.myBtcID : floGlobals.myFloID
+                    showingFloID = !showingFloID
+                }, 10000)
+                floGlobals.isSubAdmin = floGlobals.subAdmins.includes(floGlobals.myFloID)
+                floGlobals.loaded = true
+                RIBC.init(floGlobals.isSubAdmin).then(result => {
+                    console.log(result)
+                    renderAllElements()
+                    routeTo(window.location.hash, { firstLoad: true })
+                }).catch(error => console.error(error))
+            }).catch(error => console.error(error))
+        }
+    </script>
+</head>
+
+<body onload="onLoadStartUp()" class="hidden">
+    <sm-notifications id="notification_drawer"></sm-notifications>
+    <sm-popup id="confirmation_popup">
+        <h4 id="confirm_title"></h4>
+        <p id="confirm_message"></p>
+        <div class="flex align-center gap-0-5 margin-left-auto">
+            <button class="button cancel-button">Cancel</button>
+            <button class="button button--primary confirm-button">OK</button>
+        </div>
+    </sm-popup>
+    <div id="secondary_pages" class="page">
+        <header class="flex align-center gap-1 space-between">
+            <div class="app-brand">
+                <svg id="main_logo" class="icon" viewBox="0 0 27.25 32">
+                    <title>RanchiMall</title>
+                    <path
+                        d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
+                </svg>
+                <div class="app-name">
+                    <div class="app-name__company">RanchiMall</div>
+                    <h4 class="app-name__title">
+                        Internships
+                    </h4>
+                </div>
+            </div>
+            <theme-toggle></theme-toggle>
+        </header>
+        <div id="landing" class="grid inner-page hidden">
+            <div class="gap-1-5 landing__card">
+                <div class="grid gap-1-5">
+                    <h1>
+                        Blockchain Internships
+                    </h1>
+                    <div class="flex gap-0-3">
+                        <a href="#/sign_up" class="button"
+                            style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get
+                            started</a>
+                        <a href="#/sign_in" class="button button--primary">Sign in</a>
+                    </div>
+                </div>
+                <img src="assets/working-intern.svg" alt="">
+            </div>
+            <div id="landing_tasks_wrapper" class="flex flex-direction-column justify-content-center"></div>
+        </div>
+        <article id="sign_in" class="inner-page hidden">
+            <section>
+                <h1 style="font-size: 2rem;">Sign in</h1>
+                <p>Welcome back, glad to see you again</p>
+                <sm-form id="sign_in_form">
+                    <sm-input id="private_key_field" class="password-field" type="password"
+                        placeholder="FLO private key" error-text="Private key is invalid" data-private-key required>
+                        <label slot="right" class="interactive">
+                            <input type="checkbox" class="hidden" autocomplete="off" readonly
+                                onchange="togglePrivateKeyVisibility(this)">
+                            <svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <title>Hide password</title>
+                                <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
+                            </svg>
+                            <svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                viewBox="0 0 24 24" width="24px" fill="#000000">
+                                <title>Show password</title>
+                                <path d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+                            </svg>
+                        </label>
+                    </sm-input>
+                    <button id="sign_in_button" class="button button--primary" type="submit" disabled>Sign in</button>
+                </sm-form>
+                <p>
+                    New here? <a href="#/sign_up">get your FLO login credentials</a>
+                </p>
+            </section>
+        </article>
+        <article id="sign_up" class="inner-page hidden">
+            <keys-generator id="keys_generator"></keys-generator>
+        </article>
+        <div id="loading" class="inner-page hidden">
+            <cube-loader></cube-loader>
+            <h4 class="page__tag-line margin-block-1">Getting everything ready, hang on.</h4>
+            <button class="button" onclick="floDapps.clearCredentials()">Reset</button>
+        </div>
+    </div>
+    <div id="task_details" class="hidden">
+        <div id="task_details__backdrop" onclick="hideTaskDetails()"></div>
+        <div id="task_details_wrapper" class="flex flex-direction-column gap-1-5"></div>
+    </div>
+    <main id="main_page" class="grid page hidden">
+        <header id="main_header" class="space-between">
+            <div class="app-brand hide-on-mobile">
+                <svg id="main_logo" class="icon" viewBox="0 0 27.25 32">
+                    <title>RanchiMall</title>
+                    <path
+                        d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
+                </svg>
+                <div class="app-name">
+                    <div class="app-name__company">RanchiMall</div>
+                    <h4 class="app-name__title">
+                        Internships
+                    </h4>
+                </div>
+            </div>
+            <theme-toggle></theme-toggle>
+            <button id="user_profile_button" class="user-content button--small" onclick="openPopup('profile_popup')">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" viewBox="0 0 24 24"
+                    width="24px" fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none"></path>
+                    <path
+                        d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z">
+                    </path>
+                </svg>
+                <div id="user_profile_id" class="overflow-ellipsis"></div>
+            </button>
+            <div id="commit_wrapper" class="flex align-center space-between gap-1 hidden">
+                <strong>Don't forget to save changes!</strong>
+                <button id="commit_changes_button" class="button button--small button--primary admin-option"
+                    onclick="commitToChanges()">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                        height="24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path
+                            d="M7 19v-6h10v6h2V7.828L16.172 5H5v14h2zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 12v4h6v-4H9z" />
+                    </svg>
+                    Save
+                </button>
+            </div>
+        </header>
+        <nav id="main_nav">
+            <a id="dashboard_btn" href="#/dashboard_page" class="nav-list__item nav-list__item--active interactive"
+                title="open dashboard page">
+                <svg class="icon icon--outlined" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                    height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M13 21V11h8v10h-8zM3 13V3h8v10H3zm6-2V5H5v6h4zM3 21v-6h8v6H3zm2-2h4v-2H5v2zm10 0h4v-6h-4v6zM13 3h8v6h-8V3zm2 2v2h4V5h-4z" />
+                </svg>
+                <svg class="icon icon--filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                    height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" />
+                </svg>
+                <span class="nav-list__item_title">
+                    Dashboard
+                </span>
+            </a>
+            <a id="update_panel_btn" href="#/updates_page" class="nav-list__item interactive" title="show updates">
+                <svg class="icon icon--outlined" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                    width="24px" fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z" />
+                </svg>
+                <svg class="icon icon--filled" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                    width="24px" fill="#000000">
+                    <path
+                        d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
+                </svg>
+                <span class="nav-list__item_title">
+                    Updates
+                </span>
+            </a>
+            <a href="#/applications" class="nav-list__item interactive not-for-admin"
+                title="See status of applications">
+                <svg class="icon icon--outlined" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <g>
+                        <path d="M0,0h24v24H0V0z" fill="none" />
+                    </g>
+                    <g>
+                        <g>
+                            <path
+                                d="M15,3H5C3.9,3,3.01,3.9,3.01,5L3,19c0,1.1,0.89,2,1.99,2H19c1.1,0,2-0.9,2-2V9L15,3z M5,19V5h9v5h5v9H5z M9,8 c0,0.55-0.45,1-1,1S7,8.55,7,8s0.45-1,1-1S9,7.45,9,8z M9,12c0,0.55-0.45,1-1,1s-1-0.45-1-1s0.45-1,1-1S9,11.45,9,12z M9,16 c0,0.55-0.45,1-1,1s-1-0.45-1-1s0.45-1,1-1S9,15.45,9,16z" />
+                        </g>
+                    </g>
+                </svg>
+                <svg class="icon icon--filled" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <g>
+                        <path d="M0,0h24v24H0V0z" fill="none" />
+                    </g>
+                    <g>
+                        <g>
+                            <path
+                                d="M15,3H5C3.9,3,3.01,3.9,3.01,5L3,19c0,1.1,0.89,2,1.99,2H19c1.1,0,2-0.9,2-2V9L15,3z M8,17c-0.55,0-1-0.45-1-1s0.45-1,1-1 s1,0.45,1,1S8.55,17,8,17z M8,13c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S8.55,13,8,13z M8,9C7.45,9,7,8.55,7,8s0.45-1,1-1 s1,0.45,1,1S8.55,9,8,9z M14,10V4.5l5.5,5.5H14z" />
+                        </g>
+                    </g>
+                </svg>
+                <span class="nav-list__item_title">
+                    Applications
+                </span>
+            </a>
+            <a id="admin_page_nav_button" href="#/admin_page"
+                class="admin-option nav-list__item interactive open-first-project" title="open admin panel">
+                <svg class="icon icon--outlined" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <g>
+                        <path d="M0,0h24v24H0V0z" fill="none" />
+                    </g>
+                    <g>
+                        <g>
+                            <path
+                                d="M4,18v-0.65c0-0.34,0.16-0.66,0.41-0.81C6.1,15.53,8.03,15,10,15c0.03,0,0.05,0,0.08,0.01c0.1-0.7,0.3-1.37,0.59-1.98 C10.45,13.01,10.23,13,10,13c-2.42,0-4.68,0.67-6.61,1.82C2.51,15.34,2,16.32,2,17.35V20h9.26c-0.42-0.6-0.75-1.28-0.97-2H4z" />
+                            <path
+                                d="M10,12c2.21,0,4-1.79,4-4s-1.79-4-4-4C7.79,4,6,5.79,6,8S7.79,12,10,12z M10,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 c-1.1,0-2-0.9-2-2S8.9,6,10,6z" />
+                            <path
+                                d="M20.75,16c0-0.22-0.03-0.42-0.06-0.63l1.14-1.01l-1-1.73l-1.45,0.49c-0.32-0.27-0.68-0.48-1.08-0.63L18,11h-2l-0.3,1.49 c-0.4,0.15-0.76,0.36-1.08,0.63l-1.45-0.49l-1,1.73l1.14,1.01c-0.03,0.21-0.06,0.41-0.06,0.63s0.03,0.42,0.06,0.63l-1.14,1.01 l1,1.73l1.45-0.49c0.32,0.27,0.68,0.48,1.08,0.63L16,21h2l0.3-1.49c0.4-0.15,0.76-0.36,1.08-0.63l1.45,0.49l1-1.73l-1.14-1.01 C20.72,16.42,20.75,16.22,20.75,16z M17,18c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S18.1,18,17,18z" />
+                        </g>
+                    </g>
+                </svg>
+                <svg class="icon icon--filled" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <g>
+                        <path d="M0,0h24v24H0V0z" fill="none" />
+                    </g>
+                    <g>
+                        <g>
+                            <circle cx="10" cy="8" r="4" />
+                            <path
+                                d="M10.67,13.02C10.45,13.01,10.23,13,10,13c-2.42,0-4.68,0.67-6.61,1.82C2.51,15.34,2,16.32,2,17.35V20h9.26 C10.47,18.87,10,17.49,10,16C10,14.93,10.25,13.93,10.67,13.02z" />
+                            <path
+                                d="M20.75,16c0-0.22-0.03-0.42-0.06-0.63l1.14-1.01l-1-1.73l-1.45,0.49c-0.32-0.27-0.68-0.48-1.08-0.63L18,11h-2l-0.3,1.49 c-0.4,0.15-0.76,0.36-1.08,0.63l-1.45-0.49l-1,1.73l1.14,1.01c-0.03,0.21-0.06,0.41-0.06,0.63s0.03,0.42,0.06,0.63l-1.14,1.01 l1,1.73l1.45-0.49c0.32,0.27,0.68,0.48,1.08,0.63L16,21h2l0.3-1.49c0.4-0.15,0.76-0.36,1.08-0.63l1.45,0.49l1-1.73l-1.14-1.01 C20.72,16.42,20.75,16.22,20.75,16z M17,18c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S18.1,18,17,18z" />
+                        </g>
+                    </g>
+                </svg>
+                <span class="nav-list__item_title">
+                    Manage
+                </span>
+            </a>
+        </nav>
+        <article id="sub_page_container">
+            <section id="dashboard_page" class="inner-page hidden"></section>
+            <section id="admin_page" class="inner-page hidden">
+                <div id="admin_page__header" class="flex align-center space-between">
+                    <sm-chips id="admin_view_selector">
+                        <sm-chip value="projects" selected>Projects</sm-chip>
+                        <sm-chip value="interns">Interns</sm-chip>
+                        <sm-chip value="task_display">Task display</sm-chip>
+                        <sm-chip value="requests">Requests</sm-chip>
+                        <sm-chip value="certificates">Certificates</sm-chip>
+                    </sm-chips>
+                </div>
+                <div id="admin_views">
+                    <section id="projects_container">
+                        <div id="projects_container__left" class="flex flex-direction-column">
+                            <button class="button button--colored justify-content-start margin-block-0-5"
+                                onclick="openPopup('add_project_popup')">
+                                <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24" width="24" height="24">
+                                    <path fill="none" d="M0 0h24v24H0z"></path>
+                                    <path
+                                        d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2zM4 5v14h16V7h-8.414l-2-2H4zm7 7V9h2v3h3v2h-3v3h-2v-3H8v-2h3z">
+                                    </path>
+                                </svg>
+                                Add project
+                            </button>
+                            <div id="admin_page__project_list" class="list-container observe-empty-state"></div>
+                            <h4 class="empty-state">No project added</h4>
+                        </div>
+                        <section id="project_editing_panel" class="hidden">
+                            <div id="project_details_wrapper"
+                                class="flex flex-direction-column gap-1 margin-bottom-2 align-items-start">
+                                <a class="flex gap-0-3 align-center button--colored hide-on-desktop"
+                                    href="#/admin_page/projects" title="Go back">
+                                    <svg class="icon" style="margin-left: -0.3rem;" xmlns="http://www.w3.org/2000/svg"
+                                        height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                        <path d="M0 0h24v24H0V0z" fill="none" />
+                                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
+                                    </svg>
+                                    Projects
+                                </a>
+                                <div class="flex flex-wrap align-items-start gap-0-3">
+                                    <h2 id="editing_panel__title" data-editable></h2>
+                                    <button class="button button--colored icon-only admin-option"
+                                        title="Edit this title" onclick="makeEditable(this.previousElementSibling)">
+                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                            viewBox="0 0 24 24" width="24px" fill="#000000">
+                                            <path d="M0 0h24v24H0V0z" fill="none" />
+                                            <path
+                                                d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
+                                        </svg>
+                                    </button>
+                                </div>
+                                <div class="flex flex-wrap align-items-start gap-0-3">
+                                    <p id="editing_panel__description" class="ws-pre-line wrap-around" data-editable>
+                                    </p>
+                                    <button class="button button--colored icon-only admin-option"
+                                        title="Edit this description"
+                                        onclick="makeEditable(this.previousElementSibling)">
+                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                            viewBox="0 0 24 24" width="24px" fill="#000000">
+                                            <path d="M0 0h24v24H0V0z" fill="none" />
+                                            <path
+                                                d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+                            <div id="branch_container"></div>
+                            <h4>Tasks</h4>
+                            <ul id="task_list" class="grid observe-empty-state"></ul>
+                            <div class="empty-state padding-block-1">
+                                <p>
+                                    No tasks added yet, tasks will appear here after adding them.
+                                </p>
+                            </div>
+                            <button id="add_task" class="button " onclick="addPlaceholderTask()">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                                    height="24">
+                                    <path fill="none" d="M0 0h24v24H0z" />
+                                    <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
+                                </svg>
+                                Add task
+                            </button>
+                        </section>
+                    </section>
+                    <section id="interns_container" class="flex flex-direction-column hidden">
+                        <ul id="admin_page__intern_list" class="grid observe-empty-state"></ul>
+                        <h4 class="empty-state">No interns added</h4>
+                    </section>
+                    <section id="task_display_container" class="flex hidden">
+                        <div class="flex flex-direction-column gap-1 flex-1">
+                            <h4>Displayed tasks</h4>
+                            <ul id="display_task_map" class="drop-zone"></ul>
+                        </div>
+                        <div class="flex flex-direction-column gap-1 flex-1">
+                            <h4>Available tasks</h4>
+                            <ul id="all_tasks" class="drop-zone"></ul>
+                        </div>
+                    </section>
+                    <section id="requests_container" class="grid hidden">
+                        <div id="requests_container__filters" class="flex flex-direction-column gap-1">
+                            <h5>Filters</h5>
+                            <div class="grid gap-0-3">
+                                <p>Category</p>
+                                <sm-select id="filter_requests_by_category" onchange="render.internRequests()">
+                                </sm-select>
+                            </div>
+                            <div class="grid gap-0-3">
+                                <p>Project</p>
+                                <sm-select id="filter_requests_by_project" onchange="render.internRequests()">
+                                </sm-select>
+                            </div>
+                            <button class="button button--colored" onclick="clearRequestFilters()">Clear</button>
+                        </div>
+                        <div class="flex flex-direction-column gap-1">
+                            <h5>Pending</h5>
+                            <ul id="requests_list" class="list-container observe-empty-state"></ul>
+                            <div class="empty-state">
+                                <p>No pending requests</p>
+                            </div>
+                        </div>
+                    </section>
+                    <section id="certificates_container" class="hidden">
+                        <div class="flex flex-direction-column gap-1">
+                            <button class="button button--primary margin-right-auto gap-0-3"
+                                onclick="openPopup('issue_certificate_popup')">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                                    <g>
+                                        <rect fill="none" height="24" width="24" />
+                                    </g>
+                                    <g>
+                                        <path
+                                            d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M7,9l1.41,1.41L11,7.83V16h2V7.83l2.59,2.58L17,9l-5-5L7,9z" />
+                                    </g>
+                                </svg>
+                                Issue a certificate
+                            </button>
+                            <ul id="certificates_list" class="list-container observe-empty-state"></ul>
+                            <div class="empty-state">
+                                <p>No certificates added</p>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </section>
+            <section id="updates_page" class="inner-page hidden">
+                <button class="button hide-on-desktop justify-self-end" onclick="toggleUpdatesFilter()">Filter</button>
+                <section id="update_filters_wrapper" class="grid hide-on-mobile">
+                    <h4>Filter</h4>
+                    <div class="grid gap-0-5">
+                        <h5 class="uppercase">By Projects</h5>
+                        <sm-select id="updates_page__project_selector"></sm-select>
+                    </div>
+                    <div class="grid gap-0-5">
+                        <h5 class="uppercase">By Intern</h5>
+                        <sm-select id="updates_page__intern_selector"></sm-select>
+                    </div>
+                    <label class="grid gap-0-5">
+                        <h5 class="uppercase">By date</h5>
+                        <input type="date" id="updates_page__date_selector" aria-label="Filter updates by date"
+                            min="2020-01-01">
+                    </label>
+                    <button class="button" onclick="clearUpdatesFilter()">Clear</button>
+                </section>
+                <section id="updates_wrapper">
+                    <ul id="all_updates_list" class="grid gap-0-5 observe-empty-state"></ul>
+                    <h4 class="empty-state">No related updates</h4>
+                </section>
+            </section>
+            <section id="applications" class="inner-page hidden align-content-start">
+                <div class="grid gap-0-3">
+                    <h3>Task applications</h3>
+                    <p>Check status of your applications</p>
+                </div>
+                <ul id="task_requests_list" class="grid gap-0-5 observe-empty-state margin-top-1"></ul>
+                <h4 class="empty-state">No task requests</h4>
+            </section>
+            <section id="intern_profile" class="inner-page hidden flex align-start"></section>
+            <section id="all_interns_page" class="inner-page hidden flex flex-direction-column align-start">
+                <div id="all_interns_page__header" class="grid gap-0-5">
+                    <h2>Interns</h2>
+                    <sm-input id="interns_page__search" placeholder="Search">
+                        <svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                            height="24">
+                            <path fill="none" d="M0 0h24v24H0z" />
+                            <path
+                                d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" />
+                        </svg>
+                    </sm-input>
+                </div>
+                <ul id="all_interns_list" class="grid observe-empty-state"></ul>
+                <h4 class="empty-state">No intern found</h4>
+            </section>
+            <section id="project_explorer" class="inner-page hidden">
+                <div id="project_explorer__breadcrumbs" class="flex flex-wrap align-center full-bleed"></div>
+                <div id="project_explorer__left" class="list-container">
+                    <div id="all_projects"></div>
+                </div>
+                <section id="project_explorer__right" class="grid hidden">
+                    <header class="flex flex-direction-column gap-0-5 align-items-start">
+                        <h2 id="project_explorer__project_title"></h2>
+                    </header>
+                    <p id="project_explorer__project_description" class="ws-pre-line wrap-around"></p>
+                    <a href="" id="project_explorer__project_updates"
+                        class="button button--small margin-right-auto">Check
+                        related updates</a>
+                    <div id="explorer_branch_container" class="flex align-center flex-wrap gap-0-3 margin-top-0-5">
+                    </div>
+                    <div id="explorer_task_list" class="observe-empty-state margin-top-1"></div>
+                    <h4 class="empty-state">No tasks are added to this projects</h4>
+                </section>
+            </section>
+        </article>
+    </main>
+    </main>
+
+    <sm-popup id="intern_list_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3 class="medium-block-0-5">Select interns</h3>
+            <button id="assign_interns_button" class="button button--primary" onclick="assignSelectedInterns()"
+                disabled>Assign</button>
+        </header>
+        <sm-input id="intern_search_field" placeholder="Search for interns" type="search" autofocus>
+            <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                <path fill="none" d="M0 0h24v24H0z" />
+                <path
+                    d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" />
+            </svg>
+        </sm-input>
+        <div id="intern_list_container" class="observe-empty-state"></div>
+        <h4 class="empty-state">No intern found</h4>
+    </sm-popup>
+
+    <sm-popup id="add_project_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3>Add new project</h3>
+        </header>
+        <sm-form>
+            <sm-input id="project_name_field" placeholder="Name" autofocus required></sm-input>
+            <sm-textarea id="project_description_field" placeholder="Description" rows="4" required></sm-textarea>
+            <button class="button button--primary" type="submit" onclick="addProjectToList()" disabled>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
+                </svg>
+                Add
+            </button>
+        </sm-form>
+    </sm-popup>
+    <sm-popup id="add_intern_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3>Add new intern</h3>
+        </header>
+        <sm-form>
+            <sm-input id="intern_flo_id_field" placeholder="FLO address" error-text="Invalid FLO address" data-flo-id
+                required autofocus>
+            </sm-input>
+            <sm-input id="intern_name_field" placeholder="Name" required></sm-input>
+            <button class="button button--primary" type="submit" onclick="addInternToList()" disabled>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
+                </svg>
+                Add
+            </button>
+        </sm-form>
+    </sm-popup>
+    <sm-popup id="task_editing_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3>Edit task</h3>
+        </header>
+        <sm-form id="task_edit_form">
+            <div class="grid gap-0-5">
+                <b>Title</b>
+                <sm-input id="edit_task_title" required></sm-input>
+            </div>
+            <div class="grid gap-0-5">
+                <b>Description</b>
+                <p id="edit_task_description" class="task-description ws-pre-line wrap-around" contenteditable="true">
+                </p>
+            </div>
+            <div class="grid gap-0-5 margin-top-1" style="grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
+                <sm-select id="edit_task_category" label="Category: "></sm-select>
+                <div class="flex flex-1">
+                    <sm-input id="edit_task_duration" class="flex-1" placeholder="Duration" type="number"
+                        style="--border-radius: 0.5rem 0 0 0.5rem; border-right: thin solid rgba(var(--text-color), 0.3);"
+                        animate="" aria-label="Duration" role="textbox">
+                        <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg"
+                            enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
+                            fill="#000000">
+                            <g>
+                                <rect fill="none" height="24" width="24"></rect>
+                            </g>
+                            <g>
+                                <g>
+                                    <g>
+                                        <path
+                                            d="M15,1H9v2h6V1z M11,14h2V8h-2V14z M19.03,7.39l1.42-1.42c-0.43-0.51-0.9-0.99-1.41-1.41l-1.42,1.42 C16.07,4.74,14.12,4,12,4c-4.97,0-9,4.03-9,9s4.02,9,9,9s9-4.03,9-9C21,10.88,20.26,8.93,19.03,7.39z M12,20c-3.87,0-7-3.13-7-7 s3.13-7,7-7s7,3.13,7,7S15.87,20,12,20z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>
+                    </sm-input>
+                    <sm-select id="edit_task_duration_type" class="flex-shrink-0"
+                        style="--select-border-radius: 0 0.5rem 0.5rem 0;" role="listbox" align-select="right">
+                        <sm-option value="days">Days</sm-option>
+                        <sm-option value="months">Months</sm-option>
+                    </sm-select>
+                </div>
+                <sm-input id="edit_task_max_slots" placeholder="Max slots available" type="number" animate=""
+                    aria-label="Max slots available" role="textbox"> </sm-input>
+                <sm-input id="edit_task_reward" type="number" placeholder="Reward" animate="" aria-label="Reward"
+                    role="textbox">
+                    <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+                        height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <g>
+                            <rect fill="none" height="24" width="24"></rect>
+                        </g>
+                        <g>
+                            <g>
+                                <path
+                                    d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z">
+                                </path>
+                            </g>
+                        </g>
+                    </svg>
+                </sm-input>
+            </div>
+            <button class="button button--primary" onclick="saveTaskChanges()" type="submit">Save</button>
+        </sm-form>
+    </sm-popup>
+
+    <sm-popup id="create_branch_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3>Create a new branch</h3>
+        </header>
+        <sm-form>
+            <sm-input id="branch_start_point" placeholder="Start point ID" type="number" required></sm-input>
+            <sm-input id="branch_merge_point" placeholder="Merge point ID" type="number"></sm-input>
+            <button id="create_branch_btn" class="button button--primary" type="submit">
+                <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                    width="24px" fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+                </svg>
+                Create
+            </button>
+        </sm-form>
+    </sm-popup>
+    <sm-popup id="post_update_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3>Post an update</h3>
+        </header>
+        <h5 id="update_of_project"></h5>
+        <h3 id="update_of_task"></h3>
+        <sm-form>
+            <sm-textarea id="update__brief" placeholder="Type the update" rows="4" autofocus required>
+            </sm-textarea>
+            <div class="multi-state-button">
+                <button id="post_update_btn" title="post this update" class="button button--primary" type="submit"
+                    disabled onclick="postUpdate()">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                        height="24">
+                        <path fill="none" d="M0 0h24v24H0z"></path>
+                        <path
+                            d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z">
+                        </path>
+                    </svg>
+                    Post update
+                </button>
+            </div>
+        </sm-form>
+    </sm-popup>
+
+    <sm-popup id="apply_for_task_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3>Apply for task</h3>
+        </header>
+        <sm-form>
+            <div class="grid">
+                <h5>Applying for</h5>
+                <h3 id="intern_apply__task"></h3>
+            </div>
+            <sm-input id="intern_apply__name" placeholder="Full name" autofocus required animate></sm-input>
+            <sm-input id="intern_apply__contact" placeholder="WhatsApp number" required animate></sm-input>
+            <sm-textarea id="intern_apply__brief" placeholder="Educational background" rows="4" required></sm-textarea>
+            <sm-input id="intern_apply__portfolio_link" placeholder="Portfolio link (optional)" animate>
+            </sm-input>
+            <div class="multi-state-button">
+                <button id="intern_apply__button" title="post this update" class="button button--primary w-100"
+                    type="submit" disabled onclick="applyForInternship()">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                        height="24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path
+                            d="M1.923 9.37c-.51-.205-.504-.51.034-.689l19.086-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.475.553-.717.07L11 13 1.923 9.37zm4.89-.2l5.636 2.255 3.04 6.082 3.546-12.41L6.812 9.17z" />
+                    </svg>
+                    Apply
+                </button>
+            </div>
+        </sm-form>
+    </sm-popup>
+    <sm-popup id="rate_participants_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h3>Rate interns</h3>
+        </header>
+        <div id="rating_wrapper" class="flex flex-direction-column gap-1-5"></div>
+    </sm-popup>
+    <sm-popup id="secure_pwd_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h3 id="secure_pwd_title">Set password</h3>
+        </header>
+        <sm-form>
+            <sm-input id="secure_pwd_input" class="password-field" type="password" placeholder="Password" animate
+                required autofocus>
+                <label slot="right" class="interactive">
+                    <input type="checkbox" class="hidden" autocomplete="off" readonly
+                        onchange="togglePrivateKeyVisibility(this)">
+                    <svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                        width="24px" fill="#000000">
+                        <title>Hide password</title>
+                        <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
+                    </svg>
+                    <svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                        width="24px" fill="#000000">
+                        <title>Show password</title>
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+                    </svg>
+                </label>
+            </sm-input>
+            <button class="button button--primary cta secure-priv-key" type="submit" onclick="setSecurePassword()">
+                Set
+            </button>
+        </sm-form>
+    </sm-popup>
+    <sm-popup id="issue_certificate_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h3>Issue certificate</h3>
+        </header>
+        <div id="issue_certificate_popup__content"></div>
+    </sm-popup>
+    <sm-popup id="profile_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h3>Profile</h3>
+        </header>
+        <div id="profile_popup__content" class="grid gap-3"></div>
+    </sm-popup>
+    <script>
+        // dragula
+        !function (e) { "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : ("undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : this).dragula = e() }(function () { return function o(r, i, u) { function c(t, e) { if (!i[t]) { if (!r[t]) { var n = "function" == typeof require && require; if (!e && n) return n(t, !0); if (a) return a(t, !0); throw (n = new Error("Cannot find module '" + t + "'")).code = "MODULE_NOT_FOUND", n } n = i[t] = { exports: {} }, r[t][0].call(n.exports, function (e) { return c(r[t][1][e] || e) }, n, n.exports, o, r, i, u) } return i[t].exports } for (var a = "function" == typeof require && require, e = 0; e < u.length; e++)c(u[e]); return c }({ 1: [function (e, t, n) { "use strict"; var o = {}, r = "(?:^|\\s)", i = "(?:\\s|$)"; function u(e) { var t = o[e]; return t ? t.lastIndex = 0 : o[e] = t = new RegExp(r + e + i, "g"), t } t.exports = { add: function (e, t) { var n = e.className; n.length ? u(t).test(n) || (e.className += " " + t) : e.className = t }, rm: function (e, t) { e.className = e.className.replace(u(t), " ").trim() } } }, {}], 2: [function (e, t, n) { (function (r) { "use strict"; var M = e("contra/emitter"), k = e("crossvent"), j = e("./classes"), R = document, q = R.documentElement; function U(e, t, n, o) { r.navigator.pointerEnabled ? k[t](e, { mouseup: "pointerup", mousedown: "pointerdown", mousemove: "pointermove" }[n], o) : r.navigator.msPointerEnabled ? k[t](e, { mouseup: "MSPointerUp", mousedown: "MSPointerDown", mousemove: "MSPointerMove" }[n], o) : (k[t](e, { mouseup: "touchend", mousedown: "touchstart", mousemove: "touchmove" }[n], o), k[t](e, n, o)) } function K(e) { if (void 0 !== e.touches) return e.touches.length; if (void 0 !== e.which && 0 !== e.which) return e.which; if (void 0 !== e.buttons) return e.buttons; e = e.button; return void 0 !== e ? 1 & e ? 1 : 2 & e ? 3 : 4 & e ? 2 : 0 : void 0 } function z(e, t) { return void 0 !== r[t] ? r[t] : (q.clientHeight ? q : R.body)[e] } function H(e, t, n) { var o = (e = e || {}).className || ""; return e.className += " gu-hide", n = R.elementFromPoint(t, n), e.className = o, n } function V() { return !1 } function $() { return !0 } function G(e) { return e.width || e.right - e.left } function J(e) { return e.height || e.bottom - e.top } function Q(e) { return e.parentNode === R ? null : e.parentNode } function W(e) { return "INPUT" === e.tagName || "TEXTAREA" === e.tagName || "SELECT" === e.tagName || function e(t) { if (!t) return !1; if ("false" === t.contentEditable) return !1; if ("true" === t.contentEditable) return !0; return e(Q(t)) }(e) } function Z(t) { return t.nextElementSibling || function () { var e = t; for (; e = e.nextSibling, e && 1 !== e.nodeType;); return e }() } function ee(e, t) { var t = (n = t).targetTouches && n.targetTouches.length ? n.targetTouches[0] : n.changedTouches && n.changedTouches.length ? n.changedTouches[0] : n, n = { pageX: "clientX", pageY: "clientY" }; return e in n && !(e in t) && n[e] in t && (e = n[e]), t[e] } t.exports = function (e, t) { var l, f, s, d, m, o, r, v, p, h, n; 1 === arguments.length && !1 === Array.isArray(e) && (t = e, e = []); var i, g = null, y = t || {}; void 0 === y.moves && (y.moves = $), void 0 === y.accepts && (y.accepts = $), void 0 === y.invalid && (y.invalid = function () { return !1 }), void 0 === y.containers && (y.containers = e || []), void 0 === y.isContainer && (y.isContainer = V), void 0 === y.copy && (y.copy = !1), void 0 === y.copySortSource && (y.copySortSource = !1), void 0 === y.revertOnSpill && (y.revertOnSpill = !1), void 0 === y.removeOnSpill && (y.removeOnSpill = !1), void 0 === y.direction && (y.direction = "vertical"), void 0 === y.ignoreInputTextSelection && (y.ignoreInputTextSelection = !0), void 0 === y.mirrorContainer && (y.mirrorContainer = R.body); var w = M({ containers: y.containers, start: function (e) { e = S(e); e && C(e) }, end: O, cancel: L, remove: X, destroy: function () { c(!0), N({}) }, canMove: function (e) { return !!S(e) }, dragging: !1 }); return !0 === y.removeOnSpill && w.on("over", function (e) { j.rm(e, "gu-hide") }).on("out", function (e) { w.dragging && j.add(e, "gu-hide") }), c(), w; function u(e) { return -1 !== w.containers.indexOf(e) || y.isContainer(e) } function c(e) { e = e ? "remove" : "add"; U(q, e, "mousedown", E), U(q, e, "mouseup", N) } function a(e) { U(q, e ? "remove" : "add", "mousemove", x) } function b(e) { e = e ? "remove" : "add"; k[e](q, "selectstart", T), k[e](q, "click", T) } function T(e) { i && e.preventDefault() } function E(e) { var t, n; o = e.clientX, r = e.clientY, 1 !== K(e) || e.metaKey || e.ctrlKey || (n = S(t = e.target)) && (i = n, a(), "mousedown" === e.type && (W(t) ? t.focus() : e.preventDefault())) } function x(e) { if (i) if (0 !== K(e)) { if (!(void 0 !== e.clientX && Math.abs(e.clientX - o) <= (y.slideFactorX || 0) && void 0 !== e.clientY && Math.abs(e.clientY - r) <= (y.slideFactorY || 0))) { if (y.ignoreInputTextSelection) { var t = ee("clientX", e) || 0, n = ee("clientY", e) || 0; if (W(R.elementFromPoint(t, n))) return } n = i; a(!0), b(), O(), C(n); n = function (e) { e = e.getBoundingClientRect(); return { left: e.left + z("scrollLeft", "pageXOffset"), top: e.top + z("scrollTop", "pageYOffset") } }(s); d = ee("pageX", e) - n.left, m = ee("pageY", e) - n.top, j.add(h || s, "gu-transit"), function () { if (l) return; var e = s.getBoundingClientRect(); (l = s.cloneNode(!0)).style.width = G(e) + "px", l.style.height = J(e) + "px", j.rm(l, "gu-transit"), j.add(l, "gu-mirror"), y.mirrorContainer.appendChild(l), U(q, "add", "mousemove", P), j.add(y.mirrorContainer, "gu-unselectable"), w.emit("cloned", l, s, "mirror") }(), P(e) } } else N({}) } function S(e) { if (!(w.dragging && l || u(e))) { for (var t = e; Q(e) && !1 === u(Q(e));) { if (y.invalid(e, t)) return; if (!(e = Q(e))) return } var n = Q(e); if (n) if (!y.invalid(e, t)) if (y.moves(e, n, t, Z(e))) return { item: e, source: n } } } function C(e) { var t, n; t = e.item, n = e.source, ("boolean" == typeof y.copy ? y.copy : y.copy(t, n)) && (h = e.item.cloneNode(!0), w.emit("cloned", h, e.item, "copy")), f = e.source, s = e.item, v = p = Z(e.item), w.dragging = !0, w.emit("drag", s, f) } function O() { var e; w.dragging && _(e = h || s, Q(e)) } function I() { a(!(i = !1)), b(!0) } function N(e) { var t, n; I(), w.dragging && (t = h || s, n = ee("clientX", e) || 0, e = ee("clientY", e) || 0, (e = B(H(l, n, e), n, e)) && (h && y.copySortSource || !h || e !== f) ? _(t, e) : (y.removeOnSpill ? X : L)()) } function _(e, t) { var n = Q(e); h && y.copySortSource && t === f && n.removeChild(s), A(t) ? w.emit("cancel", e, f, f) : w.emit("drop", e, t, f, p), Y() } function X() { var e, t; w.dragging && ((t = Q(e = h || s)) && t.removeChild(e), w.emit(h ? "cancel" : "remove", e, t, f), Y()) } function L(e) { var t, n, o; w.dragging && (t = 0 < arguments.length ? e : y.revertOnSpill, !1 === (e = A(o = Q(n = h || s))) && t && (h ? o && o.removeChild(h) : f.insertBefore(n, v)), e || t ? w.emit("cancel", n, f, f) : w.emit("drop", n, o, f, p), Y()) } function Y() { var e = h || s; I(), l && (j.rm(y.mirrorContainer, "gu-unselectable"), U(q, "remove", "mousemove", P), Q(l).removeChild(l), l = null), e && j.rm(e, "gu-transit"), n && clearTimeout(n), w.dragging = !1, g && w.emit("out", e, g, f), w.emit("dragend", e), f = s = h = v = p = n = g = null } function A(e, t) { t = void 0 !== t ? t : l ? p : Z(h || s); return e === f && t === v } function B(t, n, o) { for (var r = t; r && !function () { if (!1 === u(r)) return !1; var e = D(r, t), e = F(r, e, n, o); if (A(r, e)) return !0; return y.accepts(s, r, f, e) }();)r = Q(r); return r } function P(e) { if (l) { e.preventDefault(); var t = ee("clientX", e) || 0, n = ee("clientY", e) || 0, o = t - d, r = n - m; l.style.left = o + "px", l.style.top = r + "px"; var i = h || s, e = H(l, t, n), o = B(e, t, n), u = null !== o && o !== g; !u && null !== o || (g && a("out"), g = o, u && a("over")); r = Q(i); if (o !== f || !h || y.copySortSource) { var c, e = D(o, e); if (null !== e) c = F(o, e, t, n); else { if (!0 !== y.revertOnSpill || h) return void (h && r && r.removeChild(i)); c = v, o = f } (null === c && u || c !== i && c !== Z(i)) && (p = c, o.insertBefore(i, c), w.emit("shadow", i, o, f)) } else r && r.removeChild(i) } function a(e) { w.emit(e, i, g, f) } } function D(e, t) { for (var n = t; n !== e && Q(n) !== e;)n = Q(n); return n === q ? null : n } function F(r, t, i, u) { var c = "horizontal" === y.direction; return (t !== r ? function () { var e = t.getBoundingClientRect(); if (c) return n(i > e.left + G(e) / 2); return n(u > e.top + J(e) / 2) } : function () { var e, t, n, o = r.children.length; for (e = 0; e < o; e++) { if (t = r.children[e], n = t.getBoundingClientRect(), c && n.left + n.width / 2 > i) return t; if (!c && n.top + n.height / 2 > u) return t } return null })(); function n(e) { return e ? Z(t) : t } } } }).call(this, "undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {}) }, { "./classes": 1, "contra/emitter": 5, crossvent: 6 }], 3: [function (e, t, n) { t.exports = function (e, t) { return Array.prototype.slice.call(e, t) } }, {}], 4: [function (e, t, n) { "use strict"; var o = e("ticky"); t.exports = function (e, t, n) { e && o(function () { e.apply(n || null, t || []) }) } }, { ticky: 10 }], 5: [function (e, t, n) { "use strict"; var c = e("atoa"), a = e("./debounce"); t.exports = function (r, e) { var i = e || {}, u = {}; return void 0 === r && (r = {}), r.on = function (e, t) { return u[e] ? u[e].push(t) : u[e] = [t], r }, r.once = function (e, t) { return t._once = !0, r.on(e, t), r }, r.off = function (e, t) { var n = arguments.length; if (1 === n) delete u[e]; else if (0 === n) u = {}; else { e = u[e]; if (!e) return r; e.splice(e.indexOf(t), 1) } return r }, r.emit = function () { var e = c(arguments); return r.emitterSnapshot(e.shift()).apply(this, e) }, r.emitterSnapshot = function (o) { var e = (u[o] || []).slice(0); return function () { var t = c(arguments), n = this || r; if ("error" === o && !1 !== i.throws && !e.length) throw 1 === t.length ? t[0] : t; return e.forEach(function (e) { i.async ? a(e, t, n) : e.apply(n, t), e._once && r.off(o, e) }), r } }, r } }, { "./debounce": 4, atoa: 3 }], 6: [function (n, o, e) { (function (r) { "use strict"; var i = n("custom-event"), u = n("./eventmap"), c = r.document, e = function (e, t, n, o) { return e.addEventListener(t, n, o) }, t = function (e, t, n, o) { return e.removeEventListener(t, n, o) }, a = []; function l(e, t, n) { t = function (e, t, n) { var o, r; for (o = 0; o < a.length; o++)if ((r = a[o]).element === e && r.type === t && r.fn === n) return o }(e, t, n); if (t) { n = a[t].wrapper; return a.splice(t, 1), n } } r.addEventListener || (e = function (e, t, n) { return e.attachEvent("on" + t, function (e, t, n) { var o = l(e, t, n) || function (n, o) { return function (e) { var t = e || r.event; t.target = t.target || t.srcElement, t.preventDefault = t.preventDefault || function () { t.returnValue = !1 }, t.stopPropagation = t.stopPropagation || function () { t.cancelBubble = !0 }, t.which = t.which || t.keyCode, o.call(n, t) } }(e, n); return a.push({ wrapper: o, element: e, type: t, fn: n }), o }(e, t, n)) }, t = function (e, t, n) { n = l(e, t, n); if (n) return e.detachEvent("on" + t, n) }), o.exports = { add: e, remove: t, fabricate: function (e, t, n) { var o = -1 === u.indexOf(t) ? new i(t, { detail: n }) : function () { var e; c.createEvent ? (e = c.createEvent("Event")).initEvent(t, !0, !0) : c.createEventObject && (e = c.createEventObject()); return e }(); e.dispatchEvent ? e.dispatchEvent(o) : e.fireEvent("on" + t, o) } } }).call(this, "undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {}) }, { "./eventmap": 7, "custom-event": 8 }], 7: [function (e, r, t) { (function (e) { "use strict"; var t = [], n = "", o = /^on/; for (n in e) o.test(n) && t.push(n.slice(2)); r.exports = t }).call(this, "undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {}) }, {}], 8: [function (e, n, t) { (function (e) { var t = e.CustomEvent; n.exports = function () { try { var e = new t("cat", { detail: { foo: "bar" } }); return "cat" === e.type && "bar" === e.detail.foo } catch (e) { } }() ? t : "undefined" != typeof document && "function" == typeof document.createEvent ? function (e, t) { var n = document.createEvent("CustomEvent"); return t ? n.initCustomEvent(e, t.bubbles, t.cancelable, t.detail) : n.initCustomEvent(e, !1, !1, void 0), n } : function (e, t) { var n = document.createEventObject(); return n.type = e, t ? (n.bubbles = Boolean(t.bubbles), n.cancelable = Boolean(t.cancelable), n.detail = t.detail) : (n.bubbles = !1, n.cancelable = !1, n.detail = void 0), n } }).call(this, "undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {}) }, {}], 9: [function (e, t, n) { var o, r, t = t.exports = {}; function i() { throw new Error("setTimeout has not been defined") } function u() { throw new Error("clearTimeout has not been defined") } function c(t) { if (o === setTimeout) return setTimeout(t, 0); if ((o === i || !o) && setTimeout) return o = setTimeout, setTimeout(t, 0); try { return o(t, 0) } catch (e) { try { return o.call(null, t, 0) } catch (e) { return o.call(this, t, 0) } } } !function () { try { o = "function" == typeof setTimeout ? setTimeout : i } catch (e) { o = i } try { r = "function" == typeof clearTimeout ? clearTimeout : u } catch (e) { r = u } }(); var a, l = [], f = !1, s = -1; function d() { f && a && (f = !1, a.length ? l = a.concat(l) : s = -1, l.length && m()) } function m() { if (!f) { var e = c(d); f = !0; for (var t = l.length; t;) { for (a = l, l = []; ++s < t;)a && a[s].run(); s = -1, t = l.length } a = null, f = !1, function (t) { if (r === clearTimeout) return clearTimeout(t); if ((r === u || !r) && clearTimeout) return r = clearTimeout, clearTimeout(t); try { r(t) } catch (e) { try { return r.call(null, t) } catch (e) { return r.call(this, t) } } }(e) } } function v(e, t) { this.fun = e, this.array = t } function p() { } t.nextTick = function (e) { var t = new Array(arguments.length - 1); if (1 < arguments.length) for (var n = 1; n < arguments.length; n++)t[n - 1] = arguments[n]; l.push(new v(e, t)), 1 !== l.length || f || c(m) }, v.prototype.run = function () { this.fun.apply(null, this.array) }, t.title = "browser", t.browser = !0, t.env = {}, t.argv = [], t.version = "", t.versions = {}, t.on = p, t.addListener = p, t.once = p, t.off = p, t.removeListener = p, t.removeAllListeners = p, t.emit = p, t.prependListener = p, t.prependOnceListener = p, t.listeners = function (e) { return [] }, t.binding = function (e) { throw new Error("process.binding is not supported") }, t.cwd = function () { return "/" }, t.chdir = function (e) { throw new Error("process.chdir is not supported") }, t.umask = function () { return 0 } }, {}], 10: [function (e, n, t) { (function (t) { var e = "function" == typeof t ? function (e) { t(e) } : function (e) { setTimeout(e, 0) }; n.exports = e }).call(this, e("timers").setImmediate) }, { timers: 11 }], 11: [function (a, e, l) { (function (e, t) { var o = a("process/browser.js").nextTick, n = Function.prototype.apply, r = Array.prototype.slice, i = {}, u = 0; function c(e, t) { this._id = e, this._clearFn = t } l.setTimeout = function () { return new c(n.call(setTimeout, window, arguments), clearTimeout) }, l.setInterval = function () { return new c(n.call(setInterval, window, arguments), clearInterval) }, l.clearTimeout = l.clearInterval = function (e) { e.close() }, c.prototype.unref = c.prototype.ref = function () { }, c.prototype.close = function () { this._clearFn.call(window, this._id) }, l.enroll = function (e, t) { clearTimeout(e._idleTimeoutId), e._idleTimeout = t }, l.unenroll = function (e) { clearTimeout(e._idleTimeoutId), e._idleTimeout = -1 }, l._unrefActive = l.active = function (e) { clearTimeout(e._idleTimeoutId); var t = e._idleTimeout; 0 <= t && (e._idleTimeoutId = setTimeout(function () { e._onTimeout && e._onTimeout() }, t)) }, l.setImmediate = "function" == typeof e ? e : function (e) { var t = u++, n = !(arguments.length < 2) && r.call(arguments, 1); return i[t] = !0, o(function () { i[t] && (n ? e.apply(null, n) : e.call(null), l.clearImmediate(t)) }), t }, l.clearImmediate = "function" == typeof t ? t : function (e) { delete i[e] } }).call(this, a("timers").setImmediate, a("timers").clearImmediate) }, { "process/browser.js": 9, timers: 11 }] }, {}, [2])(2) });
+    </script>
+    <script>
+        /*jshint esversion: 8 */
+        /**
+          * @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
+          *
+          * @version v1.0.0
+          * @homepage https://github.com/yairEO/relative-time
+          */
+        !function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
+        const relativeTime = new RelativeTime({ style: 'narrow' });
+    </script>
+    <script>
+        // preact signals
+        !function (i, t) { "object" == typeof exports && "undefined" != typeof module ? t(exports) : "function" == typeof define && define.amd ? define(["exports"], t) : t((i || self).preactSignalsCore = {}) }(this, function (i) { function t() { throw new Error("Cycle detected") } var n = Symbol.for("preact-signals"); function o() { if (!(s > 1)) { var i, t = !1; while (void 0 !== h) { var n = h; h = void 0; e++; while (void 0 !== n) { var o = n.o; n.o = void 0; n.f &= -3; if (!(8 & n.f) && c(n)) try { n.c() } catch (n) { if (!t) { i = n; t = !0 } } n = o } } e = 0; s--; if (t) throw i } else s-- } var r = void 0, f = 0, h = void 0, s = 0, e = 0, v = 0; function u(i) { if (void 0 !== r) { var t = i.n; if (void 0 === t || t.t !== r) { t = { i: 0, S: i, p: r.s, n: void 0, t: r, e: void 0, x: void 0, r: t }; if (void 0 !== r.s) r.s.n = t; r.s = t; i.n = t; if (32 & r.f) i.S(t); return t } else if (-1 === t.i) { t.i = 0; if (void 0 !== t.n) { t.n.p = t.p; if (void 0 !== t.p) t.p.n = t.n; t.p = r.s; t.n = void 0; r.s.n = t; r.s = t } return t } } } function d(i) { this.v = i; this.i = 0; this.n = void 0; this.t = void 0 } d.prototype.brand = n; d.prototype.h = function () { return !0 }; d.prototype.S = function (i) { if (this.t !== i && void 0 === i.e) { i.x = this.t; if (void 0 !== this.t) this.t.e = i; this.t = i } }; d.prototype.U = function (i) { if (void 0 !== this.t) { var t = i.e, n = i.x; if (void 0 !== t) { t.x = n; i.e = void 0 } if (void 0 !== n) { n.e = t; i.x = void 0 } if (i === this.t) this.t = n } }; d.prototype.subscribe = function (i) { var t = this; return _(function () { var n = t.value, o = 32 & this.f; this.f &= -33; try { i(n) } finally { this.f |= o } }) }; d.prototype.valueOf = function () { return this.value }; d.prototype.toString = function () { return this.value + "" }; d.prototype.toJSON = function () { return this.value }; d.prototype.peek = function () { return this.v }; Object.defineProperty(d.prototype, "value", { get: function () { var i = u(this); if (void 0 !== i) i.i = this.i; return this.v }, set: function (i) { if (r instanceof y) !function () { throw new Error("Computed cannot have side-effects") }(); if (i !== this.v) { if (e > 100) t(); this.v = i; this.i++; v++; s++; try { for (var n = this.t; void 0 !== n; n = n.x)n.t.N() } finally { o() } } } }); function c(i) { for (var t = i.s; void 0 !== t; t = t.n)if (t.S.i !== t.i || !t.S.h() || t.S.i !== t.i) return !0; return !1 } function a(i) { for (var t = i.s; void 0 !== t; t = t.n) { var n = t.S.n; if (void 0 !== n) t.r = n; t.S.n = t; t.i = -1; if (void 0 === t.n) { i.s = t; break } } } function l(i) { var t = i.s, n = void 0; while (void 0 !== t) { var o = t.p; if (-1 === t.i) { t.S.U(t); if (void 0 !== o) o.n = t.n; if (void 0 !== t.n) t.n.p = o } else n = t; t.S.n = t.r; if (void 0 !== t.r) t.r = void 0; t = o } i.s = n } function y(i) { d.call(this, void 0); this.x = i; this.s = void 0; this.g = v - 1; this.f = 4 } (y.prototype = new d).h = function () { this.f &= -3; if (1 & this.f) return !1; if (32 == (36 & this.f)) return !0; this.f &= -5; if (this.g === v) return !0; this.g = v; this.f |= 1; if (this.i > 0 && !c(this)) { this.f &= -2; return !0 } var i = r; try { a(this); r = this; var t = this.x(); if (16 & this.f || this.v !== t || 0 === this.i) { this.v = t; this.f &= -17; this.i++ } } catch (i) { this.v = i; this.f |= 16; this.i++ } r = i; l(this); this.f &= -2; return !0 }; y.prototype.S = function (i) { if (void 0 === this.t) { this.f |= 36; for (var t = this.s; void 0 !== t; t = t.n)t.S.S(t) } d.prototype.S.call(this, i) }; y.prototype.U = function (i) { if (void 0 !== this.t) { d.prototype.U.call(this, i); if (void 0 === this.t) { this.f &= -33; for (var t = this.s; void 0 !== t; t = t.n)t.S.U(t) } } }; y.prototype.N = function () { if (!(2 & this.f)) { this.f |= 6; for (var i = this.t; void 0 !== i; i = i.x)i.t.N() } }; y.prototype.peek = function () { if (!this.h()) t(); if (16 & this.f) throw this.v; return this.v }; Object.defineProperty(y.prototype, "value", { get: function () { if (1 & this.f) t(); var i = u(this); this.h(); if (void 0 !== i) i.i = this.i; if (16 & this.f) throw this.v; return this.v } }); function w(i) { var t = i.u; i.u = void 0; if ("function" == typeof t) { s++; var n = r; r = void 0; try { t() } catch (t) { i.f &= -2; i.f |= 8; p(i); throw t } finally { r = n; o() } } } function p(i) { for (var t = i.s; void 0 !== t; t = t.n)t.S.U(t); i.x = void 0; i.s = void 0; w(i) } function b(i) { if (r !== this) throw new Error("Out-of-order effect"); l(this); r = i; this.f &= -2; if (8 & this.f) p(this); o() } function g(i) { this.x = i; this.u = void 0; this.s = void 0; this.o = void 0; this.f = 32 } g.prototype.c = function () { var i = this.S(); try { if (8 & this.f) return; if (void 0 === this.x) return; var t = this.x(); if ("function" == typeof t) this.u = t } finally { i() } }; g.prototype.S = function () { if (1 & this.f) t(); this.f |= 1; this.f &= -9; w(this); a(this); s++; var i = r; r = this; return b.bind(this, i) }; g.prototype.N = function () { if (!(2 & this.f)) { this.f |= 2; this.o = h; h = this } }; g.prototype.d = function () { this.f |= 8; if (!(1 & this.f)) p(this) }; function _(i) { var t = new g(i); try { t.c() } catch (i) { t.d(); throw i } return t.d.bind(t) } i.Signal = d; i.batch = function (i) { if (s > 0) return i(); s++; try { return i() } finally { o() } }; i.computed = function (i) { return new y(i) }; i.effect = _; i.signal = function (i) { return new d(i) }; i.untracked = function (i) { if (f > 0) return i(); var t = r; r = void 0; f++; try { return i() } finally { f--; r = t } } });//# sourceMappingURL=signals-core.min.js.map
+    </script>
+    <script id="default_ui_library">
+        "use strict";
+        // Global variables
+        const { html, render: renderElem } = uhtml;
+        const { signal, computed, effect } = preactSignalsCore;
+        //Checks for internet connection status
+        if (!navigator.onLine)
+            floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
+        window.addEventListener('offline', () => {
+            floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
+        })
+        window.addEventListener('online', () => {
+            getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
+            notify('We are back online.', 'success')
+        })
+        function getRef(elementId) {
+            return document.getElementById(elementId);
+        }
+
+        // returns dom with specified element
+        function createElement(tagName, options = {}) {
+            const { className, textContent, innerHTML, attributes = {} } = options
+            const elem = document.createElement(tagName)
+            for (let attribute in attributes) {
+                elem.setAttribute(attribute, attributes[attribute])
+            }
+            if (className)
+                elem.className = className
+            if (textContent)
+                elem.textContent = textContent
+            if (innerHTML)
+                elem.innerHTML = innerHTML
+            return elem
+        }
+
+        // Use when a function needs to be executed after user finishes changes
+        const debounce = (callback, wait) => {
+            let timeoutId = null;
+            return (...args) => {
+                window.clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                    callback.apply(null, args);
+                }, wait);
+            };
+        }
+
+        let zIndex = 50
+        // function required for popups or modals to appear
+        function openPopup(popupId, pinned) {
+            zIndex++
+            getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
+            return getRef(popupId).show({ pinned })
+        }
+
+        // hides the popup or modal
+        function closePopup(options = {}) {
+            if (popupStack.peek() === undefined)
+                return;
+            popupStack.peek().popup.hide(options)
+        }
+
+
+        // displays a popup for asking permission. Use this instead of JS confirm
+        const getConfirmation = (title, options = {}) => {
+            return new Promise(resolve => {
+                const { message = '', cancelText = 'Cancel', confirmText = 'OK', danger = false } = options
+                getRef('confirm_title').innerText = title;
+                getRef('confirm_message').innerText = message;
+                const cancelButton = getRef('confirmation_popup').querySelector('.cancel-button');
+                const confirmButton = getRef('confirmation_popup').querySelector('.confirm-button')
+                confirmButton.textContent = confirmText
+                cancelButton.textContent = cancelText
+                if (danger)
+                    confirmButton.classList.add('button--danger')
+                else
+                    confirmButton.classList.remove('button--danger')
+                const { opened, closed } = openPopup('confirmation_popup')
+                confirmButton.onclick = () => {
+                    closePopup({ payload: true })
+                }
+                cancelButton.onclick = () => {
+                    closePopup()
+                }
+                closed.then((payload) => {
+                    confirmButton.onclick = null
+                    cancelButton.onclick = null
+                    if (payload)
+                        resolve(true)
+                    else
+                        resolve(false)
+                })
+            })
+        }
+
+        //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+        function notify(message, mode, options = {}) {
+            let icon
+            switch (mode) {
+                case 'success':
+                    icon = `<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+                    break;
+                case 'error':
+                    icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+                    options.pinned = true
+                    break;
+            }
+            if (mode === 'error') {
+                console.error(message)
+            }
+            return getRef("notification_drawer").push(message, { icon, ...options });
+        }
+
+        // detect browser version
+        function detectBrowser() {
+            let ua = navigator.userAgent,
+                tem,
+                M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+            if (/trident/i.test(M[1])) {
+                tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+                return 'IE ' + (tem[1] || '');
+            }
+            if (M[1] === 'Chrome') {
+                tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
+                if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
+            }
+            M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+            if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
+            return M.join(' ');
+        }
+        window.addEventListener('hashchange', e => routeTo(window.location.hash))
+        window.addEventListener("load", () => {
+            const [browserName, browserVersion] = detectBrowser().split(' ');
+            const supportedVersions = {
+                Chrome: 85,
+                Firefox: 75,
+                Safari: 13,
+            }
+            if (browserName in supportedVersions) {
+                if (parseInt(browserVersion) < supportedVersions[browserName]) {
+                    notify(`${browserName} ${browserVersion} is not fully supported, some features may not work properly. Please update to ${supportedVersions[browserName]} or higher.`, 'error')
+                }
+            } else {
+                notify('Browser is not fully compatible, some features may not work. for best experience please use Chrome, Edge, Firefox or Safari', 'error')
+            }
+            document.body.classList.remove('hidden')
+            DOMPurify.setConfig = {
+                FORBID_ATTR: ['style'],
+                FORBID_TAGS: ['style']
+            }
+            DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+                // set all elements owning target to target=_blank
+                if ('target' in node) {
+                    node.setAttribute('target', '_blank');
+                }
+                // set non-HTML/MathML links to xlink:show=new
+                if (
+                    !node.hasAttribute('target') &&
+                    (node.hasAttribute('xlink:href') || node.hasAttribute('href'))
+                ) {
+                    node.setAttribute('xlink:show', 'new');
+                }
+            });
+            document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr)
+            document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
+            document.addEventListener('keyup', (e) => {
+                if (e.code === 'Escape') {
+                    closePopup()
+                }
+            })
+            document.addEventListener("pointerdown", (e) => {
+                if (e.target.closest("button:not([disabled]), .interactive")) {
+                    createRipple(e, e.target.closest("button, .interactive"));
+                }
+            });
+            document.addEventListener('copy', () => {
+                notify('copied', 'success')
+            })
+        });
+
+        function createRipple(event, target) {
+            const circle = document.createElement("span");
+            const diameter = Math.max(target.clientWidth, target.clientHeight);
+            const radius = diameter / 2;
+            const targetDimensions = target.getBoundingClientRect();
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+            circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+            circle.classList.add("ripple");
+            const rippleAnimation = circle.animate(
+                [
+                    {
+                        transform: "scale(4)",
+                        opacity: 0,
+                    },
+                ],
+                {
+                    duration: floGlobals.prefersReducedMotion ? 0 : 600,
+                    fill: "forwards",
+                    easing: "ease-out",
+                }
+            );
+            target.append(circle);
+            rippleAnimation.onfinish = () => {
+                circle.remove();
+            };
+        }
+
+        function getFormattedTime(timestamp, format) {
+            try {
+                timestamp = parseInt(timestamp)
+                if (String(timestamp).length < 13)
+                    timestamp *= 1000
+                let [day, month, date, year] = new Date(timestamp).toString().split(' '),
+                    minutes = new Date(timestamp).getMinutes(),
+                    hours = new Date(timestamp).getHours(),
+                    currentTime = new Date().toString().split(' ')
+
+                minutes = minutes < 10 ? `0${minutes}` : minutes
+                let finalHours = ``;
+                if (hours > 12)
+                    finalHours = `${hours - 12}:${minutes}`
+                else if (hours === 0)
+                    finalHours = `12:${minutes}`
+                else
+                    finalHours = `${hours}:${minutes}`
+
+                finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
+                switch (format) {
+                    case 'date-only':
+                        return `${month} ${date}, ${year}`;
+                        break;
+                    case 'time-only':
+                        return finalHours;
+                    case 'relative':
+                        return relativeTime.from(timestamp)
+                    default:
+                        return `${month} ${date}, ${year} at ${finalHours}`;
+                }
+            } catch (e) {
+                console.error(e);
+                return timestamp;
+            }
+        }
+        function getObjLength(obj) {
+            let count = 0
+            for (var i in obj) count++
+            return count
+        }
+        // obj forEach
+        function objForEach(obj, callback) {
+            for (var key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    callback(key, obj[key])
+                }
+            }
+        }
+        // obj map
+        function objMap(obj, callback) {
+            const newObj = [];
+            for (var key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    const value = callback(obj[key], key)
+                    if (value) {
+                        newObj.push(value)
+                    }
+                }
+            }
+            return newObj
+        }
+
+
+        const appState = {
+            params: {},
+        }
+        let dragger
+        const generalPages = ['sign_up', 'sign_in', 'loading', 'landing']
+        function routeTo(targetPage, options = {}) {
+            const { firstLoad } = options
+            const routingAnimation = { in: slideInUp, out: slideOutUp }
+            let pageId
+            let subPageId1
+            let searchParams
+            let params
+            if (targetPage === '') {
+                try {
+                    if (floDapps.user.id)
+                        pageId = 'dashboard_page'
+                } catch (e) {
+                    pageId = 'landing'
+                }
+            } else {
+                if (targetPage.includes('/')) {
+                    let path;
+                    [path, searchParams] = targetPage.split('?');
+                    [, pageId, subPageId1] = path.split('/')
+                } else {
+                    pageId = targetPage
+                }
+            }
+
+            if (!document.querySelector(`#${pageId}`)?.classList.contains('inner-page')) return
+            try {
+                if (floDapps.user.id && (!location.hash || generalPages.includes(pageId))) {
+                    history.replaceState(null, null, '#/dashboard_page');
+                    pageId = 'dashboard_page'
+                }
+            } catch (e) {
+                if (!(generalPages.includes(pageId))) return
+            }
+            appState.currentPage = pageId
+
+            if (searchParams) {
+                const urlSearchParams = new URLSearchParams('?' + searchParams);
+                params = Object.fromEntries(urlSearchParams.entries());
+            }
+            if (params)
+                appState.params = params
+            if (firstLoad && floGlobals.tempUserTaskRequest && RIBC.getAllTasks()[floGlobals.tempUserTaskRequest]) {
+                requestForTask()
+            }
+            switch (pageId) {
+                case 'landing':
+                    if (!getRef('landing_tasks_wrapper')) return
+                    renderElem(getRef('landing_tasks_wrapper'), render.displayTasks(params?.category, params?.search))
+                    if (params?.taskId) {
+                        showTaskDetails(params.taskId)
+                    } else {
+                        hideTaskDetails()
+                    }
+                    break;
+                case 'sign_up':
+                    getRef('keys_generator').generateKeys()
+                    break;
+                case 'dashboard_page': {
+                    let renderedAssignedTasks = []
+                    if (userType === 'intern') {
+                        // Render assigned task cards
+                        const { assignedTasks } = RIBC.getInternRecord(floGlobals.myFloID)
+                        for (const taskId in assignedTasks)
+                            renderedAssignedTasks.push(render.internTaskCard(taskId))
+                        if (renderedAssignedTasks.length === 0) {
+                            renderedAssignedTasks = html`No task assigned yet.`;
+                        }
+                    } else {
+                        if (subPageId1 === 'my_certificates') {
+                            subPageId1 = undefined
+                            history.replaceState(null, null, '#/dashboard_page')
+                        }
+                    }
+                    if (!subPageId1) {
+                        if (userType === 'intern')
+                            subPageId1 = 'my_tasks'
+                        else if (userType === 'admin')
+                            subPageId1 = 'active_tasks'
+                        else
+                            subPageId1 = 'all_tasks'
+                    }
+                    //creates cards for highest performing interns
+                    renderElem(getRef('dashboard_page'), html`
+                        <sm-chips id="dashboard_view_selector" class="margin-right-auto" onchange=${handleDashboardViewChange}>
+                            ${userType === 'intern' ? html`<sm-chip value="intern_view" ?selected=${subPageId1 === 'my_tasks'}>My tasks</sm-chip>` : ''}
+                            ${userType !== 'admin' ? html`<sm-chip value="dashboard_tasks_wrapper" ?selected=${subPageId1 === 'all_tasks'}>All tasks</sm-chip>` : ''} 
+                            ${userType === 'admin' ? html`<sm-chip value="active_tasks_wrapper" ?selected=${subPageId1 === 'active_tasks'}>Active tasks</sm-chip>` : ''} 
+                            <sm-chip value="projects_wrapper" ?selected=${subPageId1 === 'projects'}>Projects</sm-chip>
+                            ${userType === 'intern' ? html`<sm-chip value="certificates_view" ?selected=${subPageId1 === 'my_certificates'}>My certificates</sm-chip>` : ''}
+                            ${floGlobals.isMobileView ? html`<sm-chip value="intern_leaderboard_container">Leaderboard</sm-chip>` : ''} 
+                        </sm-chips>
+                        ${userType === 'intern' ? html`
+                            <section id="intern_view" class="intern-option dashboard-view__item">
+                                <ul id="assigned_task_list">${renderedAssignedTasks}</ul>
+                            </section>
+                        ` : ''}
+                        ${userType !== 'admin' ? html`<div id="dashboard_tasks_wrapper" class=${`flex flex-direction-column justify-content-center dashboard-view__item ${userType === 'intern' ? 'hidden' : ''}`}>${render.displayTasks(params?.category, params?.search)}</div>` : ''}
+                        ${userType === 'admin' ? html`<div id="active_tasks_wrapper" class=${`flex flex-direction-column gap-0-5 justify-content-center dashboard-view__item`}>${render.activeTasks()}</div>` : ''}
+                        <div id="projects_wrapper" class="grid gap-2 align-items-start align-content-start dashboard-view__item hidden">${render.dashProjects()}</div>
+                        <div id="intern_leaderboard_container" class="dashboard-view__item hide-on-mobile">
+                            <div class="container-header">
+                                <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><g><path d="M7.5,21H2V9h5.5V21z M14.75,3h-5.5v18h5.5V3z M22,11h-5.5v10H22V11z"/></g></svg>
+                                <h4>Leaderboard</h4>
+                                <a id="all_interns_btn" href="#/all_interns_page" class="button button--small">All</a>
+                            </div>
+                            <div id="top_interns" class="observe-empty-state">${filterInterns('', { sortByRating: true, activeOnly: true, limit: 8 })}</div>
+                            <div class="empty-state">
+                                <h4>There are no interns</h4>
+                            </div>
+                        </div>
+                        <div id="certificates_view" class="dashboard-view__item hidden">
+                            <ul id="certificates_container" class="grid gap-1"></ul>
+                        </div>
+                    `)
+                    changeDashboardView(getKeyByValue(floGlobals.dashboardPages, subPageId1))
+                    if (params?.taskId) {
+                        showTaskDetails(params.taskId)
+                    } else
+                        hideTaskDetails()
+                    if (subPageId1 === 'my_certificates' && userType === 'intern') {
+                        effect(() => {
+                            if (fetchCertificateIssueTxsState.value === 'done') {
+                                const issuedCertificates = []
+                                floGlobals.validCerts.forEach((cert, id) => {
+                                    if (cert.floId === floGlobals.myFloID) {
+                                        issuedCertificates.push(html`
+                                            <li class="certificate-card flex align-center gap-0-5">
+                                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 4H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99h16c1.1 0 2-.9 2-2v-8l-6-6zM4 18.01V6h11v5h5v7.01H4z"/></svg>
+                                                <h4 class="capitalize">${cert.certType.toLowerCase()}</h4>
+                                                <a class="button button--small margin-left-auto gap-0-3" href=${`https://ranchimall.github.io/certify/#/home/donwload?id=${cert.txid}`} target="_blank">
+                                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
+                                                    Download
+                                                </a>
+                                            </li>
+                                        `)
+                                    }
+                                })
+                                if (issuedCertificates.length === 0) {
+                                    renderElem(getRef('certificates_container'), html`
+                                        <li class="flex align-center gap-0-5" style="padding: 1rem 0">
+                                            <h4>You have not received any certificates yet.</h4>
+                                        </li>
+                                    `)
+                                } else {
+                                    renderElem(getRef('certificates_container'), html`${issuedCertificates}`)
+                                }
+                            } else if (fetchCertificateIssueTxsState.value === 'fetching') {
+                                renderElem(getRef('certificates_container'), html`
+                                    <li class="flex align-center gap-0-5" style="padding: 1rem 0">
+                                        <sm-spinner></sm-spinner>
+                                        <h4>Fetching certificates...</h4>
+                                    </li>
+                                `)
+                            }
+                        })
+                    }
+                }
+                    break;
+                case 'updates_page': {
+                    closePopup()
+                    if (!getRef('updates_page__project_selector').children.length) {
+                        renderProjectSelectorOptions()
+                        renderInternSelectorOptions()
+                    }
+                    const { projectCode = 'all', internId = 'all', date } = params || {}
+                    setUpdateFilters({ projectCode, internId, date })
+                    let matchedUpdates
+                    if (projectCode !== 'all') {
+                        matchedUpdates = getUpdatesByProject(projectCode)
+                    }
+                    if (internId !== 'all') {
+                        matchedUpdates = getUpdatesByIntern(internId, matchedUpdates)
+                    }
+                    if (date) {
+                        matchedUpdates = getUpdatesByDate(date, matchedUpdates)
+                    }
+                    renderInternUpdates(matchedUpdates)
+                } break;
+                case 'applications':
+                    render.taskApplications()
+                    if (params?.taskId) {
+                        showTaskDetails(params.taskId)
+                    } else {
+                        hideTaskDetails()
+                    }
+                    break;
+                case 'all_interns_page':
+                    renderAllInterns()
+                    break;
+                case 'intern_profile':
+                    render.internProfile(params?.id)
+                    break;
+                case 'project_explorer':
+                    let breadcrumbs = []
+                    if (subPageId1) {
+                        if (params) {
+                            const { id: projectCode, branch } = params
+                            const { projectName, projectDescription } = RIBC.getProjectDetails(projectCode);
+                            if (appState.params.projectCode !== projectCode) {
+                                showProjectInfo(projectCode)
+                                const allProjects = getRef('project_explorer__left').querySelectorAll('.project-card');
+                                allProjects.forEach(project => project.classList.remove('project-card--active'))
+                                const targetProject = [...allProjects].find(project => project.getAttribute('href').includes(projectCode))
+                                if (targetProject)
+                                    targetProject.classList.add('project-card--active')
+                            }
+                            if (branch) {
+                                renderBranchTasks()
+                            }
+                            getRef('project_explorer__left').classList.add('hide-on-mobile')
+                            getRef('project_explorer__right').classList.remove('hidden')
+                            breadcrumbs = [
+                                ['Dashboard', '#/dashboard_page/projects'],
+                                ['All projects', '#/project_explorer/projects'],
+                                [projectName, `#/project_explorer/project?id=${projectCode}&branch=mainLine`],
+                            ]
+                        } else {
+                            getRef('project_explorer__left').querySelectorAll('.project-card').forEach(project => project.classList.remove('project-card--active'))
+                            getRef('project_explorer__left').classList.remove('hide-on-mobile')
+                            getRef('project_explorer__right').classList.add('hidden')
+                            breadcrumbs = [
+                                ['Dashboard', '#/dashboard_page/projects'],
+                                ['All projects', '#/project_explorer/projects']
+                            ]
+                        }
+                    } else {
+                        getRef('project_explorer__left').classList.remove('hide-on-mobile')
+                        getRef('project_explorer__right').classList.add('hidden')
+                        history.replaceState(null, '', '#/project_explorer/projects')
+                        breadcrumbs = [
+                            ['Dashboard', '#/dashboard_page/projects'],
+                        ]
+                    }
+                    renderElem(getRef('project_explorer__breadcrumbs'), html`${createBreadcrumbs(breadcrumbs)}`)
+                    break;
+                case 'admin_page':
+                    if (userType !== 'admin') return;
+                    //show projects
+                    if (subPageId1) {
+                        getRef('admin_view_selector').value = subPageId1;
+                        const viewIndex = [...getRef('admin_view_selector').children].findIndex(elem => elem.hasAttribute('selected'))
+                        showChildElement(getRef('admin_views'), viewIndex, { entry: viewIndex > currentViewIndex ? slideInLeft : slideInRight, exit: viewIndex > currentViewIndex ? slideOutLeft : slideOutRight });
+                        currentViewIndex = viewIndex;
+                        switch (subPageId1) {
+                            case 'projects':
+                                render.projectList(getRef('admin_page__project_list'), getSortedProjectList(), true)
+                                if (params && RIBC.getProjectList().includes(params.id)) {
+                                    const { id: projectCode, branch } = params
+                                    renderAdminProjectView(projectCode)
+                                    if (branch) {
+                                        renderBranchTasks()
+                                    }
+                                    getRef('projects_container__left').classList.add('hide-on-mobile')
+                                    getRef('project_editing_panel').classList.remove('hidden')
+                                } else {
+                                    getRef('projects_container__left').classList.remove('hide-on-mobile')
+                                    getRef('project_editing_panel').classList.add('hidden')
+                                    history.replaceState(null, '', '#/admin_page/projects')
+                                    getRef('admin_page__project_list').querySelectorAll('.project-card').forEach(project => project.classList.remove('project-card--active'))
+                                }
+                                break;
+                            case 'interns':
+                                //show interns
+                                render.adminInterns()
+                                break;
+                            case 'requests':
+                                function removeRequest(requestCard) {
+                                    requestCard.animate([
+                                        {
+                                            transform: 'translateX(0)',
+                                            opacity: 1
+                                        },
+                                        {
+                                            transform: 'translateX(-100%)',
+                                            opacity: 0
+                                        },
+                                    ], {
+                                        duration: floGlobals.prefersReducedMotion ? 0 : 150,
+                                        easing: 'ease'
+                                    }).onfinish = () => {
+                                        requestCard.remove()
+                                    }
+                                }
+                                render.internRequests()
+                                // accept task request
+                                delegate(getRef('requests_list'), 'click', '.accept-request', (e) => {
+                                    getConfirmation('Are you sure you want to accept this request?', { confirmText: 'Accept' }).then(result => {
+                                        if (result) {
+                                            const vectorClock = e.delegateTarget.closest('.request-card').dataset.vectorClock
+                                            if (RIBC.getInternList())
+                                                RIBC.admin.processTaskRequest(vectorClock, true).then(() => {
+                                                    notify('Intern assigned, commit changes to make it permanent.', 'success')
+                                                    removeRequest(e.delegateTarget.closest('.request-card'))
+                                                    adminDataChanged();
+                                                }).catch(err => {
+                                                    notify(err, 'error')
+                                                })
+                                        }
+                                    })
+                                })
+                                // reject task request
+                                delegate(getRef('requests_list'), 'click', '.reject-request', (e) => {
+                                    getConfirmation('Are you sure you want to reject this request?', { confirmText: 'Reject' }).then((result) => {
+                                        if (result) {
+                                            const vectorClock = e.delegateTarget.closest('.request-card').dataset.vectorClock
+                                            const type = e.delegateTarget.closest('.request-card').dataset.type
+                                            if (type === 'task') {
+                                                RIBC.admin.processTaskRequest(vectorClock, false).then(() => {
+                                                    notify('Request rejected', 'success')
+                                                    removeRequest(e.delegateTarget.closest('.request-card'))
+                                                    adminDataChanged();
+                                                }).catch(err => {
+                                                    notify(err, 'error')
+                                                })
+                                            } else if (type === 'internship') {
+                                                const result = RIBC.admin.processInternRequest(vectorClock, false)
+                                                if (result === 'Rejected') {
+                                                    notify('Request rejected', 'success')
+                                                    removeRequest(e.delegateTarget.closest('.request-card'))
+                                                    adminDataChanged();
+                                                }
+                                            }
+                                        }
+                                    })
+                                })
+                                break;
+                            case 'task_display':
+                                //show display tasks map
+                                render.taskDisplayMap()
+                                if (dragger)
+                                    dragger.destroy()
+                                dragger = dragula([getRef('display_task_map'), getRef('all_tasks')])
+                                dragger.on('dragend', function (el, source) {
+                                    const newOrder = Array.from(getRef('display_task_map').children).map(el => el.dataset.taskId)
+                                    RIBC.admin.setDisplayedTasks(newOrder)
+                                    adminDataChanged();
+                                });
+                                break;
+                            case 'certificates':
+                                const issuedCertificates = [...floGlobals.validCerts.values()]
+                                    .sort((a, b) => a.name.localeCompare(b.name))
+                                    .map((cert) => {
+                                        const { name, certType, floId } = cert;
+                                        let initials = name.split(' ').map(word => word[0]).join('')
+                                        initials = initials.length === 1 ? initials : initials[0] + initials[initials.length - 1]
+                                        return html`
+                                        <li class="intern-card align-center flex space-between gap-1">
+                                            <div class="intern-card__initials" style=${`--color: var(${getInternColor(floId)})`}>${initials}</div>
+                                            <span>${name}</span>
+                                            <span>${certType.toLowerCase()}</span>
+                                        </li>`
+                                    })
+                                renderElem(getRef('certificates_list'), html`${issuedCertificates}`)
+                                break;
+                        }
+                    }
+                    break;
+            }
+            switch (appState.lastPage) {
+                case 'project_explorer':
+                case 'all_interns_page':
+                    routingAnimation.in = slideInRight;
+                    routingAnimation.out = slideOutRight;
+                    break;
+            }
+            switch (pageId) {
+                case 'project_explorer':
+                case 'all_interns_page':
+                    routingAnimation.in = slideInLeft;
+                    routingAnimation.out = slideOutLeft;
+                    break;
+            }
+            if (appState.lastPage !== pageId) {
+                if (document.querySelector('.nav-list__item--active'))
+                    document.querySelector('.nav-list__item--active').classList.remove('nav-list__item--active');
+                const targetListItem = [...document.querySelectorAll(`a.nav-list__item`)].find(item => item.href.includes(pageId))
+                if (targetListItem) {
+                    targetListItem.classList.add('nav-list__item--active')
+                    getRef('main_nav').classList.remove('hide-on-mobile')
+                } else {
+                    getRef('main_nav').classList.add('hide-on-mobile')
+                }
+                document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
+                getRef(pageId).closest('.page').classList.remove('hidden')
+                let ogOverflow = getRef(pageId).parentNode.style.overflow
+                getRef(pageId).parentNode.style.overflow = 'hidden';
+                if (appState.lastPage) {
+                    getRef(appState.lastPage).animate(routingAnimation.out, { duration: floGlobals.prefersReducedMotion ? 0 : 150, fill: 'forwards', easing: 'ease' }).onfinish = (e) => {
+                        e.target.effect.target.classList.add('hidden')
+                    }
+                }
+                getRef(pageId).classList.remove('hidden')
+                getRef(pageId).animate(routingAnimation.in, { duration: floGlobals.prefersReducedMotion ? 0 : 150, fill: 'forwards', easing: 'ease' }).onfinish = (e) => {
+                    getRef(pageId).parentNode.style.overflow = ogOverflow;
+                    switch (pageId) {
+                        case 'sign_in':
+                            getRef('private_key_field').focusIn()
+                            break;
+                    }
+                    if (appState.lastPage === 'dashboard_page') {
+                        renderElem(getRef('dashboard_page'), html``)
+                    }
+                    if (appState.lastPage === 'intern_profile') {
+                        renderElem(getRef('intern_profile'), html``)
+                    }
+                    if (appState.lastPage === 'settings_page') {
+                        renderElem(getRef('settings_page'), html``)
+                    }
+                    appState.lastPage = pageId
+                }
+            }
+        }
+        function createBreadcrumbs(links) {
+            const crumbs = []
+            links.forEach(([name, link], index) => {
+                crumbs.push(html`<a href="${link}" class=${`breadcrumb ${(index === links.length - 1) ? 'breadcrumb--active' : ''}`}>${name}</a>`)
+                if (index !== links.length - 1) {
+                    crumbs.push(html`
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+                        `)
+                }
+            })
+            return crumbs
+        }
+        // class based lazy loading
+        class LazyLoader {
+            constructor(container, elementsToRender, renderFn, options = {}) {
+                const { batchSize = 10, freshRender, bottomFirst = false, domUpdated } = options
+
+                this.elementsToRender = elementsToRender
+                this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
+                this.renderFn = renderFn
+                this.intersectionObserver
+
+                this.batchSize = batchSize
+                this.freshRender = freshRender
+                this.domUpdated = domUpdated
+                this.bottomFirst = bottomFirst
+
+                this.shouldLazyLoad = false
+                this.lastScrollTop = 0
+                this.lastScrollHeight = 0
+
+                this.lazyContainer = document.querySelector(container)
+
+                this.update = this.update.bind(this)
+                this.render = this.render.bind(this)
+                this.init = this.init.bind(this)
+                this.clear = this.clear.bind(this)
+            }
+            get elements() {
+                return this.arrayOfElements
+            }
+            init() {
+                this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            observer.disconnect()
+                            this.render({ lazyLoad: true })
+                        }
+                    })
+                })
+                this.mutationObserver = new MutationObserver(mutationList => {
+                    mutationList.forEach(mutation => {
+                        if (mutation.type === 'childList') {
+                            if (mutation.addedNodes.length) {
+                                if (this.bottomFirst) {
+                                    if (this.lazyContainer.firstElementChild)
+                                        this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
+                                } else {
+                                    if (this.lazyContainer.lastElementChild)
+                                        this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+                                }
+                            }
+                        }
+                    })
+                })
+                this.mutationObserver.observe(this.lazyContainer, {
+                    childList: true,
+                })
+                this.render()
+            }
+            update(elementsToRender) {
+                this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
+            }
+            render(options = {}) {
+                let { lazyLoad = false } = options
+                this.shouldLazyLoad = lazyLoad
+                const frag = document.createDocumentFragment();
+                if (lazyLoad) {
+                    if (this.bottomFirst) {
+                        this.updateEndIndex = this.updateStartIndex
+                        this.updateStartIndex = this.updateEndIndex - this.batchSize
+                    } else {
+                        this.updateStartIndex = this.updateEndIndex
+                        this.updateEndIndex = this.updateEndIndex + this.batchSize
+                    }
+                } else {
+                    this.intersectionObserver.disconnect()
+                    if (this.bottomFirst) {
+                        this.updateEndIndex = this.arrayOfElements.length
+                        this.updateStartIndex = this.updateEndIndex - this.batchSize - 1
+                    } else {
+                        this.updateStartIndex = 0
+                        this.updateEndIndex = this.batchSize
+                    }
+                    this.lazyContainer.innerHTML = ``;
+                }
+                this.lastScrollHeight = this.lazyContainer.scrollHeight
+                this.lastScrollTop = this.lazyContainer.scrollTop
+                this.arrayOfElements.slice(this.updateStartIndex, this.updateEndIndex).forEach((element, index) => {
+                    frag.append(this.renderFn(element))
+                })
+                if (this.bottomFirst) {
+                    this.lazyContainer.prepend(frag)
+                    // scroll anchoring for reverse scrolling
+                    this.lastScrollTop += this.lazyContainer.scrollHeight - this.lastScrollHeight
+                    this.lazyContainer.scrollTo({ top: this.lastScrollTop })
+                    this.lastScrollHeight = this.lazyContainer.scrollHeight
+                } else {
+                    this.lazyContainer.append(frag)
+                }
+                if (!lazyLoad && this.bottomFirst) {
+                    this.lazyContainer.scrollTop = this.lazyContainer.scrollHeight
+                }
+                // Callback to be called if elements are updated or rendered for first time
+                if (!lazyLoad && this.freshRender)
+                    this.freshRender()
+            }
+            clear() {
+                this.intersectionObserver.disconnect()
+                this.mutationObserver.disconnect()
+                this.lazyContainer.innerHTML = ``;
+            }
+            reset() {
+                this.arrayOfElements = (typeof this.elementsToRender === 'function') ? this.elementsToRender() : this.elementsToRender || []
+                this.render()
+            }
+        }
+        function buttonLoader(id, show) {
+            const button = typeof id === 'string' ? getRef(id) : id;
+            button.disabled = show;
+            const animOptions = {
+                duration: floGlobals.prefersReducedMotion ? 0 : 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }
+            if (show) {
+                button.animate([
+                    {
+                        clipPath: 'circle(100%)',
+                    },
+                    {
+                        clipPath: 'circle(0)',
+                    },
+                ], animOptions).onfinish = e => {
+                    e.target.commitStyles()
+                    e.target.cancel()
+                }
+                button.parentNode.append(createElement('sm-spinner'))
+            } else {
+                button.style = ''
+                const potentialTarget = button.parentNode.querySelector('sm-spinner')
+                if (potentialTarget) potentialTarget.remove();
+            }
+        }
+        // implement event delegation
+        function delegate(el, event, selector, fn) {
+            el.addEventListener(event, function (e) {
+                const potentialTarget = e.target.closest(selector)
+                if (potentialTarget) {
+                    e.delegateTarget = potentialTarget
+                    fn.call(this, e)
+                }
+            })
+        }
+        const slideInLeft = [
+            {
+                opacity: 0,
+                transform: 'translateX(1rem)'
+            },
+            {
+                opacity: 1,
+                transform: 'translateX(0)'
+            }
+        ]
+        const slideOutLeft = [
+            {
+                opacity: 1,
+                transform: 'translateX(0)'
+            },
+            {
+                opacity: 0,
+                transform: 'translateX(-1rem)'
+            },
+        ]
+        const slideInRight = [
+            {
+                opacity: 0,
+                transform: 'translateX(-1rem)'
+            },
+            {
+                opacity: 1,
+                transform: 'translateX(0)'
+            }
+        ]
+        const slideOutRight = [
+            {
+                opacity: 1,
+                transform: 'translateX(0)'
+            },
+            {
+                opacity: 0,
+                transform: 'translateX(1rem)'
+            },
+        ]
+        const slideInDown = [
+            {
+                opacity: 0,
+                transform: 'translateY(-1rem)'
+            },
+            {
+                opacity: 1,
+                transform: 'translateY(0)'
+            },
+        ]
+        const slideOutDown = [
+            {
+                opacity: 1,
+                transform: 'translateY(0)'
+            },
+            {
+                opacity: 0,
+                transform: 'translateY(1rem)'
+            },
+        ]
+        const slideInUp = [
+            {
+                opacity: 0,
+                transform: 'translateY(1rem)'
+            },
+            {
+                opacity: 1,
+                transform: 'translateY(0)'
+            },
+        ]
+        const slideOutUp = [
+            {
+                opacity: 1,
+                transform: 'translateY(0)'
+            },
+            {
+                opacity: 0,
+                transform: 'translateY(-1rem)'
+            },
+        ]
+
+        function showChildElement(id, index, options = {}) {
+            return new Promise((resolve) => {
+                const { mobileView = false, entry, exit } = options
+                const animOptions = {
+                    duration: floGlobals.prefersReducedMotion ? 0 : 150,
+                    easing: 'ease',
+                    fill: 'forwards'
+                }
+                const parent = typeof id === 'string' ? getRef(id) : id;
+                const visibleElement = [...parent.children].find(elem => !elem.classList.contains(mobileView ? 'hide-on-mobile' : 'hidden'));
+                if (visibleElement === parent.children[index]) return;
+                visibleElement.getAnimations().forEach(anim => anim.cancel())
+                parent.children[index].getAnimations().forEach(anim => anim.cancel())
+                if (visibleElement) {
+                    if (exit) {
+                        parent.style.overflow = 'hidden'
+                        visibleElement.animate(exit, animOptions).onfinish = () => {
+                            visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden')
+                            parent.style.overflow = ''
+                        }
+                        parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
+                        if (entry) {
+                            parent.children[index].animate(entry, animOptions).onfinish = () => resolve()
+                        }
+                    } else {
+                        visibleElement.classList.add(mobileView ? 'hide-on-mobile' : 'hidden')
+                        parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
+                        resolve()
+                    }
+                } else {
+                    parent.children[index].classList.remove(mobileView ? 'hide-on-mobile' : 'hidden')
+                    parent.children[index].animate(entry, animOptions).onfinish = () => resolve()
+                }
+            })
+        }
+        function togglePrivateKeyVisibility(input) {
+            const target = input.closest('sm-input')
+            target.type = target.type === 'password' ? 'text' : 'password';
+            target.focusIn()
+        }
+        function filterMap(array, mapFn) {
+            const result = [];
+            array.forEach((element, index) => {
+                const mapped = mapFn(element, index)
+                if (mapped) result.push(mapped)
+            })
+            return result;
+        }
+        const mobileQuery = window.matchMedia('(max-width: 40rem)')
+        function handleMobileChange(e) {
+            floGlobals.isMobileView = e.matches
+        }
+        mobileQuery.addEventListener('change', handleMobileChange)
+        handleMobileChange(mobileQuery)
+        const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        reduceMotionQuery.addEventListener('change', () => {
+            floGlobals.prefersReducedMotion = reduceMotionQuery.matches
+        });
+        floGlobals.prefersReducedMotion = reduceMotionQuery.matches
+
+        const generateKeys = document.createElement('template')
+        generateKeys.innerHTML = `
+            <style>
+                :host{
+                    display: flex;
+                    justify-content: center;
+                }
+                .generated-keys-wrapper {
+                    padding: 1rem;
+                    background-color: rgba(var(--foreground-color), 1);
+                    border-radius: 0.5rem;
+                }
+                #flo_id_warning{
+                    padding-bottom: 1.5rem;
+                }
+                #flo_id_warning .icon {
+                    height: 3rem;
+                    width: 3rem;
+                    padding: 0.8rem;
+                    overflow: visible;
+                    background-color: #ffc107;
+                    border-radius: 3rem;
+                    fill: rgba(0, 0, 0, 0.8);
+                }
+            </style>     
+            <section class="grid gap-1-5">
+                <div id="flo_id_warning" class="flex gap-1">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /> </svg>
+                    <div class="grid gap-0-5">
+                        <strong>
+                            <h3> Keep your keys safe! </h3>
+                        </strong>
+                        <p>Don't share with anyone. Once lost private key can't be recovered.</p>
+                    </div>
+                </div>
+                <div class="grid gap-1-5 generated-keys-wrapper">
+                    <div class="grid gap-0-5">
+                        <h5>FLO address</h5>
+                        <sm-copy id="generated_flo_address"></sm-copy>
+                    </div>
+                    <div class="grid gap-0-5">
+                        <h5>Private key</h5>
+                        <sm-copy id="generated_private_key"></sm-copy>
+                    </div>
+                </div>
+                <button id="sign_up_button" class="button button--primary w-100">Sign in with these credentials</button>
+                <p class="margin-top-1">You can use these FLO credentials with other RanchiMall apps too. </p>
+            </section>
+        `
+        window.customElements.define('keys-generator', class extends HTMLElement {
+            constructor() {
+                super();
+                this.appendChild(generateKeys.content.cloneNode(true));
+            }
+            get keys() {
+                return {
+                    floID: this.querySelector('#generated_flo_address').value,
+                    privKey: this.querySelector('#generated_private_key').value
+                }
+            }
+
+            generateKeys() {
+                const { floID, privKey } = floCrypto.generateNewID()
+                this.querySelector('#generated_flo_address').value = floID
+                this.querySelector('#generated_private_key').value = privKey
+            }
+            clearKeys() {
+                this.querySelector('#generated_flo_address').value = ''
+                this.querySelector('#generated_private_key').value = ''
+            }
+        });
+    </script>
+    <script id="app_ui">
+        "use strict";
+        floGlobals.taskCategories = {
+            c00: 'Creative Writing',
+            c01: 'Marketing',
+            c02: 'Design',
+            c03: 'Development',
+            c04: 'Social Media Management',
+            c05: 'Video Making',
+            c06: 'Project Scouting & Capital Raising',
+            c07: 'Investment & Finance',
+        }
+        const render = {
+            displayTaskCard(projectCode, branch, task) {
+                const taskId = `${projectCode}_${branch}_${task}`;
+                const { title, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(taskId)
+                const assignedInterns = RIBC.getAssignedInterns(taskId);
+                return html`
+                    <li class=${`display-task`}>
+                        <div class="flex align-center space-between">
+                            <a class="display-task__category" href=${`#/landing?category=${category}`} title=${`See all ${floGlobals.taskCategories[category]} tasks`}>${floGlobals.taskCategories[category]}</a>
+                            <a href=${`${location.hash.split('?')[0]}?taskId=${taskId}`} class="display-task__link button button--small button--colored">
+                                View details
+                                <svg class="icon" style="margin-right: -0.5rem" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
+                            </a> 
+                        </div>
+                        <a href=${`${location.hash.split('?')[0]}?taskId=${taskId}`} class="display-task__link flex flex-direction-column gap-1">
+                            <h4 class="display-task__title">${title}</h4>
+                            <div class="display-task__details flex flex-wrap gap-0-3">
+                                ${duration ? html`
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Duration: </span>
+                                        <span class="display-task__detail__value">${duration} ${durationType}</span>
+                                    </div>
+                                `: ''}
+                                ${maxSlots ? html`
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Slots: </span>
+                                        <span class="display-task__detail__value">${maxSlots - assignedInterns.length}</span>
+                                    </div>
+                                `: ''}
+                                ${reward ? html`
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Reward: </span>
+                                        <span class="display-task__detail__value">₹${reward}</span>
+                                    </div>
+                                `: ''}
+                            </div>
+                        </a>
+                    </li>
+                `;
+            },
+            displayTasks(category = 'all', searchQuery) {
+                // render tasks
+                const allTasks = RIBC.getAllTasks();
+                if (!allTasks) return;
+                const displayedTasks = RIBC.getDisplayedTasks()
+                const filterCategory = category === 'all' ? false : category;
+                const filtered = []
+                const availableCategories = new Set();
+                for (const taskId of displayedTasks) {
+                    const [projectCode, branch, task] = taskId.split('_')
+                    const assignedInterns = RIBC.getAssignedInterns(taskId);
+                    if (assignedInterns.length >= allTasks[taskId].maxSlots) continue;
+                    availableCategories.add(allTasks[taskId].category)
+                    if (userType && userType === 'intern' && floGlobals.myFloID && assignedInterns.includes(floGlobals.myFloID)) continue;
+                    if (filterCategory && allTasks[taskId].category !== filterCategory) continue;
+                    if (searchQuery && searchQuery !== '') {
+                        if (!allTasks[taskId].title.toLowerCase().includes(searchQuery.toLowerCase()) && !floGlobals.taskCategories[allTasks[taskId].category].toLowerCase().includes(searchQuery.toLowerCase())) continue;
+                    }
+                    filtered.push(render.displayTaskCard(projectCode, branch, task))
+                }
+                let renderedTasks = filtered
+                if (searchQuery && filtered.length === 0) {
+                    renderedTasks = html`<p>No tasks related to <b>${searchQuery}</b></p>`
+                }
+                // render categories
+                let renderedCategories = []
+                if (availableCategories.size > 1) {
+                    renderedCategories = [html`<sm-chip value='all' ?selected=${category === 'all'}>All</sm-chip>`];
+                    availableCategories.forEach(categoryID => {
+                        renderedCategories.push(html`<sm-chip value=${categoryID} ?selected=${categoryID === category}>${floGlobals.taskCategories[categoryID]}</sm-chip>`)
+                    })
+                }
+                setTimeout(() => {
+                    if (getRef('task_search_input') && getRef('task_search_input').value.trim() !== searchQuery)
+                        getRef('task_search_input').value = searchQuery || ''
+                }, 0);
+                return html`
+                    <div id="display_task_search_wrapper" class="flex flex-direction-column gap-1">
+                        <div class="flex align-center gap-1 flex-wrap space-between">
+                            <h2>
+                                Apply below
+                            </h2>
+                            ${(filtered.length > 0 || searchQuery) ? html`
+                                <sm-input id="task_search_input" oninput="filterTasks(event)" placeholder="Find tasks" type="search">
+                                    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg>
+                                </sm-input>
+                            `: ''}
+                        </div>
+                        ${availableCategories.size > 1 ? html`<sm-chips id="task_category_selector" onchange='filterTasks()'>${renderedCategories}</sm-chips>` : ''}
+                    </div>
+                    <div class="grid gap-1">
+                        <ul id="display_task_list" class="flex flex-direction-column gap-0-5 observe-empty-state">${renderedTasks}</ul>
+                        <div class="empty-state">
+                            <p>Nothing to see here</p>
+                        </div>
+                    </div>
+                `;
+            },
+            projectCard(projectCode, isAdmin = false, ref) {
+                const projectName = RIBC.getProjectDetails(projectCode).projectName
+                const page = isAdmin ? 'admin_page' : 'project_explorer'
+                const projectLink = isAdmin ? `#/${page}/projects?id=${projectCode}&branch=mainLine` : `#/${page}/project?id=${projectCode}&branch=mainLine`
+                return html.for(ref, projectCode)`<a class="project-card flex align-center interactive" title="Project information" href=${projectLink}>${projectName}</a>`
+            },
+            taskCard(task) {
+                const taskId = `${appState.params.id}_${appState.params.branch}_${task}`;
+                const { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(taskId)
+                const branches = getAllBranches(appState.params.id)
+                const branchesButtons = filterMap(branches, (branch) => {
+                    const { branchName, parentBranch, startPoint, endPoint } = branch
+                    if (parentBranch === appState.params.branch && startPoint === task) {
+                        return render.branchButton({
+                            projectCode: appState.params.id,
+                            branch: branchName,
+                            page: 'project_explorer'
+                        })
+                    }
+                })
+                const assignedInterns = RIBC.getAssignedInterns(taskId)
+                const assignedInternsCards = assignedInterns.map(internFloId => render.assignedInternCard(internFloId, taskId));
+                const status = RIBC.getTaskStatus(taskId)
+                const linkifyDescription = createElement('p', {
+                    innerHTML: DOMPurify.sanitize(linkify(description)),
+                    className: `timeline-task__description ws-pre-line wrap-around`
+                })
+                return html`
+                    <div class=${`task ${status}`}>
+                        <div class="left">
+                            <div class="circle">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
+                            </div>
+                            <div class="line"></div>
+                        </div>
+                        <div class="right">
+                            <h4 class="timeline-task__title">${title}</h4>
+                            ${assignedInternsCards.length ? html`<div class="flex align-center gap-0-3 flex-wrap">${assignedInternsCards}</div>` : ''}
+                            <collapsed-text>
+                                ${linkifyDescription}
+                            </collapsed-text>
+                            <div class="timeline-task__details flex flex-wrap gap-0-3">
+                                ${duration ? html`
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Duration: </span>
+                                        <span class="display-task__detail__value">${duration} ${durationType}</span>
+                                    </div>
+                                `: ''}
+                                ${maxSlots ? html`
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Slots: </span>
+                                        <span class="display-task__detail__value">${maxSlots - assignedInterns.length}</span>
+                                    </div>
+                                `: ''}
+                                ${reward ? html`
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Reward: </span>
+                                        <span class="display-task__detail__value">₹${reward}</span>
+                                    </div>
+                                `: ''}
+                            ${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
+                        </div>
+                    </div>
+                `;
+            },
+            activeTasks() {
+                return Object.keys(RIBC.getAllTasks())
+                    .filter(task => RIBC.getTaskStatus(task) === 'incomplete')
+                    .map(task => render.activeTaskCard(task))
+            },
+            activeTaskCard(taskId) {
+                const { title } = RIBC.getTaskDetails(taskId)
+                const assignedInterns = (RIBC.getAssignedInterns(taskId) || []).map(internFloId => render.assignedInternCard(internFloId, taskId))
+                return html`
+                    <div class="active-task grid align-center gap-0-5">
+                        <h4 class="active-task-card__title">${title}</h4>
+                        <div class="active-task-card__interns flex align-center gap-0-5">
+                            ${assignedInterns.length ? assignedInterns : html`<p class="active-task-card__no-interns">No Interns Assigned</p>`}
+                        </div>
+                    </div>
+                `
+            },
+            internCard(internFloId, options = {}) {
+                const { selectable } = options
+                const internName = RIBC.getInternList()[internFloId]
+                const internPoints = RIBC.getInternRating(internFloId)
+                const { active } = RIBC.getInternRecord(internFloId)
+                const splitName = internName.split(' ')
+                let initials = splitName[0][0]
+                if (splitName.length > 1) {
+                    initials += splitName[splitName.length - 1][0]
+                }
+                if (selectable) {
+                    return html`
+                    <label class="intern-card align-center interactive" .dataset=${{ internFloId }} title="Intern Information">
+                        <input type="checkbox" class="intern-card__checkbox" value=${internFloId}>
+                        <div class="intern-card__initials" style=${`--color: var(${getInternColor(internFloId)})`}>${initials}</div>
+                        <div class="intern-card__name flex-1">${internName}</div>
+                        <div class="intern-card__score-wrapper flex align-center">
+                            <b class="intern-card__score">${internPoints}</b>
+                            <svg class="icon icon--star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z" /> </svg>
+                        </div>
+                    </label>`;
+                } else {
+                    return html`
+                        <a class="intern-card align-center interactive" href=${`#/intern_profile?id=${internFloId}`} title="Intern Information">
+                            <div class="intern-card__initials" style=${`--color: var(${getInternColor(internFloId)})`}>${initials}</div>
+                            <div class="grid gap-0-3 flex-1">
+                                <div class="intern-card__name">${internName}</div>
+                                ${!active ? html`<div class="intern-card__status">Inactive</div>` : ''}
+                            </div>
+                            <div class="intern-card__score-wrapper flex align-center">
+                                <b class="intern-card__score">${internPoints}</b>
+                                <svg class="icon icon--star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z" /> </svg>
+                            </div>
+                        </a>`;
+                }
+            },
+            adminInterns() {
+                const addInternButton = html`<button class="button button--colored" onclick="openPopup('add_intern_popup')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
+                    Add intern
+                </button>`
+                renderElem(getRef('admin_page__intern_list'), html`${[addInternButton, filterInterns('')]}`)
+            },
+            internUpdateCard(update) {
+                const { floID, time, note, update: { projectCode, branch, task, description, link }, tag } = update
+                let topic = `${RIBC.getProjectDetails(projectCode).projectName} / ${RIBC.getTaskDetails(`${projectCode}_${branch}_${task}`).title}`
+                const internName = RIBC.getInternList()[floID]
+                const updateMessage = createElement('p', {
+                    className: 'update__message ws-pre-line wrap-around',
+                    innerHTML: DOMPurify.sanitize(linkify(description))
+                })
+                let replyButton
+                let saveButton
+                if (userType === "admin") {
+                    if (!note)
+                        replyButton = html`<button class="button button--small button--colored init-update-replay">Reply</button>`
+                    if (!tag)
+                        saveButton = html`<button class="button button--small button--colored save-update margin-left-auto">Save</button>`
+                }
+                let providedLink
+                if (link) {
+                    providedLink = html`<a href=${link} target="_blank" rel="noopener noreferrer">${link}</a> `
+                }
+                let adminReply
+                if (note) {
+                    adminReply = html`<div class="admin-reply grid">
+                        <h4 class="admin-reply__title">Admin</h4>
+                        <p class="admin-reply__description ws-pre-line wrap-around">${note}</p>
+                    </div>`
+                }
+                return html.node`
+                    <li class="intern-update" data-vector-clock="${`${time}_${floID}`}">
+                        <div class="flex align-center space-between">
+                            <span class="update__sender">${internName}</span>
+                            <span class="update__time">${getFormattedTime(time)}</span>
+                        </div>
+                        <h4 class="update__topic">${topic}</h4>
+                        ${updateMessage}
+                        ${providedLink}
+                        ${adminReply}
+                        ${saveButton || replyButton ? html`<div class="flex align-center gap-0-3">${saveButton}${replyButton}</div>` : ''}
+                    </li>`;
+            },
+            branchButton(obj = {}) {
+                const { projectCode, branch, page, active = false } = obj
+                return html`
+                    <a class=${`branch-button ${active ? 'branch-button--active' : ''}`} href=${`#/${page}/project?id=${projectCode}&branch=${branch}`}>
+                    ${branch}
+                    </a>
+                `;
+            },
+            assignedInternCard(internFloId, taskId, options = {}) {
+                const { showOptions = false } = options
+                const { hasDeadlinePassed, elapsedPercentage, taskDeadline } = getTaskDeadline(taskId, internFloId)
+                const taskCompleted = RIBC.getInternRecord(internFloId).completedTasks.hasOwnProperty(taskId)
+                let taskStatus = 'In Progress';
+                let statusModifier = '--in-progress'
+                if (taskCompleted) {
+                    taskStatus = 'Completed'
+                    statusModifier = '--completed'
+                } else if (hasDeadlinePassed) {
+                    taskStatus = 'Overdue'
+                    statusModifier = '--overdue'
+                }
+                let isInProgress = !taskCompleted && !hasDeadlinePassed
+                let optionsButton
+                if (showOptions && taskId && !taskCompleted) {
+                    optionsButton = html` <button class="unassign-intern-button">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+                </button> `;
+                }
+                const title = isInProgress ? `Due ${getFormattedTime(taskDeadline, 'date-only')}` : ''
+                return html`
+                    <span class=${`assigned-intern assigned-intern${statusModifier}`} title=${title} data-flo-id="${internFloId}" style=${`--progress: ${elapsedPercentage}`}>
+                        ${RIBC.getInternList()[internFloId]}
+                        <span class=${`task-status task-status${statusModifier}`}>${taskStatus}</span>
+                        ${optionsButton}
+                    </span>
+                `
+            },
+            assignedInternTasks(internId) {
+                const { assignedTasks, completedTasks, failedTasks } = RIBC.getInternRecord(internId)
+                if (getObjLength(assignedTasks) === 0) return false
+                const assignedTasksList = [];
+                for (const task in assignedTasks) {
+                    if (completedTasks.hasOwnProperty(task) || failedTasks.hasOwnProperty(task)) continue;
+                    const { assignedOn } = assignedTasks[task];
+                    const { title } = RIBC.getAllTasks()[task];
+                    assignedTasksList.push(html`
+                        <div class="intern_profile__task intern_profile__task--assigned">
+                            <h4>${title}</h4>
+                            <time>${getFormattedTime(assignedOn || assignedTasks[task], 'date-only')}</time>
+                        </div>`)
+                }
+                return assignedTasksList.length > 0 ? assignedTasksList : false
+            },
+            completedInternTasks(internId, savedUpdates) {
+                const { completedTasks } = RIBC.getInternRecord(internId)
+                if (getObjLength(completedTasks) === 0) return false
+                return Object.keys(completedTasks).map(task => {
+                    const { link, description } = savedUpdates.get(task) || {}
+                    const { points, completionDate } = completedTasks[task];
+                    const { title } = RIBC.getAllTasks()[task];
+                    const div = document.createElement('div')
+                    div.innerHTML = DOMPurify.sanitize(linkify(link || description))
+                    const links = [...div.querySelectorAll('a')].map(link => {
+                        link.textContent = 'See output'
+                        link.className = 'button button--small button--colored margin-right-auto'
+                        return link
+                    })
+                    return html`
+                        <div class="intern_profile__task intern_profile__task--completed">
+                            <h4>${title}</h4>
+                            <time>${getFormattedTime(completionDate, 'date-only')}</time>
+                            <p class="flex align-center gap-0-3">
+                                ${points}
+                                <svg class="icon icon--star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z"></path> </svg>
+                            </p>
+                            ${links}
+                        </div>`})
+            },
+            adminTask(task) {
+                const taskId = `${appState.params.id}_${appState.params.branch}_${task}`
+                const assignedInterns = RIBC.getAssignedInterns(taskId)
+                const status = RIBC.getTaskStatus(taskId)
+                const { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(taskId)
+                let assignedInternsCards = assignedInterns.map(internFloId => render.assignedInternCard(internFloId, taskId, { showOptions: true }))
+                const branches = getAllBranches(appState.params.id)
+                const branchesButtons = filterMap(branches, (branch) => {
+                    const { branchName, parentBranch, startPoint, endPoint } = branch
+                    if (parentBranch === appState.params.branch && startPoint === task) {
+                        return render.branchButton({
+                            projectCode: appState.params.id,
+                            branch: branchName,
+                            page: 'admin_page'
+                        })
+                    }
+                })
+                if (status === 'incomplete') {
+                    const taskTitle = createElement('h4', {
+                        className: 'task-title',
+                        innerHTML: DOMPurify.sanitize(title)
+                    })
+                    const taskDescription = createElement('p', {
+                        className: 'task-description ws-pre-line wrap-around',
+                        innerHTML: DOMPurify.sanitize(description)
+                    })
+                    return html`
+                        <li class=${`admin-task ${status}`} .dataset=${{ taskId: task }}>
+                            <div class="flex align-center gap-0-5 flex-wrap">
+                                <div class="admin-task__task-number margin-right-auto">ID: ${task}</div>
+                                ${assignedInternsCards.length ? html`<button class="button button--small button--colored" onclick=${markTaskAsCompleted}>
+                                    <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
+                                    Mark as done
+                                </button>` : ''}
+                                <button class="button icon-only button--colored" title="Edit task" onclick=${openTaskEditingPopup}>
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"></path> </svg>
+                                </button>
+                                <button class="button button--danger icon-only" title="Delete this task" onclick="removeThisTask()">
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+                                </button>
+                            </div>
+                            ${taskTitle}
+                            <div class="grid gap-1 intern-section">
+                                <div class="flex align-center gap-0-5">
+                                    <button class="button button--small button--colored" onclick="currentTask=this.closest('.admin-task');openPopup('intern_list_popup')">
+                                        <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z"/></g></svg>
+                                        Assign
+                                    </button>
+                                    ${assignedInternsCards.length ? html`<button class="button button--small button--colored" onclick=${initTaskScoring}>
+                                        <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
+                                        Rate
+                                    </button>` : ''}
+                                </div>
+                                ${assignedInternsCards.length ? html`<div class="flex align-center flex-wrap gap-0-3"> ${assignedInternsCards} </div>` : 'No interns assigned. Click on "Assign" to assign interns.'}
+                            </div>
+                            <collapsed-text>
+                                ${taskDescription}
+                                ${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
+                                <div class="display-task__details flex flex-wrap gap-0-3 margin-top-1">
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Category: </span>
+                                        <span class="display-task__detail__value">${floGlobals.taskCategories[category]}</span>
+                                    </div>
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Duration: </span>
+                                        <span class="display-task__detail__value">${duration} ${durationType}</span>
+                                    </div>
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Max slots: </span>
+                                        <span class="display-task__detail__value">${maxSlots}</span>
+                                    </div>
+                                    <div class="display-task__detail">
+                                        <span class="display-task__detail__title">Reward: </span>
+                                        <span class="display-task__detail__value">${reward}</span>
+                                    </div>
+                                </div>
+                            </collapsed-text>
+                            ${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
+                            <div class="flex align-center gap-0-5 flex-wrap margin-top-1">
+                                <button class="button button--small button--colored" onclick=${openNewBranchPopup}>
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M7.105 15.21A3.001 3.001 0 1 1 5 15.17V8.83a3.001 3.001 0 1 1 2 0V12c.836-.628 1.874-1 3-1h4a3.001 3.001 0 0 0 2.895-2.21 3.001 3.001 0 1 1 2.032.064A5.001 5.001 0 0 1 14 13h-4a3.001 3.001 0 0 0-2.895 2.21zM6 17a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" /> </svg>
+                                    Create Branch
+                                </button>
+                            </div>
+                        </li>
+                `;
+                } else {
+                    const taskDescription = createElement('p', {
+                        className: 'task-description ws-pre-line wrap-around',
+                        innerHTML: DOMPurify.sanitize(linkify(description))
+                    })
+                    return html`
+                    <li class=${`admin-task ${status}`} .dataset=${{ taskId: task }}>
+                        <div class="flex align-center gap-0-3 space-between">
+                            <button class="button button--small button--danger" onclick=${markTaskAsIncomplete}>
+                                <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><path d="M17,12c-2.76,0-5,2.24-5,5s2.24,5,5,5c2.76,0,5-2.24,5-5S19.76,12,17,12z M18.65,19.35l-2.15-2.15V14h1v2.79l1.85,1.85 L18.65,19.35z M18,3h-3.18C14.4,1.84,13.3,1,12,1S9.6,1.84,9.18,3H6C4.9,3,4,3.9,4,5v15c0,1.1,0.9,2,2,2h6.11 c-0.59-0.57-1.07-1.25-1.42-2H6V5h2v3h8V5h2v5.08c0.71,0.1,1.38,0.31,2,0.6V5C20,3.9,19.1,3,18,3z M12,5c-0.55,0-1-0.45-1-1 c0-0.55,0.45-1,1-1c0.55,0,1,0.45,1,1C13,4.55,12.55,5,12,5z"/></g></svg>
+                                Mark as incomplete
+                            </button>
+                            <span class="tag">Completed</span>
+                        </div>
+                        <h4 class="task-title">${title}</h4>
+                        <div class="flex align-center gap-0-3 flex-wrap">
+                            ${assignedInternsCards}
+                        </div>
+                        <collapsed-text>
+                            ${taskDescription}
+                            ${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
+                            <div class="display-task__details flex flex-wrap gap-0-3 margin-top-1">
+                                <div class="display-task__detail">
+                                    <span class="display-task__detail__title">Category: </span>
+                                    <span class="display-task__detail__value">${floGlobals.taskCategories[category]}</span>
+                                </div>
+                                <div class="display-task__detail">
+                                    <span class="display-task__detail__title">Duration: </span>
+                                    <span class="display-task__detail__value">${duration} ${durationType}</span>
+                                </div>
+                                <div class="display-task__detail">
+                                    <span class="display-task__detail__title">Max slots: </span>
+                                    <span class="display-task__detail__value">${maxSlots}</span>
+                                </div>
+                                <div class="display-task__detail">
+                                    <span class="display-task__detail__title">Reward: </span>
+                                    <span class="display-task__detail__value">${reward}</span>
+                                </div>
+                            </div>
+                        </collapsed-text>
+                    </li>
+                `;
+                }
+            },
+            taskRequestCard(request) {
+                const { details: { taskId, name, brief, contact, portfolioLink }, floID, vectorClock } = request
+                const internName = RIBC.getInternList()[floID];
+                const { category } = RIBC.getTaskDetails(taskId);
+                return html`
+                    <li class="request-card" .dataset=${{ vectorClock, type: 'task' }}>
+                        <div class="flex align-center space-between">
+                            <div class="display-task__category justify-self-start">${floGlobals.taskCategories[category]}</div>
+                            <time>${getFormattedTime(vectorClock.split('_')[0])}</time>
+                        </div>
+                        <p class="request-card__description">
+                            <b>${internName || name}</b> applied for 
+                            <b>${RIBC.getTaskDetails(taskId).title}</b>
+                        </p>
+                        ${!internName ? html`
+                            <div class="request-card__details grid gap-0-5 margin-top-1">
+                                ${brief ? html`
+                                    <div class="grid gap-0-3">
+                                        <h5>Educational background</h5>
+                                        <p class="ws-pre-line wrap-around">${brief}</p>
+                                    </div>
+                                    ` : ''}
+                                ${contact ? html`
+                                    <div class="grid gap-0-3">
+                                        <h5>Contact</h5>
+                                        <sm-copy value=${contact}></sm-copy>
+                                    </div>
+                                    ` : ''}
+                                ${portfolioLink ? html`
+                                    <div class="grid gap-0-3">
+                                        <h5>Portfolio link</h5>
+                                        <a href="${portfolioLink}" target="_blank">${portfolioLink}</a>
+                                    </div>
+                                    ` : ''}
+                        </div>
+                        ` : ''}
+                        <div class="flex gap-0-3 margin-left-auto">
+                            <button class="button button--small reject-request">
+                                <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+                                Reject
+                            </button>
+                            <button class="button button--small button--primary accept-request">
+                                <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>
+                                Accept
+                            </button>
+                        </div>
+                    </li>            
+                `;
+            },
             internTaskCard(taskId) {
               const [projectCode, branch, task] = taskId.split('_');
               const { title, description, duration, durationType } = RIBC.getTaskDetails(taskId);
@@ -83,3 +2563,1728 @@
                 </li>
               `;
             },
+            internProfile(internFloId) {
+                const { joined, completedTasks = {}, active = true } = RIBC.getInternRecord(internFloId) || {}
+                const internName = RIBC.getInternList()[internFloId]
+                const rating = RIBC.getInternRating(internFloId)
+                let completedTasksCount = 0;
+                let totalPoints = 0
+                for (const task in completedTasks) {
+                    completedTasksCount++
+                    totalPoints += completedTasks[task].points
+                }
+                const splitName = internName.split(' ')
+                let initials = splitName[0][0]
+                if (splitName.length > 1) {
+                    initials += splitName[splitName.length - 1][0]
+                }
+                const savedUpdates = new Map()
+                RIBC.getInternUpdates().map(update => {
+                    const { tag, floID, update: { projectCode, branch, task, link, description } } = update
+                    if (tag && floID === internFloId) {
+                        savedUpdates.set(`${projectCode}_${branch}_${task}`, { link, description })
+                    }
+                })
+                // const rewardEarned = Object.keys(completedTasks).reduce((acc, task) => {
+                //     return acc + RIBC.getAllTasks()[task].reward
+                // }, 0)
+                effect(() => {
+                    renderElem(getRef('intern_profile'), html`
+                        <div id="intern_profile__left">
+                            <div class="flex flex-direction-column align-items-center gap-1-5">
+                                ${userType !== 'admin' && !active ? html` <div id="intern_profile__status">Inactive</div> ` : ''}
+                                <div id="intern_profile__initials" class="intern-card__initials" style=${`--color: var(${getInternColor(internFloId)})`}>${initials}</div>
+                                <div class="flex flex-direction-column align-items-center gap-0-5">
+                                    <div class="flex align-center gap-0-5">
+                                        <h3 id="intern_profile__name" class="text-center">${internName}</h3>
+                                        ${userType === "admin" ? html`<button id="edit_intern_name" class="button button--small button--colored" onclick=${toggleInternNameEditing}>Edit</button> ` : ''} 
+                                    </div>
+                                    <sm-copy id="intern_profile__flo_id" value=${internFloId}></sm-copy>
+                                </div>
+                                ${joined ? html`<p>Joined on ${getFormattedTime(joined, 'date-only')}</p>` : ''}
+                            </div>
+                            <div id="stats_wrapper"> 
+                                <div id="intern_rating" class="stat">
+                                    <div class="stat__display">
+                                        <svg class="stat__circle" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="63.5"/> </svg>
+                                        <span class="stat__count">${rating}%</h4>
+                                    </div>
+                                    <p>Rating</p>
+                                </div>
+                                <div id="intern_complete_tasks" class="stat">
+                                    <div class="stat__display">
+                                        <svg class="stat__circle" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="63.5"/> </svg>
+                                        <span class="stat__count">${completedTasksCount}</h4>
+                                    </div>
+                                    <p>Task completed</p>
+                                </div>
+                                <div id="intern_points" class="stat">
+                                    <div class="stat__display">
+                                        <svg class="stat__circle" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="63.5"/> </svg>
+                                        <span class="stat__count">${totalPoints}</h4>
+                                    </div>
+                                    <p>Points earned</p>
+                                </div>
+                            </div>
+                            ${userType === "admin" ? html`
+                                <sm-switch class="w-100" onchange=${toggleInternStatus} ?checked=${active}>
+                                    <div class="grid margin-right-0-5" slot="left">
+                                        <h4>Active</h4>
+                                        <p>Toggle to change intern status</p>
+                                    </div>
+                                </sm-switch>
+                            ` : ''} 
+                            ${fetchPaymentsState.value === 'done' ? html`
+                                <div class="flex align-center space-between gap-1">
+                                    <div class="grid">
+                                        <p style="font-size: 0.8rem">Earned</p>
+                                        <b class="stat__count" style="font-size:1.2rem;">${formatAmount(floGlobals.payments[internFloId]?.total || 0)}</b>
+                                    </div>
+                                    ${floGlobals.payments[internFloId]?.total ? html`
+                                        <a href=${`https://ranchimall.github.io/ribcpayments/#/intern?id=${internFloId}`} target="_blank" class="button button--small button--colored">
+                                            <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"> </path> </svg>
+                                            See payments
+                                        </a>
+                                    `: ``}
+                                </div>
+                            `: html`
+                                <p class="flex align-center gap-0-5">
+                                    <sm-spinner></sm-spinner>
+                                    <span>Loading earnings...</span>
+                                </p>
+                            `}
+                        </div>
+                        <div id="intern_profile__right" class="flex flex-direction-column gap-1-5"> 
+                            <div class="flex align-center space-between gap-1">
+                                <h3>Tasks</h3>
+                                <a href=${`#/updates_page?projectCode=all&internId=${internFloId}`} class="button button--small button--colored">See updates</a>
+                            </div>
+                            <div>
+                                <h4>Assigned</h4>
+                                <div>
+                                    ${render.assignedInternTasks(internFloId) || html`<p>No currently assigned tasks</p>`}
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex align-center space-between text-align-right">
+                                    <h4>Completed</h4>
+                                </div>
+                                <div>
+                                    ${render.completedInternTasks(internFloId, savedUpdates) || html`<p>No tasks completed yet</p>`}
+                                </div>
+                            </div>
+                        </div>
+                    `)
+                })
+                // <div class="grid">
+                //    <p style="font-size: 0.8rem">Earned</p>
+                //    <b class="stat__count" style="font-size:1rem;">${formatAmount(rewardEarned)}</b>
+                // </div>
+                let color = '--green';
+                if (rating < 50) {
+                    color = '--danger-color'
+                } else if (rating < 80) {
+                    color = '--orange'
+                }
+                setTimeout(() => {
+                    getRef('intern_rating').style = `--progress: ${400 - (rating * 4)}; --rating-color:var(${color})`;
+                }, 0)
+            },
+            dashProject(projectCode) {
+                const { projectName } = RIBC.getProjectDetails(projectCode)
+                const projectMap = RIBC.getProjectMap(projectCode)
+                const projectTasks = []
+                RIBC.getProjectBranches(projectCode).forEach(branch => {
+                    projectMap[branch].slice(4).forEach((task) => {
+                        projectTasks.push(RIBC.getTaskStatus(`${projectCode}_${branch}_${task}`))
+                    })
+                })
+                const completedTasks = projectTasks.filter(task => task === 'completed').length
+                const completePercent = parseInt((completedTasks / (projectTasks.length || 1)) * 100)
+                const strokeOffset = 76 - (completePercent * 0.76)
+                const isPinned = pinnedProjects.includes(projectCode);
+                let pinIcon = ''
+                if (isPinned) {
+                    pinIcon = html`<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 6.2V4H7V2H17V4H16V12L18 14V16H17.8L14 12.2V4H10V8.2L8 6.2ZM20 20.7L18.7 22L12.8 16.1V22H11.2V16H6V14L8 12V11.3L2 5.3L3.3 4L20 20.7ZM8.8 14H10.6L9.7 13.1L8.8 14Z"/> </svg>`;
+                } else {
+                    pinIcon = html`<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 12V4H17V2H7V4H8V12L6 14V16H11.2V22H12.8V16H18V14L16 12ZM8.8 14L10 12.8V4H14V12.8L15.2 14H8.8Z"/> </svg>`;
+                }
+                return html`
+                    <div class="pinned-card" data-id=${projectCode}>
+                        <div class="project-icon">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2zM4 7v12h16V7H4z" /> </svg>
+                            <svg class="progress-icon" style=${`--progress: ${strokeOffset}`} viewBox="0 0 24 24" height="24" width="24"> <circle cx="12" cy="12" r="12" fill="none" /> </svg>     
+                        </div>
+                        <a class="grid gap-0-5 flex-1" href=${`#/project_explorer/project?id=${projectCode}&branch=mainLine`}>
+                            <div class="flex align-center">
+                                <h4 class="project__title">${projectName}</h4>
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
+                            </div>
+                            <span class="project__complete-percent">${completePercent}% complete</span>
+                        </a>
+                        <button class="icon-only pin-project" title=${`${isPinned ? 'Unpin' : 'Pin'} this project`} onclick="pinProject(this)" data-pinned=${isPinned}>${pinIcon}</button>
+                    </div>
+                `;
+            },
+            dashProjects() {
+                const unpinnedProjects = RIBC.getProjectList().filter(project => !pinnedProjects.includes(project)).reverse().map(project => render.dashProject(project))
+                const renderedPinned = pinnedProjects.map(project => render.dashProject(project))
+                return html`
+                    <section id="pinned_project_section" class="w-100">
+                        <h4>Pinned</h4>
+                        <div id="pinned_projects" class="observe-empty-state">${renderedPinned}</div>
+                        <div class="empty-state">
+                            <h4>There are no pinned projects</h4>
+                            <p class="margin-block-0-5">
+                                You can pin projects for easier monitoring by clicking on the 'pin' icon on project card.
+                            </p>
+                        </div>
+                    </section>
+                    ${unpinnedProjects.length ? html`
+                        <div id="project_list_container">
+                            <div class="flex align-center space-between margin-bottom-0-5">
+                                <h4>Projects</h4>
+                                <a href="#/project_explorer" class="button button--small open-first-project">All</a>
+                            </div>
+                            <div id="project_list" class="flex flex-direction-column gap-0-3">${unpinnedProjects}</div>
+                        </div>
+                    `: ''}
+                `;
+            },
+            internRequests() {
+                const requestCategories = new Set()
+                const requestProjects = new Set()
+                const shouldFilterByProject = getRef('filter_requests_by_project').value !== 'all' ? getRef('filter_requests_by_project').value : false;
+                const shouldFilterByCategory = getRef('filter_requests_by_category').value !== 'all' ? getRef('filter_requests_by_category').value : false;
+                const requestCards = filterMap(RIBC.getTaskRequests().reverse(), (request) => {
+                    if (Array.isArray(request.details) || !request.details.taskId) return;
+                    const [projectCode, branch, task] = request.details.taskId.split('_')
+                    const taskDetails = RIBC.getTaskDetails(request.details.taskId)
+                    if (!taskDetails) return;
+                    requestCategories.add(RIBC.getTaskDetails(request.details.taskId).category)
+                    requestProjects.add(projectCode)
+                    if (shouldFilterByCategory && taskDetails.category !== shouldFilterByCategory) return;
+                    if (shouldFilterByProject && projectCode !== shouldFilterByProject) return;
+                    return render.taskRequestCard(request)
+                })
+                renderElem(getRef('requests_list'), html`${requestCards}`)
+                if (requestCategories.size) {
+                    const categoryOptions = [...requestCategories].map(cat => html`<sm-option value=${cat}>${floGlobals.taskCategories[cat]}</sm-option>`);
+                    renderElem(getRef('filter_requests_by_category'), html`${[html`<sm-option value='all' selected>All</sm-option>`, ...categoryOptions]}`)
+                }
+                if (requestProjects.size) {
+                    const projectOptions = [...requestProjects].map(project => html`<sm-option value=${project}>${RIBC.getProjectDetails(project).projectName}</sm-option>`);
+                    renderElem(getRef('filter_requests_by_project'), html`${[html`<sm-option value='all' selected>All</sm-option>`, ...projectOptions]}`)
+                }
+                if (requestCategories.size || requestProjects.size) {
+                    getRef('requests_container__filters').classList.remove('hidden')
+                } else {
+                    getRef('requests_container__filters').classList.add('hidden')
+                }
+            },
+            projectList(container, projects, isAdminList = false) {
+                renderElem(container, html`${projects.map(projectCode => render.projectCard(projectCode, isAdminList, container))}`)
+            },
+            requestStatus(request) {
+                if (Array.isArray(request.details) || !request.details.taskId) return
+                const { details: { taskId }, status, vectorClock } = request;
+                const [projectCode, branch, task] = taskId.split('_');
+                if (!RIBC.getTaskDetails(taskId)) return
+                const timestamp = parseInt(vectorClock.split('_')[0])
+                let icon = ''
+                if (status === 'Accepted') {
+                    icon = html`<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>`
+                } else if (status === 'Rejected') {
+                    icon = html`<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>`
+                } else {
+                    icon = html`<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>`
+                }
+                return html`
+                    <li class=${`status-card ${status?.toLowerCase() || 'pending'}`}>
+                        <time class="status-card__time capitalize">${getFormattedTime(timestamp, 'relative')}</time>
+                        <p class="status-card__details">
+                            You applied for <a href=${`${location.hash.split('?')[0]}?taskId=${taskId}`}>${RIBC.getTaskDetails(taskId).title}</a>
+                        </p>
+                        <div class="flex align-center status-card__status">
+                            ${icon}
+                            <span>${status || 'Under review'}</span>
+                        </div>
+                    </li>
+                `;
+            },
+            taskApplications() {
+                const taskRequests = RIBC.getTaskRequests(false)
+                taskRequests.sort((a, b) => {
+                    return parseInt(b.vectorClock.split('_')[0]) - parseInt(a.vectorClock.split('_')[0])
+                })
+                const taskCards = filterMap(taskRequests, request => render.requestStatus(request))
+                renderElem(getRef('task_requests_list'), html`${taskCards}`)
+            },
+            taskDisplayMap() {
+                const displayedTasks = RIBC.getDisplayedTasks()
+                const allTasks = RIBC.getAllTasks()
+                const availableToDisplay = []
+                for (const taskId in allTasks) {
+                    if (displayedTasks.includes(taskId) || RIBC.getTaskStatus(taskId) === 'completed') continue;
+                    availableToDisplay.push(render.draggableTask(taskId))
+                }
+                getRef('all_tasks').innerHTML = '';
+                getRef('all_tasks').append(...availableToDisplay)
+                getRef('display_task_map').innerHTML = '';
+                getRef('display_task_map').append(...displayedTasks.map(taskId => render.draggableTask(taskId)))
+            },
+            draggableTask(taskId) {
+                const [projectCode, branch, task] = taskId.split('_')
+                return html.node`
+                    <li class="flex gap-0-5 displayable-task draggable" data-task-id=${taskId}>
+                        <div class="dragging-handle">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
+                        </div>
+                        <p class="displayable-task__project">${RIBC.getProjectDetails(projectCode).projectName}</p>
+                        <h4>${RIBC.getTaskDetails(taskId).title}</h4>
+                    </li>
+                `;
+            },
+            settings() {
+                return html`
+                    <div class="grid gap-1-5">
+                        <div class="grid gap-0-5">
+                            <h4>
+                                BTC integrated with FLO
+                            </h4>
+                            <p>
+                                You can use your FLO private key to perform transactions on the BTC network within our
+                                app
+                                ecosystem. The private key is the same for both.
+                            </p>
+                        </div>
+                        <div class="grid gap-0-5">
+                            <b>My FLO address</b>
+                            <sm-copy class="user-flo-id" clip-text value=${floGlobals.myFloID}></sm-copy>
+                        </div>
+                        <div class="grid gap-0-5">
+                            <b>My Bitcoin address</b>
+                            <sm-copy class="user-btc-id" clip-text value=${floGlobals.myBtcID}></sm-copy>
+                        </div>
+                        <button class="button button--danger justify-self-start" onclick="signOut()">Sign out</button>
+                    </div>
+                    ${!floGlobals.isPrivKeySecured ? html`
+                        <div class="grid gap-1">
+                            <div class="grid gap-0-5">
+                                <h4>Secure private key</h4>
+                                <p>
+                                    You can set a password to secure your private key and use the password instead of private key. This is applied to this browser only.
+                                </p>
+                            </div>
+                            <button id="secure_pwd_button" class=${`button justify-self-start secure-priv-key`} onclick="openPopup('secure_pwd_popup')">Set password</button>
+                        </div>
+                    `: ''}
+                `;
+            }
+        }
+        const selectedColors = [
+            '--dark-red',
+            '--red',
+            '--kinda-pink',
+            '--purple',
+            '--shady-blue',
+            '--nice-blue',
+            '--maybe-cyan',
+            '--teal',
+            '--mint-green',
+            '--greenish-yellow',
+            '--yellowish-green',
+            '--dark-teal',
+            '--orange',
+            '--tangerine',
+            '--redish-orange',
+        ]
+        function randomColor() {
+            return selectedColors[Math.floor(Math.random() * selectedColors.length)];
+        }
+        const renderedIntensColor = {}
+        function getInternColor(floId) {
+            if (!renderedIntensColor[floId]) {
+                renderedIntensColor[floId] = randomColor()
+            }
+            return renderedIntensColor[floId]
+        }
+        floGlobals.adminChanges = 0;
+        const beforeUnloadListener = (event) => {
+            event.preventDefault();
+            return event.returnValue = "Are you sure you want to exit?";
+        };
+        function adminDataChanged() {
+            floGlobals.adminChanges++;
+            getRef('commit_changes_button').setAttribute('data-badge', floGlobals.adminChanges)
+            if (floGlobals.adminChanges === 1) {
+                addEventListener("beforeunload", beforeUnloadListener, { capture: true });
+                getRef('commit_wrapper').classList.remove('hidden')
+            }
+        }
+        function getTaskDeadline(taskId, internId = floGlobals.myFloID) {
+            const [projectCode, branch, task] = taskId.split('_');
+            const { title, description, duration, durationType } = RIBC.getTaskDetails(taskId)
+            const { assignedTasks } = RIBC.getInternRecord(internId)
+            const assignedOn = assignedTasks[taskId].assignedOn || assignedTasks[taskId]
+            const durationMilliseconds = durationType === 'days' ? duration * 24 * 60 * 60 * 1000 : duration * 60 * 60 * 1000
+            const taskDeadline = assignedOn + durationMilliseconds
+            const elapsedPercentage = Math.round((Date.now() - assignedOn) / durationMilliseconds * 100)
+            const hasDeadlinePassed = Date.now() > taskDeadline
+            return {
+                taskDeadline,
+                elapsedPercentage,
+                hasDeadlinePassed
+            }
+        }
+
+        const filterTasks = debounce((e) => {
+            const searchQuery = getRef('task_search_input')?.value.trim() || '';
+            const category = getRef('task_category_selector')?.value || 'all';
+            window.location.hash = `${location.hash.split('?')[0]}?category=${category}${searchQuery !== '' ? `&search=${searchQuery}` : ''}`;
+        }, 100)
+
+        function showTaskDetails(taskId) {
+            const [projectCode, branch, task] = taskId.split('_')
+            const { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(taskId)
+            const assignedInterns = RIBC.getAssignedInterns(taskId);
+            let hasApplied = false
+            try {
+                floDapps.user.id
+                hasApplied = floGlobals.isSubAdmin || [...RIBC.getTaskRequests(false), ...sessionTaskRequests].find(({ details }) => {
+                    return taskId === details.taskId
+                })
+            } catch (e) { }
+            const descriptionTag = createElement('p', {
+                innerHTML: DOMPurify.sanitize(linkify(description)),
+                className: 'ws-pre-line wrap-around'
+            })
+            descriptionTag.id = 'task_description'
+            renderElem(getRef('task_details_wrapper'), html`
+                <div class="flex" style="position: sticky; top: 0; background-color: rgba(var(--foreground-color),1); padding: 1rem 0 0.5rem 0">
+                    <button class="button icon-only align-self-start" onclick="history.back()" title="Go back">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"></path> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"> </path> </svg>
+                    </button>
+                </div>
+                <div class="grid gap-1">
+                    <h5 class="capitalize">${floGlobals.taskCategories[category]}</h5>
+                    <h2 id="task_title">${title}</h2>
+                    <div class="display-task__details flex flex-wrap gap-0-3">
+                        ${duration ? html`
+                            <div class="display-task__detail">
+                                <span class="display-task__detail__title">Duration: </span>
+                                <span class="display-task__detail__value">${duration} ${durationType}</span>
+                            </div>
+                        `: ''}
+                        ${maxSlots ? html`
+                            <div class="display-task__detail">
+                                <span class="display-task__detail__title">Slots: </span>
+                                <span class="display-task__detail__value">${maxSlots - assignedInterns.length}</span>
+                            </div>
+                        `: ''}
+                        ${reward ? html`
+                            <div class="display-task__detail">
+                                <span class="display-task__detail__title">Reward: </span>
+                                <span class="display-task__detail__value">₹${reward}</span>
+                            </div>
+                        `: ''}    
+                    </div>
+                    ${descriptionTag}
+                </div>
+                ${!hasApplied ? html`
+                    <button class="button button--primary" .dataset=${{ taskId }} onclick="requestForTask(this)">Apply Now</button>
+                    `: ''}
+            `);
+            getRef('task_details').classList.remove('hidden')
+            const animOptions = {
+                duration: floGlobals.prefersReducedMotion ? 0 : 300,
+                easing: 'ease',
+                fill: 'forwards'
+            }
+            getRef('task_details__backdrop').animate([
+                { opacity: 0 },
+                { opacity: 1 }
+            ], animOptions)
+            getRef('task_details_wrapper').animate([
+                { transform: 'translateX(100%)' },
+                { transform: 'translateX(0)' }
+            ], animOptions)
+            if (appState.currentPage === 'landing') {
+                getRef('landing').animate([
+                    { transform: 'translateX(0)' },
+                    { transform: 'translateX(-10%)' }
+                ], animOptions)
+            }
+        }
+        function hideTaskDetails() {
+            if (getRef('task_details').classList.contains('hidden')) return;
+            history.replaceState(null, null, location.hash.split('?')[0]);
+            const animOptions = {
+                duration: floGlobals.prefersReducedMotion ? 0 : 300,
+                easing: 'ease',
+                fill: 'forwards'
+            }
+            getRef('task_details__backdrop').animate([
+                { opacity: 1 },
+                { opacity: 0 }
+            ], animOptions).onfinish = () => {
+                getRef('task_details').classList.add('hidden')
+                renderElem(getRef('task_details_wrapper'), html``)
+            }
+            getRef('task_details_wrapper').animate([
+                { transform: 'translateX(0)' },
+                { transform: 'translateX(100%)' }
+            ], animOptions)
+            if (appState.currentPage === 'landing') {
+                getRef('landing').animate([
+                    { transform: 'translateX(-10%)' },
+                    { transform: 'translateX(0)' },
+                ], animOptions)
+            }
+        }
+
+        let pinnedProjects = [];
+        let userType = 'general';
+        floGlobals.dashboardPages = {
+            'intern_view': 'my_tasks',
+            'dashboard_tasks_wrapper': 'all_tasks',
+            'projects_wrapper': 'projects',
+            'intern_leaderboard_container': 'leaderboard',
+            'active_tasks_wrapper': 'active_tasks',
+            'certificates_view': 'my_certificates',
+        }
+        // find key of the object by value
+        function getKeyByValue(object, value) {
+            return Object.keys(object).find(key => object[key] === value);
+        }
+        function handleDashboardViewChange(e) {
+            location.hash = `#/${appState.currentPage}/${floGlobals.dashboardPages[e.target.value]}`
+        }
+        function changeDashboardView(viewId = 'dashboard_tasks_wrapper') {
+            document.querySelectorAll('.dashboard-view__item').forEach(item => {
+                if (item.id === 'intern_leaderboard_container')
+                    item.classList.add('hide-on-mobile')
+                else
+                    item.classList.add('hidden')
+            })
+            document.querySelector(`#${viewId}`).classList.remove('hide-on-mobile', 'hidden')
+        }
+
+
+        // Adds interns to the database **Only SubAdmins can add interns
+        function addInternToList() {
+            let internName = getRef('intern_name_field').value.trim(),
+                internFloId = getRef('intern_flo_id_field').value.trim();
+            if (RIBC.admin.addIntern(internFloId, internName)) {
+                closePopup();
+                render.adminInterns();
+                notify(`${internName} added as an intern.`, 'success')
+                adminDataChanged();
+            }
+        }
+        function addProjectToList() {
+            let projectName = getRef('project_name_field').value.trim(),
+                projectDescription = getRef('project_description_field').value.trim();
+            if (projectName === '') {
+                return notify('Project name is important!', 'error')
+            }
+            if (projectDescription === '') {
+                return notify('Project description is important!', 'error')
+            }
+            const projectCode = `${new Date().getFullYear()}-project-${RIBC.getProjectList() ? (RIBC.getProjectList().length + 1) : '1'}`;
+            RIBC.admin.createProject(projectCode)
+            RIBC.admin.addProjectDetails(projectCode, { projectName, projectDescription })
+            render.projectList(getRef('admin_page__project_list'), getSortedProjectList(), true)
+            getRef('admin_page__project_list').querySelector(`[href="#/admin_page/project?id=${projectCode}&branch=mainLine"]`)?.click()
+            closePopup();
+            adminDataChanged();
+        }
+
+        function makeEditable(elem) {
+            floGlobals.tempEditableContent = DOMPurify.sanitize(elem.innerHTML.trim())
+            elem.contentEditable = true
+            elem.focus()
+            document.execCommand('selectAll', false, null);
+        }
+
+        getRef('project_details_wrapper').addEventListener('dblclick', e => {
+            if (e.target.closest('[data-editable]') && !e.target.closest('[data-editable]').isContentEditable) {
+                makeEditable(e.target.closest('[data-editable]'))
+            }
+        })
+        getRef('project_details_wrapper').addEventListener('focusout', (e) => {
+            if (e.target.isContentEditable) {
+                e.target.contentEditable = false
+                if (e.target.innerHTML.trim() !== '' && floGlobals.tempEditableContent !== DOMPurify.sanitize(e.target.innerHTML.trim())) {
+                    const newTitle = DOMPurify.sanitize(getRef('editing_panel__title').innerHTML.trim())
+                    const newDescription = DOMPurify.sanitize(getRef('editing_panel__description').innerHTML.trim())
+                    RIBC.admin.addProjectDetails(appState.params.id, { projectName: newTitle, projectDescription: newDescription })
+                    notify('Changes saved locally, commit the changes to make them permanent', 'success')
+                    render.projectList(getRef('admin_page__project_list'), getSortedProjectList(), true)
+                    adminDataChanged();
+                } else {
+                    e.target.innerHTML = floGlobals.tempEditableContent
+                }
+            }
+        })
+
+        function getDaysTaken(start, end = Date.now()) {
+            const timeTaken = new Date(end) - new Date(start);
+            const days = Math.floor(timeTaken / (1000 * 60 * 60 * 24));
+            return days;
+        }
+
+        // opens a popup containing various project information
+        function showProjectInfo(projectCode) {
+            const { projectName, projectDescription } = RIBC.getProjectDetails(projectCode);
+            getRef('project_explorer__project_title').textContent = projectName; // project name
+            getRef('project_explorer__project_description').textContent = projectDescription;
+            getRef('project_explorer__project_updates').href = `#/updates_page?projectCode=${projectCode}&internId=all`;
+            renderBranches();
+        }
+
+        let currentTask = '';
+        function renderAdminProjectView(projectCode) {
+            const allProjects = getRef('admin_page__project_list').querySelectorAll('.project-card');
+            allProjects.forEach(project => project.classList.remove('project-card--active'))
+            const targetProject = Array.from(allProjects).find(project => project.getAttribute('href').includes(projectCode))
+            if (targetProject)
+                targetProject.classList.add('project-card--active')
+            const { projectName, projectDescription } = RIBC.getProjectDetails(projectCode);
+            getRef('editing_panel__title').textContent = projectName;
+            getRef('editing_panel__description').textContent = projectDescription;
+            renderBranches()
+        }
+        function renderBranches() {
+            const { id: projectCode, branch } = appState.params
+            const taskListContainer = appState.currentPage === 'admin_page' ? 'branch_container' : 'explorer_branch_container';
+            const branchList = filterMap(RIBC.getProjectBranches(appState.params.id), (branch) => {
+                return render.branchButton({ projectCode, branch, page: appState.currentPage, active: branch === appState.params.branch })
+            })
+            if (branchList.length > 1) {
+                renderElem(getRef(taskListContainer), html`${branchList}`)
+                getRef(taskListContainer).classList.remove('hidden')
+            } else {
+                getRef(taskListContainer).classList.add('hidden')
+            }
+        }
+        function renderBranchTasks() {
+            const { id: projectCode, branch } = appState.params
+            const taskListContainer = appState.currentPage === 'admin_page' ? 'task_list' : 'explorer_task_list';
+            let branchTasks = RIBC.getProjectMap(appState.params.id)[appState.params.branch];
+            if (branchTasks[1] && !taskListContainer === 'task_list') {
+                getRef(taskListContainer).textContent = "No tasks added yet, Please explore other projects"
+            } else {
+                let tasks = []
+                if (branch !== 'mainLine') {
+                    const { startPoint, parentBranch } = getAllBranches(projectCode).find(({ branchName }) => branchName === branch)
+                    tasks.push(html`<p class="margin-bottom-0-5">
+                Branched off from <a href=${`#/${appState.currentPage}/project?id=${projectCode}&branch=${parentBranch}`}> ${parentBranch} </a>    
+            </p>`)
+                }
+                if (taskListContainer === 'task_list') {
+                    branchTasks.slice(4).forEach((task) => tasks.push(render.adminTask(task)))
+                } else {
+                    branchTasks.slice(4).forEach((task) => tasks.push(render.taskCard(task)))
+                }
+                renderElem(getRef(taskListContainer), html`${tasks}`)
+            }
+        }
+        function getAllBranches(projectCode) {
+            const projectMap = RIBC.getProjectMap(projectCode)
+            const projectBranches = RIBC.getProjectBranches(projectCode)
+            return projectBranches.slice(1).map((branchName, index) => {
+                const [parentBranch, , startPoint, endPoint] = projectMap[branchName]
+                return {
+                    branchName,
+                    parentBranch,
+                    startPoint,
+                    endPoint
+                }
+            })
+        }
+
+        let currentViewIndex = 0;
+        getRef('admin_view_selector').addEventListener('change', (e) => {
+            location.hash = `#/${appState.currentPage}/${e.target.value}`
+            getRef('admin_page_nav_button').href = `#/${appState.currentPage}/${e.target.value}`
+        })
+
+        function toggleEditing(target) {
+            if (target === 'title') {
+                makeEditable(currentTask.querySelector('.task-title'))
+            } else {
+                makeEditable(currentTask.querySelector('.task-description'))
+            }
+        }
+        function formatAmount(amount = 0, currency = 'inr') {
+            if (!amount)
+                return '₹0';
+            return amount.toLocaleString(currency === 'inr' ? `en-IN` : 'en-US', { style: 'currency', currency, maximumFractionDigits: 0 })
+        }
+        function initTaskScoring(e) {
+            currentTask = e.target.closest('.admin-task');
+            renderInternRatingUI()
+            openPopup('rate_participants_popup')
+        }
+        function renderInternRatingUI() {
+            const taskId = `${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`;
+            const assignedInterns = RIBC.getAssignedInterns(taskId);
+            const completionPoints = 30;
+            const taskScoreElems = assignedInterns.map((internId, index) => {
+                const { completedTasks, failedTasks } = RIBC.getInternRecord(internId)
+                if (completedTasks[taskId] || failedTasks[taskId]) {
+                    return html`<div class="flex flex-direction-column gap-0-3" data-intern-id=${internId}>
+                        <h3>${RIBC.getInternList()[internId]}</h3>  
+                        <div class="flex align-center space-between">
+                            <p>${completedTasks[taskId] ? 'Task completed' : 'Failed to complete'}</p>
+                            ${completedTasks[taskId] ? html`
+                                <div class="flex align-center gap-0-3">
+                                    <b>${completedTasks[taskId].points}</b>
+                                    <svg class="icon icon--star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z"></path> </svg>
+                                </div>
+                                ` : ''}
+                        </div>
+                    </div>`
+                } else {
+                    const { duration, durationType } = RIBC.getAllTasks()[taskId];
+                    const deadlineDays = durationType === 'days' ? duration : duration * 30;
+                    const daysTaken = getDaysTaken(RIBC.getInternRecord(internId).assignedTasks[taskId].assignedOn)
+                    let quicknessPoints = 0;
+                    if (daysTaken < deadlineDays * 0.7) {
+                        quicknessPoints = 30
+                    } else if (daysTaken < deadlineDays * 0.8) {
+                        quicknessPoints = 25
+                    } else if (daysTaken < deadlineDays) {
+                        quicknessPoints = 20
+                    }
+                    return html`
+                        <div class="flex flex-direction-column gap-0-5 rating-part" data-intern-id=${internId}>
+                            <h3>${RIBC.getInternList()[internId]}</h3>  
+                            <sm-form class="grid gap-0-5">
+                                <div class="flex gap-0-5">
+                                    <sm-input value=${completionPoints + quicknessPoints} type="number" min="0" max="60" class="flex-1 automated-points" placeholder="Automated" error-text="Points must be between 0-60" ?autofocus=${index === 0} animate required></sm-input>
+                                    <sm-input type="number" min="0" max="40" class="flex-1 subjective-points" placeholder="Subjective" error-text="Points must be between 0-40" animate required></sm-input>
+                                </div>
+                                <div class="flex gap-0-5">
+                                    <input class="flex-1" type="date" value=${formatDate(new Date())} placeholder="Completion date" aria-label="Set date of completion" required>
+                                    <button class="button button--primary rate-intern-button" type="submit">Rate</button>
+                                </div>
+                            </sm-form>
+                        </div>
+                    `;
+                }
+            })
+            renderElem(getRef('rating_wrapper'), html`
+                <h4>${currentTask.querySelector('.task-title').textContent}</h4>
+                <sm-form>
+                    ${taskScoreElems}
+                </sm-form>
+            `)
+        }
+        function markTaskAsIncomplete(e) {
+            currentTask = e.target.closest('.admin-task');
+            getConfirmation('Mark this task as incomplete?', { message: 'Score given to participants regarding this task will also be removed', confirmText: 'Mark as incomplete', danger: true }).then(res => {
+                if (res) {
+                    RIBC.admin.putTaskStatus('incomplete', appState.params.id, appState.params.branch, currentTask.dataset.taskId)
+                    // TODO: remove task scores from intern rating
+                    renderBranchTasks()
+                    adminDataChanged();
+                }
+            })
+        }
+
+        delegate(getRef('rating_wrapper'), 'click', '.rate-intern-button', e => {
+            const ratingPart = e.target.closest('.rating-part');
+            const taskId = `${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`;
+            const internId = ratingPart.dataset.internId;
+            const automatedPoints = parseFloat(ratingPart.querySelector('.automated-points').value.trim()) || 0;
+            const subjectivePoints = parseFloat(ratingPart.querySelector('.subjective-points').value.trim()) || 0;
+            const points = automatedPoints + subjectivePoints;
+            const completionDate = new Date(ratingPart.querySelector('input').value).getTime();
+            RIBC.admin.addCompletedTask(internId, taskId, points, { completionDate })
+            notify('Task score added', 'success')
+            adminDataChanged();
+            renderInternRatingUI()
+        })
+
+        // format unix timestamp to yyyy-mm-dd
+        function formatDate(unixTimestamp) {
+            const date = new Date(unixTimestamp);
+            const year = date.getFullYear();
+            const month = date.getMonth() + 1;
+            const day = date.getDate();
+            return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
+        }
+        function markTaskAsCompleted() {
+          getConfirmation('Mark this task as completed?', { confirmText: 'Mark as completed' }).then(res => {
+            if (!res) return;
+
+            RIBC.admin.putTaskStatus('completed', appState.params.id, appState.params.branch, currentTask.dataset.taskId);
+
+            const taskId = `${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`;
+
+            // safer lookup before calling
+            const getAssigned = RIBC.getAssignedInterns || RIBC.admin?.getAssignedInterns;
+            const assignedInterns = (typeof getAssigned === 'function' ? getAssigned(taskId) : []) || [];
+            const completionDate = Date.now();
+
+            assignedInterns.forEach(internId => {
+              RIBC.admin.addCompletedTask(internId, taskId, 0, { completionDate });
+            });
+
+            const filteredTasks = RIBC.getDisplayedTasks().filter(task => task !== taskId);
+            RIBC.admin.setDisplayedTasks(filteredTasks);
+            renderBranchTasks();
+            adminDataChanged();
+            notify('Task marked as completed', 'success');
+          });
+        }
+
+        function saveTaskChanges() {
+            const changedDetails = {
+                title: getRef('edit_task_title').value.trim(),
+                description: DOMPurify.sanitize(getRef('edit_task_description').innerHTML.trim()),
+                category: getRef('edit_task_category').value,
+                duration: parseInt(getRef('edit_task_duration').value),
+                durationType: getRef('edit_task_duration_type').value,
+                maxSlots: parseInt(getRef('edit_task_max_slots').value),
+                reward: parseInt(getRef('edit_task_reward').value)
+            }
+            const ogTaskDetails = RIBC.getTaskDetails(`${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`)
+            const changedKeys = Object.keys(changedDetails).filter(key => ogTaskDetails[key] !== changedDetails[key])
+            if (changedKeys.length) {
+                RIBC.admin.editTaskDetails(changedDetails, appState.params.id, appState.params.branch, currentTask.dataset.taskId)
+                renderBranchTasks();
+                notify('Changes saved locally, commit the changes to make them permanent', 'success')
+                adminDataChanged();
+            } else {
+                notify('No changes detected')
+            }
+            closePopup();
+        }
+        getRef('task_list').addEventListener('click', (e) => {
+            if (e.target.closest('.admin-task')) {
+                currentTask = e.target.closest('.admin-task');
+            }
+            if (e.target.closest('.unassign-intern-button')) {
+                const internCard = e.target.closest('.assigned-intern')
+                const internId = internCard.dataset.floId
+                const contentMenu = html.node`
+                    <ul class="menu" data-flo-id=${internId}>
+                        <li class="menu__item interactive">
+                            <button onclick=${markAsFailed}>
+                                <svg class="icon margin-right-1" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                                Mark as failed
+                            </button>
+                        </li>
+                        <li class="menu__item interactive">
+                            <button onclick=${unassignIntern}>
+                                <svg class="icon margin-right-1" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14,8c0-2.21-1.79-4-4-4C7.79,4,6,5.79,6,8c0,2.21,1.79,4,4,4C12.21,12,14,10.21,14,8z M12,8c0,1.1-0.9,2-2,2 c-1.1,0-2-0.9-2-2s0.9-2,2-2C11.1,6,12,6.9,12,8z"/><path d="M2,18v2h16v-2c0-2.66-5.33-4-8-4C7.33,14,2,15.34,2,18z M4,18c0.2-0.71,3.3-2,6-2c2.69,0,5.77,1.28,6,2H4z"/><rect height="2" width="6" x="17" y="10"/></g></g></svg>
+                                Unassign
+                            </button>
+                        </li>
+                    </ul>
+                `;
+                internCard.appendChild(contentMenu)
+                contentMenu.animate(slideInDown, {
+                    duration: floGlobals.prefersReducedMotion ? 0 : 200,
+                    easing: 'ease'
+                })
+                    .onfinish = () => {
+                        contentMenu.querySelector('button').focus()
+                        document.addEventListener("click", function (e) {
+                            contentMenu.animate(slideOutUp, {
+                                duration: floGlobals.prefersReducedMotion ? 0 : 100,
+                                easing: 'ease'
+                            }).onfinish = () => {
+                                contentMenu.remove()
+                            }
+                        }, { once: true });
+                    }
+            }
+            else if (e.target.closest('.cancel-task-button')) {
+                const card = e.target.closest('.temp-task')
+                card.remove();
+                getRef('add_task').classList.remove('hidden')
+            }
+            else if (e.target.closest('.add-task-button')) {
+                const card = e.target.closest('.temp-task')
+                const title = card.querySelector('.temp-task__title').value.trim();
+                const description = card.querySelector('.temp-task__description').value.trim();
+                const category = card.querySelector('.temp-task__category').value.trim();
+                const maxSlots = parseInt(card.querySelector('.temp-task__max-slots').value.trim());
+                const duration = parseInt(card.querySelector('.temp-task__duration').value.trim());
+                const durationType = card.querySelector('.temp-task__duration-type').value.trim();
+                const reward = parseInt(card.querySelector('.temp-task__reward').value.trim());
+                if (title === '') {
+                    return notify('Please enter task title', 'error')
+                }
+                if (description === '') {
+                    return notify('Please enter description of the task', 'error')
+                }
+                const taskDetails = {
+                    title,
+                    description,
+                    category,
+                    maxSlots,
+                    duration,
+                    durationType,
+                    reward
+                }
+                const task = RIBC.admin.addTaskInMap(appState.params.id, appState.params.branch)
+                RIBC.admin.editTaskDetails(taskDetails, appState.params.id, appState.params.branch, task)
+                RIBC.admin.putTaskStatus('incomplete', appState.params.id, appState.params.branch, task)
+                RIBC.admin.setDisplayedTasks([`${appState.params.id}_${appState.params.branch}_${task}`, ...RIBC.getDisplayedTasks()])
+                card.remove()
+                renderBranchTasks()
+                getRef('add_task').classList.remove('hidden')
+                notify('Task added to current branch', 'success')
+                adminDataChanged();
+            }
+        })
+        function markAsFailed(e) {
+            getConfirmation('Failed to complete task?', { message: `This will unassign intern and mark this task as failed in their record.`, confirmText: 'Mark as failed', danger: true }).then((result) => {
+                if (result) {
+                    const internId = e.target.closest('.menu').dataset.floId
+                    const taskId = `${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`
+                    const done = RIBC.admin.addFailedTask(internId, taskId)
+                    if (done) {
+                        notify('Task marked as failed', 'success')
+                        renderBranchTasks()
+                        adminDataChanged();
+                    } else {
+                        notify('Failed to mark task as failed', 'error')
+                    }
+                }
+            })
+        }
+        function unassignIntern(e) {
+            getConfirmation('Unassign intern from task?', { message: `This will remove record of intern from task data.`, confirmText: 'Unassign', danger: true }).then((result) => {
+                if (result) {
+                    RIBC.admin.unassignInternFromTask(e.target.closest('.menu').dataset.floId, `${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`)
+                    notify('Intern removed from the task')
+                    renderBranchTasks()
+                    adminDataChanged();
+                }
+            })
+        }
+        function addPlaceholderTask() {
+            const categories = [];
+            let first = true;
+            for (const categoryID in floGlobals.taskCategories) {
+                categories.push(html`<sm-option value=${categoryID} ?selected=${first}>${floGlobals.taskCategories[categoryID]}</sm-option>`)
+                first = false;
+            }
+            const placeholderTask = html.node`
+                <div class="temp-task grid gap-0-5">
+                    <sm-form style="--gap: 0.5rem;">
+                        <sm-input class="temp-task__title" placeholder="Title" animate required></sm-input>
+                        <sm-textarea class="temp-task__description" placeholder="Description" rows="6" required></sm-textarea>
+                        <div class="grid gap-0-5" style="grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
+                            <sm-select class="temp-task__category" label="Category: ">${categories}</sm-select>
+                            <sm-input class="temp-task__max-slots flex-1" placeholder="Max slots available" type="number" animate> </sm-input>
+                            <div class="flex flex-1">
+                                <sm-input class="temp-task__duration flex-1" placeholder="Duration" type="number" style="--border-radius: 0.5rem 0 0 0.5rem; border-right: thin solid rgba(var(--text-color), 0.3);" animate>
+                                    <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <g> <g> <path d="M15,1H9v2h6V1z M11,14h2V8h-2V14z M19.03,7.39l1.42-1.42c-0.43-0.51-0.9-0.99-1.41-1.41l-1.42,1.42 C16.07,4.74,14.12,4,12,4c-4.97,0-9,4.03-9,9s4.02,9,9,9s9-4.03,9-9C21,10.88,20.26,8.93,19.03,7.39z M12,20c-3.87,0-7-3.13-7-7 s3.13-7,7-7s7,3.13,7,7S15.87,20,12,20z" /> </g> </g> </g> </svg>
+                                </sm-input>
+                                <sm-select class="temp-task__duration-type flex-shrink-0" style="--select-border-radius: 0 0.5rem 0.5rem 0;">
+                                    <sm-option value="days" selected>Days</sm-option>
+                                    <sm-option value="months">Months</sm-option>
+                                </sm-select>
+                            </div>
+                            <sm-input class="temp-task__reward flex-1" type="number" placeholder="Reward" animate>
+                                <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24"></rect> </g> <g> <g> <path d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z"> </path> </g> </g> </svg>
+                            </sm-input>
+                        </div>
+                        <div class="flex align-center gap-0-3 margin-top-1">
+                            <button class="button cancel-task-button">
+                                <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" /> </svg>
+                                Cancel
+                            </button>
+                            <button type="submit" class="button button--primary add-task-button">
+                                <svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" /> </svg>
+                                Add
+                            </button>
+                        </div>
+                    </sm-form>
+                </div>
+            `;
+            getRef('task_list').append(placeholderTask)
+            getRef('task_list').querySelector('.temp-task__title').focusIn()
+            getRef('add_task').classList.add('hidden')
+            getRef('task_list').lastElementChild.scrollIntoView({ behavior: "smooth" });
+        }
+        function commitToChanges() {
+            getConfirmation("Do you want to commit to changes?", { confirmText: 'Save' }).then((result) => {
+                if (result) {
+                    RIBC.admin.updateObjects().then(res => {
+                        notify('Changes committed.', 'success')
+                        floGlobals.adminChanges = 0
+                        getRef('commit_changes_button').removeAttribute('data-badge')
+                        removeEventListener("beforeunload", beforeUnloadListener, { capture: true });
+                        getRef('commit_wrapper').classList.add('hidden')
+                    }).catch(err => {
+                        console.error(err)
+                    })
+                }
+            })
+        }
+        function removeThisTask() {
+            getConfirmation("Are you sure to delete this task?", { confirmText: 'Delete', danger: true }).then((result) => {
+                if (result) {
+                    RIBC.admin.deleteTaskInMap(appState.params.id, appState.params.branch, currentTask.dataset.taskId)
+                    const taskId = `${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`;
+                    RIBC.admin.setDisplayedTasks(RIBC.getDisplayedTasks().filter(task => task !== taskId))
+                    renderBranchTasks()
+                    adminDataChanged();
+                }
+            })
+        }
+        floGlobals.selectedInterns = new Set()
+        delegate(getRef('intern_list_container'), 'change', '.intern-card', (e) => {
+            const floId = e.target.closest('.intern-card').dataset.internFloId;
+            if (e.target.checked) {
+                floGlobals.selectedInterns.add(floId)
+            } else {
+                floGlobals.selectedInterns.delete(floId)
+            }
+            getRef('assign_interns_button').disabled = !floGlobals.selectedInterns.size
+        })
+        function assignSelectedInterns() {
+            floGlobals.selectedInterns.forEach(floId => {
+                RIBC.admin.assignInternToTask(floId, appState.params.id, appState.params.branch, currentTask.dataset.taskId)
+                renderBranchTasks()
+            })
+            notify(`Assigned task`, 'success')
+            closePopup()
+            adminDataChanged();
+        }
+
+        function renderAllInterns() {
+            renderElem(getRef('all_interns_list'), filterInterns('', { sortByRating: true }))
+        }
+
+        function openNewBranchPopup() {
+            openPopup('create_branch_popup')
+            const startPoint = parseInt(currentTask.dataset.taskId)
+            getRef('branch_start_point').value = startPoint;
+        }
+        getRef('create_branch_btn').onclick = () => {
+            const startPoint = parseInt(currentTask.dataset.taskId)
+            const userMergePoint = getRef('branch_merge_point').value.trim()
+            const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint)
+            const branchName = RIBC.admin.addBranch(appState.params.id, appState.params.branch, startPoint, mergePoint);
+            notify(`Branch added ${branchName}`, 'success')
+            renderBranches()
+            closePopup()
+            adminDataChanged();
+        }
+        function openTaskEditingPopup(e) {
+            const taskNo = e.target.closest('.admin-task').dataset.taskId
+            const { title, description, category, maxSlots, duration, durationType, reward } = RIBC.getTaskDetails(`${appState.params.id}_${appState.params.branch}_${taskNo}`)
+            if (!getRef('edit_task_category').firstElementChild) {
+                const categories = objMap(floGlobals.taskCategories, (categoryName, categoryID) => {
+                    return html`<sm-option value=${categoryID} ?selected=${category === categoryID}>${categoryName}</sm-option>`
+                })
+                renderElem(getRef('edit_task_category'), html`${categories}`)
+            }
+            getRef('edit_task_title').value = title
+            getRef('edit_task_description').innerHTML = DOMPurify.sanitize(description)
+            getRef('edit_task_category').value = category
+            getRef('edit_task_duration').value = duration
+            getRef('edit_task_duration_type').value = durationType
+            getRef('edit_task_max_slots').value = maxSlots
+            getRef('edit_task_reward').value = reward
+            openPopup('task_editing_popup')
+            getRef('task_edit_form')._checkValidity()
+        }
+
+        function toggleInternNameEditing(e) {
+            const button = e.target.closest('button');
+            if (getRef('intern_profile__name').isContentEditable) {
+                const floId = appState.params.id;
+                const newName = getRef('intern_profile__name').textContent.trim();
+                if (newName !== '' && floGlobals.tempEditableContent !== newName) {
+                    RIBC.admin.renameIntern(floId, newName)
+                    notify('Intern name updated locally, please commit changes to make them permanent.', 'success')
+                }
+                getRef('intern_profile__name').contentEditable = false;
+                button.textContent = 'Edit';
+                document.getSelection().collapseToEnd()
+                floGlobals.tempEditableContent = '';
+                adminDataChanged();
+            } else {
+                makeEditable(getRef('intern_profile__name'))
+                button.textContent = 'Done'
+            }
+        }
+        function toggleInternStatus(e) {
+            const floId = appState.params.id;
+            RIBC.admin.setInternStatus(floId, e.target.value)
+            notify('Intern status updated locally, please commit changes to make them permanent.', 'success')
+            adminDataChanged();
+        }
+
+        function clearRequestFilters() {
+            getRef('filter_requests_by_category').reset()
+            getRef('filter_requests_by_project').reset()
+        }
+
+        function renderProjectSelectorOptions() {
+            const options = [html`<sm-option value="all" selected>All</sm-option>`];
+            RIBC.getProjectList().reverse().forEach(project => {
+                options.push(html`<sm-option value="${project}">${RIBC.getProjectDetails(project).projectName}</sm-option>`);
+            })
+            renderElem(getRef('updates_page__project_selector'), html`${options}`)
+        }
+        function renderInternSelectorOptions() {
+            const options = [html`<sm-option value="all" selected>All</sm-option>`];
+            const allInterns = Object.entries(RIBC.getInternList()).sort((a, b) => a[1].toLowerCase().localeCompare(b[1].toLowerCase()));
+            allInterns.forEach(intern => {
+                options.push(html`<sm-option value="${intern[0]}">${intern[1]}</sm-option>`);
+            })
+            renderElem(getRef('updates_page__intern_selector'), html`${options}`)
+        }
+
+        function getUpdatesByProject(projectCode) {
+            const projectName = RIBC.getProjectDetails(projectCode).projectName
+            const allUpdates = RIBC.getInternUpdates()
+            const filteredUpdates = allUpdates.filter(({ update: { projectCode: updateProjectCode } }) => {
+                return projectCode === updateProjectCode
+            })
+            return filteredUpdates
+        }
+
+        function getUpdatesByIntern(floId, allUpdates = RIBC.getInternUpdates()) {
+            return allUpdates.filter(update => update.floID === floId)
+        }
+        function getUpdatesByDate(date, allUpdates = RIBC.getInternUpdates()) {
+            const filteredUpdates = []
+            const dateStart = new Date(`${date} 00:00:00`).getTime()
+            const dateEnd = new Date(`${date} 23:59:59`).getTime()
+            let isFromDate = false
+            for (const update of allUpdates) {
+                if (update.time > dateStart && update.time < dateEnd) {
+                    filteredUpdates.push(update)
+                    isFromDate = true
+                } else if (isFromDate) break
+            }
+            return filteredUpdates
+        }
+        let updatesLazyLoader
+        function renderInternUpdates(updates = RIBC.getInternUpdates()) {
+            if (updatesLazyLoader) {
+                updatesLazyLoader.update(updates)
+            } else {
+                updatesLazyLoader = new LazyLoader('#all_updates_list', updates, render.internUpdateCard)
+            }
+            updatesLazyLoader.init()
+        }
+        delegate(getRef('all_updates_list'), 'click', '.init-update-replay', (e) => {
+            const vectorClock = e.delegateTarget.closest('.intern-update').dataset.vectorClock;
+            e.delegateTarget.parentNode.after(html.node`
+                <sm-form class="update-replay grid gap-0-5">
+                    <sm-textarea placeholder="Enter your reply here" class="update-reply-textarea" rows="4" required></sm-textarea>
+                    <div class="flex align-center gap-0-3 margin-left-auto">
+                        <button class="update-replay__cancel button button--small" onclick="cancelUpdateReply(this.closest('.update-replay'))">Cancel</button>
+                        <div class="multi-state-button">
+                            <button class="update-replay__submit button button--small button--primary" onclick="submitUpdateReply(this.closest('.update-replay'))" type="submit">Submit</button>
+                        </div>
+                    </div>
+                </sm-form>
+            `)
+            e.delegateTarget.parentNode.classList.add('hidden')
+            e.target.closest('.intern-update').querySelector('.update-reply-textarea').focusIn()
+        })
+        delegate(getRef('all_updates_list'), 'click', '.save-update', (e) => {
+            const vectorClock = e.delegateTarget.closest('.intern-update').dataset.vectorClock;
+            getConfirmation('Are you sure you want to save this update?', { confirmText: 'Save' }).then((res) => {
+                if (res) {
+                    floCloudAPI.tagApplicationData(vectorClock, 'saved').then(() => {
+                        notify('Update saved', 'success')
+                        e.delegateTarget.remove()
+                    }).catch(() => {
+                        notify('Failed to save update', 'error')
+                    })
+                }
+            })
+        })
+
+        function cancelUpdateReply(replayBox) {
+            replayBox.previousElementSibling.classList.remove('hidden')
+            replayBox.remove()
+        }
+        function submitUpdateReply(replayBox) {
+            buttonLoader(replayBox.querySelector('.update-replay__submit'), true)
+            const vectorClock = replayBox.previousElementSibling.closest('.intern-update').dataset.vectorClock;
+            const replyText = replayBox.querySelector('.update-reply-textarea').value.trim()
+            if (replyText !== '') {
+                RIBC.admin.commentInternUpdate(vectorClock, replyText).then(res => {
+                    replayBox.previousElementSibling.remove()
+                    replayBox.replaceWith(html.node`
+                <div class="admin-reply grid">
+                    <h4 class="admin-reply__title">Admin</h4>
+                    <p class="admin-reply__description ws-pre-line wrap-around">${replyText}</p>
+                </div>`)
+                }).catch(err => {
+                    notify(err, 'error')
+                    buttonLoader(replayBox.querySelector('.update-replay__submit'), false)
+                })
+            }
+        }
+        function setUpdateFilters(filters) {
+            const { projectCode, internId, date } = filters || getUpdateFilters()
+            if (filters) {
+                getRef('updates_page__project_selector').value = projectCode
+                getRef('updates_page__intern_selector').value = internId
+                getRef('updates_page__date_selector').value = date || ''
+            } else {
+                const dateParam = date !== '' ? `&date=${date}` : ''
+                location.hash = `/updates_page?projectCode=${projectCode}&internId=${internId}${dateParam}`
+            }
+        }
+        function getUpdateFilters() {
+            const projectCode = getRef('updates_page__project_selector').value || 'all'
+            const internId = getRef('updates_page__intern_selector').value || 'all'
+            const date = getRef('updates_page__date_selector').value || ''
+            return { projectCode, internId, date }
+        }
+
+        function clearUpdatesFilter() {
+            getRef('updates_page__project_selector').reset()
+            getRef('updates_page__intern_selector').reset()
+            getRef('updates_page__date_selector').value = ''
+            setUpdateFilters()
+        }
+
+        getRef('updates_page__project_selector').addEventListener('change', e => setUpdateFilters())
+        getRef('updates_page__intern_selector').addEventListener('change', e => setUpdateFilters())
+        getRef('updates_page__date_selector').addEventListener('change', e => setUpdateFilters())
+        function pinProject(thisBtn) {
+            const projectCode = thisBtn.closest('.pinned-card').dataset.id;
+            pinnedProjects = localStorage.getItem(`${myFloID}_pinned_projects`) ? localStorage.getItem(`${floGlobals.myFloID}_pinned_projects`).split(',') : []
+            if (pinnedProjects.includes(projectCode)) {
+                pinnedProjects = pinnedProjects.filter(project => project !== projectCode)
+            } else {
+                pinnedProjects.push(projectCode)
+            }
+            localStorage.setItem(`${floGlobals.myFloID}_pinned_projects`, pinnedProjects.join())
+            renderElem(getRef('projects_wrapper'), render.dashProjects())
+        }
+
+        let sessionTaskRequests = new Set();
+        function requestForTask(btn) {
+            hideTaskDetails()
+            try {
+                floDapps.user.id
+                const taskId = btn ? btn.dataset.taskId : floGlobals.tempUserTaskRequest
+                floGlobals.tempUserTaskRequest = taskId
+                if (userType === 'general') {
+                    getRef('intern_apply__task').textContent = RIBC.getAllTasks()[taskId].title
+                    openPopup('apply_for_task_popup', true)
+                } else if (userType === 'intern') {
+                    const hasApplied = [...RIBC.getTaskRequests(false), ...sessionTaskRequests].find(({ details }) => {
+                        return taskId === details.taskId
+                    })
+                    if (hasApplied) {
+                        notify('You have already applied for this task', 'error')
+                    } else {
+                        const { assignedTasks, completedTasks, failedTasks } = RIBC.getInternRecord(floGlobals.myFloID)
+                        if (assignedTasks[taskId])
+                            return notify('You have already been assigned this task', 'error');
+                        else if (completedTasks[taskId])
+                            return notify('You have already completed this task', 'error');
+                        else if (failedTasks[taskId])
+                            return notify('You have already failed this task', 'error');
+                        const { title } = RIBC.getTaskDetails(taskId)
+                        getConfirmation(`Do you want to apply for "${title}"`, { confirmText: 'Apply' }).then((result) => {
+                            if (result) {
+                                if (btn) {
+                                    btn.textContent = 'Applying...'
+                                    btn.disabled = true
+                                }
+                                RIBC.applyForTask({ taskId }).then((result) => {
+                                    notify('Applied successfully.', 'success')
+                                    sessionTaskRequests.add({ details: { taskId } })
+                                    floGlobals.tempUserTaskRequest = null
+                                    btn.textContent = 'Applied'
+                                }).catch((err) => {
+                                    if (btn) {
+                                        btn.textContent = 'Apply'
+                                        btn.disabled = false
+                                    }
+                                    notify(err, 'error')
+                                })
+                            }
+                        }).catch((error) => {
+                            notify(error, 'error')
+                        })
+                    }
+                }
+            } catch (err) {
+                floGlobals.tempUserTaskRequest = btn.dataset.taskId;
+                location.hash = '#/sign_in'
+                floGlobals.signInNotification = notify('Please login to apply for task.')
+            }
+        }
+
+        function toggleUpdatesFilter() {
+            getRef('update_filters_wrapper').classList.toggle('hide-on-mobile')
+        }
+
+        document.addEventListener('popupopened', e => {
+            getRef('main_page').setAttribute('inert', '')
+            switch (e.target.id) {
+                case 'intern_list_popup':
+                    renderElem(getRef('intern_list_container'), filterInterns('', { availableInternsOnly: true, activeOnly: true }))
+                    break;
+                case 'issue_certificate_popup':
+                    async function issueCertificate() {
+                        const floId = getRef('issue_certificate__intern_selector').value;
+                        const name = RIBC.getInternList()[floId];
+                        const certificateType = getRef('issue_certificate__certificate_selector').value;
+                        const description = getRef('issue_certificate__description').value.trim();
+                        const privateKey = getRef('issue_certificate__private_key').value.trim();
+                        const isCorrectPrivateKey = floCrypto.verifyPrivKey(privateKey, floGlobals.certificateIssuerAddress)
+                        if (!isCorrectPrivateKey) {
+                            notify('Invalid private key', 'error')
+                            return;
+                        }
+                        const receiver = certificateType === 'CERTIFICATE OF EMPLOYMENT' ? floGlobals.rmIncorporationId : floGlobals.ribcId;
+                        const consent = await getConfirmation(`Issue certificate to ${name}?`, { confirmText: 'Issue' })
+                        if (!consent) return;
+                        buttonLoader(getRef('issue_button'), true)
+                        floBlockchainAPI.writeData(floGlobals.certificateIssuerAddress, `${certificateType}|${floId}|${name}|${description}`, privateKey, receiver).then((txid) => {
+                            console.log(txid)
+                            renderElem(getRef('issue_certificate_popup__content'), html`
+                                <div class="grid text-center gap-1-5 justify-items-center margin-auto">
+                                    <div class="grid text-center gap-0-5">
+                                        <h2>Certificate issued</h2>
+                                        <p>
+                                            Will be listed after confirmation on the blockchain.    
+                                        </p>
+                                    </div>
+                                    <a href=${`https://blockbook.ranchimall.net/tx/${txid}`} target="_blank" class="button button--primary">View on explorer</a>
+                                </div>
+                            `)
+                        }).catch((error) => {
+                            notify(error, 'error')
+                        }).finally(() => {
+                            buttonLoader(getRef('issue_button'), false)
+                        })
+                    }
+                    renderElem(getRef('issue_certificate_popup__content'), html`
+                        <sm-form class="grid gap-0-5">
+                            <div class="grid">
+                                <p>Issue to</p>
+                                <sm-select id="issue_certificate__intern_selector" required>
+                                    ${Object.entries(RIBC.getInternList()).sort((a, b) => a[1].localeCompare(b[1])).map(([floId, name]) => html`<sm-option value=${floId}>${name}</sm-option>`)}
+                                </sm-select>
+                            </div>
+                            <div class="grid">
+                                <p>Certificate type</p>
+                                <sm-select id="issue_certificate__certificate_selector" required>
+                                    <sm-option value="CERTIFICATE OF INTERNSHIP">Certificate of Internship</sm-option>
+                                    <sm-option value="CERTIFICATE OF EMPLOYMENT">Certificate of Employment</sm-option>
+                                    <sm-option value="CERTIFICATE OF VOLUNTEERSHIP">Certificate of Volunteership</sm-option>
+                                    <sm-option value="CERTIFICATE OF PARTICIPATION">Certificate of Participation</sm-option>
+                                </sm-select>
+                            </div>
+                            <div class="grid">
+                                <p>Description</p>
+                                <sm-textarea id="issue_certificate__description" rows="6" required></sm-textarea>
+                            </div>
+                            <div class="grid">
+                                <p>Private key of ${floGlobals.certificateIssuerAddress}</p>
+                                <sm-input id="issue_certificate__private_key" type="password" required></sm-input>
+                            </div>
+                            <div class="multi-state-button">
+                                <button id="issue_button" class="button button--primary" type="submit" onclick=${issueCertificate} disabled>Issue</button>
+                            </div>
+                        </sm-form>
+                    `)
+                    break;
+                case 'profile_popup':
+                    renderElem(getRef('profile_popup__content'), render.settings())
+                    break;
+            }
+        })
+        document.addEventListener('popupclosed', e => {
+            switch (e.target.id) {
+                case 'intern_list_popup':
+                    renderElem(getRef('intern_list_container'), html``)
+                    getRef('intern_search_field').value = '';
+                    floGlobals.selectedInterns.clear()
+                    getRef('assign_interns_button').disabled = true;
+                    break;
+                case 'rate_participants_popup':
+                    renderElem(getRef('rating_wrapper'), html``)
+                    break;
+            }
+            if (popupStack.items.length === 0) {
+                getRef('main_page').removeAttribute('inert')
+            }
+            zIndex--;
+        })
+
+        function renderAllElements() {
+
+            let sortedProjectList = getSortedProjectList()
+            document.querySelectorAll('.open-first-project').forEach(link => {
+                const adminPage = link.id === 'admin_page_nav_button'
+                link.href = adminPage ? `${link.href}/projects?id=${sortedProjectList[0]}&branch=mainLine` : `${link.href}/project?id=${sortedProjectList[0]}&branch=mainLine`
+            })
+
+            pinnedProjects = localStorage.getItem(`${floGlobals.myFloID}_pinned_projects`) ? localStorage.getItem(`${floGlobals.myFloID}_pinned_projects`).split(',') : []
+
+            // Intern's view
+
+            if (RIBC.getInternList()[floGlobals.myFloID] && !floGlobals.subAdmins.includes(floGlobals.myFloID)) {
+                userType = 'intern';
+                document.querySelectorAll('.intern-option').forEach((option) => {
+                    option.classList.remove('hidden')
+                })
+            } else {
+                document.querySelectorAll('.intern-option').forEach((option) => {
+                    option.classList.add('hidden')
+                })
+            }
+
+            // admin view
+            if (floGlobals.subAdmins.includes(floGlobals.myFloID)) {
+                userType = 'admin'
+                document.querySelectorAll('.admin-option').forEach((option) => {
+                    option.classList.remove('hidden')
+                })
+            } else {
+                document.querySelectorAll('.admin-option').forEach((option) => {
+                    option.classList.add('hidden')
+                })
+            }
+
+            // General only view for non admin and non intern
+            if (!RIBC.getInternList()[floGlobals.myFloID] && !floGlobals.subAdmins.includes(floGlobals.myFloID)) {
+                document.querySelectorAll('.general-only').forEach((elem) => {
+                    elem.classList.remove('hidden')
+                })
+            }
+            else {
+                document.querySelectorAll('.general-only').forEach((elem) => {
+                    elem.classList.add('hidden')
+                })
+            }
+            if (userType === "admin") {
+                document.querySelectorAll('.not-for-admin').forEach((elem) => {
+                    elem.classList.add('hidden')
+                })
+            } else {
+                document.querySelectorAll('.not-for-admin').forEach((elem) => {
+                    elem.classList.remove('hidden')
+                })
+            }
+
+            render.projectList(getRef('all_projects'), sortedProjectList)
+            delegate(getRef('explorer_task_list'), 'click', '.apply-button', e => {
+                requestForTask(e.delegateTarget)
+            })
+        }
+
+        let currentTaskId;
+        function initTaskUpdate(e) {
+            const taskCard = e.target.closest('.task-card')
+            currentTaskId = taskCard.dataset.uniqueId
+            const [projectCode, branch, task] = currentTaskId.split('_')
+            getRef('update_of_project').textContent = RIBC.getProjectDetails(projectCode).projectName
+            getRef('update_of_task').textContent = RIBC.getTaskDetails(currentTaskId).title
+            openPopup('post_update_popup')
+        }
+
+        function postUpdate() {
+            const [projectCode, branch, task] = currentTaskId.split('_')
+            const description = getRef('update__brief').value.trim()
+            if (description !== '') {
+                buttonLoader(getRef('post_update_btn'), true)
+                RIBC.postInternUpdate({ projectCode, branch, task, description })
+                    .then((result) => {
+                        notify('Update posted', 'success')
+                        closePopup()
+                    }).catch((error) => {
+                        notify(error, 'error')
+                    }).finally(() => {
+                        buttonLoader(getRef('post_update_btn'), false)
+                    })
+            } else {
+                notify('Please enter description', 'error')
+            }
+        }
+        function filterInterns(searchKey, options = {}) {
+            const {
+                sortByRating = false,
+                availableInternsOnly = false,
+                activeOnly = false,
+                limit = undefined,
+                sortAlphabetically = false
+            } = options
+            let filtered = [];
+            let arrayOfInterns = [];
+            const allInterns = RIBC.getInternList();
+            if (sortByRating)
+                arrayOfInterns = Object.keys(allInterns).sort((a, b) => {
+                    return RIBC.getInternRating(b) - RIBC.getInternRating(a)
+                })
+            else if (sortAlphabetically)
+                arrayOfInterns = Object.keys(allInterns).sort((a, b) => {
+                    return allInterns[a].toLowerCase().localeCompare(allInterns[b].toLowerCase())
+                })
+            else
+                arrayOfInterns = Object.keys(allInterns)
+            if (availableInternsOnly) {
+                arrayOfInterns = arrayOfInterns.filter(intern => !RIBC.getAssignedInterns(`${appState.params.id}_${appState.params.branch}_${currentTask.dataset.taskId}`)?.includes(intern))
+            }
+            if (activeOnly) {
+                arrayOfInterns = arrayOfInterns.filter(intern => {
+                    return RIBC.getInternRecord(intern).active
+                })
+            }
+            if (limit) {
+                arrayOfInterns = arrayOfInterns.slice(0, limit)
+            }
+            if (searchKey === '') {
+                filtered = arrayOfInterns.map(floId => {
+                    return render.internCard(floId, { selectable: availableInternsOnly })
+                })
+            } else {
+                filtered = filterMap(arrayOfInterns, (floId) => {
+                    if (allInterns[floId].toLowerCase().includes(searchKey.toLowerCase())) {
+                        return render.internCard(floId, { selectable: availableInternsOnly })
+                    }
+                })
+            }
+            return html`${filtered}`
+        }
+        const searchInternPopup = debounce((e) => {
+            renderElem(getRef('intern_list_container'), filterInterns(e.target.value.trim(), { availableInternsOnly: true, activeOnly: true }))
+        }, 150)
+        const searchInternPage = debounce((e) => {
+            renderElem(getRef('all_interns_list'), filterInterns(e.target.value.trim(), { sortByRating: true }))
+        }, 150)
+        getRef('intern_search_field').addEventListener('input', searchInternPopup)
+        getRef('interns_page__search').addEventListener('input', searchInternPage)
+
+
+        function applyForInternship() {
+            buttonLoader(getRef('intern_apply__button'), true)
+            const name = getRef('intern_apply__name').value.trim();
+            const contact = getRef('intern_apply__contact').value.trim();
+            const brief = getRef('intern_apply__brief').value.trim();
+            const portfolioLink = getRef('intern_apply__portfolio_link').value.trim();
+            const details = {
+                name,
+                brief,
+                contact,
+                portfolioLink: portfolioLink !== '' ? portfolioLink : null,
+                taskId: floGlobals.tempUserTaskRequest
+            }
+            RIBC.applyForTask(details)
+                .then((result) => {
+                    notify('Application submitted', 'success')
+                    closePopup()
+                })
+                .catch((error) => {
+                    notify(error, 'error')
+                }).finally(() => {
+                    buttonLoader(getRef('intern_apply__button'), false)
+                    floGlobals.tempUserTaskRequest = null
+                })
+        }
+
+        function getSortedProjectList() {
+            return RIBC.getProjectList().sort((a, b) => RIBC.getProjectDetails(a).projectName.toLowerCase().localeCompare(RIBC.getProjectDetails(b).projectName.toLowerCase()))
+        }
+
+
+        function getSignedIn(passwordType) {
+            return new Promise((resolve, reject) => {
+                try {
+                    getPromptInput('Enter password', '', {
+                        isPassword: true,
+                    }).then(password => {
+                        if (password) {
+                            resolve(password)
+                        }
+                    })
+                } catch (err) {
+                    if (passwordType === 'PIN/Password') {
+                        floGlobals.isPrivKeySecured = true;
+                        getRef('private_key_field').removeAttribute('data-private-key');
+                        getRef('private_key_field').setAttribute('placeholder', 'Password');
+                        getRef('private_key_field').customValidation = null
+                    } else {
+                        floGlobals.isPrivKeySecured = false;
+                        getRef('private_key_field').dataset.privateKey = ''
+                        getRef('private_key_field').setAttribute('placeholder', 'FLO private key');
+                        getRef('private_key_field').customValidation = floCrypto.getPubKeyHex;
+                    }
+                    if (!generalPages.find(page => window.location.hash.includes(page))) {
+                        location.hash = floGlobals.isPrivKeySecured ? '#/sign_in' : `#/landing`;
+                    }
+                    getRef('sign_in_button').onclick = () => {
+                        resolve(getRef('private_key_field').value.trim());
+                        getRef('private_key_field').value = '';
+                        routeTo('loading');
+                        getRef("notification_drawer").remove(floGlobals.signInNotification)
+                    };
+                    getRef('sign_up_button').onclick = () => {
+                        resolve(getRef('keys_generator').keys.privKey);
+                        getRef('keys_generator').clearKeys();
+                        routeTo('loading');
+                        getRef("notification_drawer").remove(floGlobals.signInNotification)
+                    };
+                }
+            });
+        }
+        function setSecurePassword() {
+            if (!floGlobals.isPrivKeySecured) {
+                const password = getRef('secure_pwd_input').value.trim();
+                floDapps.securePrivKey(password).then(() => {
+                    floGlobals.isPrivKeySecured = true;
+                    notify('Password set successfully', 'success');
+                    closePopup();
+                }).catch(err => {
+                    notify(err, 'error');
+                })
+            }
+        }
+        function signOut() {
+            getConfirmation('Sign out?', { message: 'You are about to sign out of the app, continue?', confirmText: 'Leave', cancelText: 'Stay' })
+                .then(async (res) => {
+                    if (res) {
+                        await floDapps.clearCredentials();
+                        location.reload();
+                    }
+                });
+        }
+        // detect url within text and convert to link
+        function linkify(inputText) {
+            if (!inputText)
+                return ''
+            let replacedText, replacePattern1, replacePattern2, replacePattern3;
+            //URLs starting with http://, https://, or ftp://
+            replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+            replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
+            //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+            replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+            replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
+            //Change email addresses to mailto:: links.
+            replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
+            replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
+            return replacedText;
+        }
+        // return string between two strings
+        function getBetween(str, start, end) {
+            return str.substring(str.indexOf(start) + start.length, str.indexOf(end));
+        }
+        // get first three words of a string
+        function getFirstThreeWords(str) {
+            return str.split(' ').slice(0, 3).join(' ')
+        }
+        // get all words after given word including the word
+        function removeWordsBefore(str, word) {
+            return str.substring(str.indexOf(word));
+        }
+        floGlobals.validCerts = new Map();
+        let fetchCertificateIssueTxsState = signal('idle');
+        function fetchCertificateIssueTxs() {
+            return new Promise((resolve, reject) => {
+                fetchCertificateIssueTxsState.value = 'fetching'
+                floBlockchainAPI.readData(floGlobals.certificateIssuerAddress, {
+                    sentOnly: true,
+                    tx: true,
+                    receivers: [floGlobals.rmIncorporationId, floGlobals.ribcId],
+                    filter: d => d?.startsWith('CERTIFICATE OF')
+                }).then(res => {
+                    for (const tx of res.items) {
+                        const { time, txid, blockheight } = tx;
+                        const floData = tx.data;
+                        let name, floId, certType, certPara = ''
+                        // check if certificates are of newer format
+                        if (blockheight > 5787555) {
+                            [certType, floId, name, certPara] = floData.split('|')
+                        } else {
+                            floId = floData.match(/\b\w{30,36}\b/)?.[0].trim()
+                            name = getBetween(floData, 'certifies that', 'FLO ID').replace(/(,|\s)+$/, '')
+                            certType = getFirstThreeWords(floData).trim()
+                        }
+                        if (!floId) continue;
+                        let certificateVerification = ''
+                        switch (certType) {
+                            case "CERTIFICATE OF INTERNSHIP":
+                                certificateVerification = 'internCertificate';
+                                break;
+                            case "CERTIFICATE OF EMPLOYMENT":
+                                certificateVerification = 'employeeCertificate';
+                                break;
+                            case "CERTIFICATE OF VOLUNTEERSHIP":
+                                certificateVerification = 'volunteerCertificate';
+                                break;
+                            case "CERTIFICATE OF PARTICIPATION":
+                                certificateVerification = 'participationCertificate';
+                                break;
+                        }
+                        const verificationLink = `https://www.ranchimall.net/verify/?${certificateVerification}=${txid}`
+                        const btcId = btcOperator.convert.legacy2bech(floId)
+                        floGlobals.validCerts.set(floId, { txid, name, floId, btcId, certType, certPara, verificationLink })
+                    }
+                    resolve()
+                    fetchCertificateIssueTxsState.value = 'done'
+                }).catch(err => {
+                    notify(err, 'error')
+                    reject(err)
+                    fetchCertificateIssueTxsState.value = 'idle'
+                })
+            })
+        }
+        floGlobals.payments = {};
+        let fetchPaymentsState = signal('idle');
+        function fetchPayments() {
+            fetchPaymentsState.value = 'fetching'
+            floBlockchainAPI
+                .readAllTxs("FThgnJLcuStugLc24FJQggmp2WgaZjrBSn")
+                .then(({ items }) => {
+                    items.forEach((tx) => {
+                        // Errorfix 1 - Ensure tx.vout exists and has the expected structure
+                        if (!tx.vout || !tx.vout[0] || !tx.vout[0].scriptPubKey || !tx.vout[0].scriptPubKey.addresses) return;
+
+                        const floId = tx.vout[0].scriptPubKey.addresses[0];
+
+                        //Errorfix 2 - Making sure FLO ID is in the intern list
+                        const internList = RIBC.getInternList();
+                        // Ensure internList is defined and floId exists in it
+                        if (!internList || !(floId in internList)) return; // check if floId is of an intern
+
+                        if (!RIBC.getInternList()[floId]) return; // check if floId is of an intern
+                        const { txid, floData, time } = tx
+                        if (!floGlobals.payments[floId])
+                            floGlobals.payments[floId] = {
+                                total: 0,
+                                txs: []
+                            };
+                        const amount = parseFloat(floData.match(/([0-9]+)/)[1]) || 0; // get amount from floData
+                        floGlobals.payments[floId].total += amount;
+                        floGlobals.payments[floId].txs.push({
+                            txid,
+                            amount,
+                            time
+                        });
+                    });
+                    fetchPaymentsState.value = 'done'
+                }).catch((err) => {
+                    notify(err, 'error')
+                    fetchPaymentsState.value = 'idle'
+                });
+        }
+    </script>
+</body>
+
+</htm>
