---
import MainLayout from '../layouts/MainLayout.astro';
---

<MainLayout title="Signature">

  <main>
    <section class="section full-height">
      <div style="display: flex; gap: 20px; margin-bottom: 20px;">
    <div>
        <label for="nameInput">Nom:</label>
        <input id="nameInput" name="nameInput"/>
    </div>
    <div>
        <label for="roleInput">Rôle: </label>
        <input id="roleInput" name="roleInput"/>
    </div>
    <button id="copyBtn" type="button">Copier</button>
</div>

<table id="signature" style="color: rgb(36, 36, 36) !important; text-align: left; background-color: white !important; border-spacing: 0px; border-collapse: collapse; box-sizing: border-box;" cellpadding="0" cellspacing="0">
    <tbody><tr>
        <td style="text-align:left;width:180.65pt;height:140.4pt;padding:0.75pt 7.5pt 0.75pt 0.75pt;border-right:1.5pt solid darkgray;box-sizing:border-box;word-break:break-word;">
            <p style="font-size:12pt;font-family:Aptos,sans-serif;text-align:center;margin:0;"><span style="color: black !important;"><img style="width: 195.49pt; height: 59.99pt; margin: 0px; min-width: auto; min-height: auto; cursor: pointer;" size="72111" data-outlook-trace="F:1|T:1" id="x_x__x0000_i1035" src="data:image/png;base64,[encoded data, 95824 characters]" data-custom="AAkALgAAAAAAHYQDEapmEc2byACqAC%2FEWg0AhTYsk738U0qwlp%2Bytkf%2F3gADW47F7AAAARIAEABNBBjX3JykQ5RHRga2ZElu" data-imagetype="AttachmentByCid" tabindex="0" crossorigin="use-credentials" fetchpriority="high" class="Do8Zj"></span></p></td>
        <td style="text-align:left;width:165.25pt;height:140.4pt;padding:0.75pt 0.75pt 0.75pt 7.5pt;box-sizing:border-box;word-break:break-word;"><table style="text-align:left;border-spacing:0;border-collapse:collapse;box-sizing:border-box;" id="x_x_x_x_x_tableSelected0" cellpadding="0" cellspacing="0">
            <tbody><tr>
                <td style="text-align:left;width:183.15pt;height:16.5pt;padding:0.75pt;box-sizing:border-box;">
                    <p style="font-size:12pt;font-family:Aptos,sans-serif;text-align:left;margin:0;"><span style="color: black !important;"><b id="nameDisplay">John Doe</b></span></p></td></tr>
            <tr>
                <td style="text-align:left;width:183.15pt;height:33.3pt;padding:0.75pt 0.75pt 3.75pt 0.75pt;word-break:break-word;">
                    <p style="font-size:12pt;font-family:Aptos,sans-serif;text-align:left;margin:0;"><span style="color: black !important;"><b id="roleDisplay">VP Partenariat | VP Sponsors</b></span></p></td></tr>
            <tr>
                <td style="text-align:left;width:183.15pt;height:27.9pt;padding:0.75pt;word-break:break-word;">
                    <p style="font-size:12pt;font-family:Aptos,sans-serif;text-align:left;margin:0;"><span style="color: black !important;">Courriel: <u><a style="color: black !important; margin: 0px;" data-linkindex="0" title="URL d'origine&nbsp;: https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=4a9e6b6388&amp;e=b254b13612. Cliquez ou appuyez si vous faites confiance à ce lien." originalsrc="https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=4a9e6b6388&amp;e=b254b13612" id="OWAb9453876-3df9-b528-a091-131ee13a0ad2" data-auth="NotApplicable" rel="noopener noreferrer" target="_blank" href="https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclubconjure.us16.list-manage.com%2Ftrack%2Fclick%3Fu%3Db5f123b38529eb979b3d3af62%26id%3D4a9e6b6388%26e%3Db254b13612&amp;data=05%7C02%7Ctristan.brault-ouellette.1%40ens.etsmtl.ca%7C55e3b98aa8364d42dabd08ddeb21e8a2%7C70aae3b79f3b484d8f9549e8fbb783c0%7C0%7C0%7C638925253123637180%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&amp;sdata=%2FUqxi1NcvzgreGUdAkxN4F%2BQbd6iWSofP4K4WLM7fsc%3D&amp;reserved=0">conjure@etsmtl.ca</a></u></span></p>
                    <p style="font-size:12pt;font-family:Aptos,sans-serif;text-align:left;margin:0;"><span style="color: black !important;">Site: &nbsp;<u>conjure.etsmtl.ca</u></span></p></td></tr>
            <tr>
                <td style="text-align:left;width:173.55pt;height:35.4pt;padding:3.75pt 0.75pt 0.75pt 0.75pt;word-break:break-word;"><table style="text-align:left;border-spacing:0;border-collapse:collapse;box-sizing:border-box;" data-editing-info="{&quot;topBorderColor&quot;:&quot;#ABABAB&quot;,&quot;bottomBorderColor&quot;:&quot;#ABABAB&quot;,&quot;verticalBorderColor&quot;:&quot;#ABABAB&quot;,&quot;hasHeaderRow&quot;:false,&quot;hasFirstColumn&quot;:false,&quot;hasBandedRows&quot;:false,&quot;hasBandedColumns&quot;:false,&quot;bgColorEven&quot;:null,&quot;bgColorOdd&quot;:&quot;#ABABAB20&quot;,&quot;headerRowColor&quot;:&quot;#ABABAB&quot;,&quot;tableBorderFormat&quot;:0,&quot;verticalAlign&quot;:null}" id="x_x_table_0_0" cellpadding="0" cellspacing="0">
                    <tbody><tr>
                        <td style="text-align:left;width:40.97px;height:33.97px;padding:0.75pt 1.75pt 0.75pt 0.75pt;box-sizing:border-box;" data-editing-info="{&quot;borderOverride&quot;:true}">
                            <p style="text-align:left;margin:0;"><span style="color: rgb(66, 66, 66) !important; font-size: 11pt; font-family: Calibri, sans-serif, serif, EmojiFont; background-color: rgb(248, 248, 248) !important;"><a style="margin:0;" data-linkindex="1" title="URL d'origine&nbsp;: https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=e76ccce1c1&amp;e=b3f27a32d0. Cliquez ou appuyez si vous faites confiance à ce lien." originalsrc="https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=e76ccce1c1&amp;e=b3f27a32d0" id="OWA4e57ec5e-fc8e-eb4e-9c3d-41f8505c79ab" data-auth="NotApplicable" rel="noopener noreferrer" target="_blank" href="https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclubconjure.us16.list-manage.com%2Ftrack%2Fclick%3Fu%3Db5f123b38529eb979b3d3af62%26id%3De76ccce1c1%26e%3Db3f27a32d0&amp;data=05%7C02%7Ctristan.brault-ouellette.1%40ens.etsmtl.ca%7C55e3b98aa8364d42dabd08ddeb21e8a2%7C70aae3b79f3b484d8f9549e8fbb783c0%7C0%7C0%7C638925253123692871%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&amp;sdata=IlriTI6CPfdU236NDwc7qL6MHCR89Bt8Nrb1%2FCznY84%3D&amp;reserved=0"><img style="width:44px;height:38px;max-width:100%;margin:0;" data-olk-copy-source="MessageBody" id="x_x_m_4778537154002910635image_1" src="https://mcusercontent.com/b5f123b38529eb979b3d3af62/images/214f6495-2c86-efe8-389e-1cc38029f11b.png" data-imagetype="External"></a></span></p></td>
                        <td style="text-align:left;width:33.97px;height:33.97px;padding:0.75pt 3.75pt 0.75pt 0.75pt;box-sizing:border-box;" data-editing-info="{&quot;borderOverride&quot;:true}">
                            <p style="text-align:left;margin:0;"><span style="color: rgb(0, 102, 204) !important; font-size: 11pt; font-family: Calibri, sans-serif, serif, EmojiFont; background-color: rgb(248, 248, 248) !important;"><a style="color: rgb(0, 102, 204) !important; margin: 0px;" data-linkindex="2" title="URL d'origine&nbsp;: https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=62642e9b57&amp;e=b3f27a32d0. Cliquez ou appuyez si vous faites confiance à ce lien." originalsrc="https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=62642e9b57&amp;e=b3f27a32d0" id="OWA593a2580-69ee-088f-f3ab-0f92be83e6f1" data-auth="NotApplicable" rel="noopener noreferrer" target="_blank" href="https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclubconjure.us16.list-manage.com%2Ftrack%2Fclick%3Fu%3Db5f123b38529eb979b3d3af62%26id%3D62642e9b57%26e%3Db3f27a32d0&amp;data=05%7C02%7Ctristan.brault-ouellette.1%40ens.etsmtl.ca%7C55e3b98aa8364d42dabd08ddeb21e8a2%7C70aae3b79f3b484d8f9549e8fbb783c0%7C0%7C0%7C638925253123727834%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&amp;sdata=Dn6KA37qTWRHHjaKv6MEDI8fbl59N1k2bC0cwwfFhUc%3D&amp;reserved=0"><img style="width:28px;height:28px;max-width:100%;margin:0;" id="x_x_m_4778537154002910635image_2" src="https://a8b03ffbc00ed4da54a1-0c6684360696717b63d89dbc0edb802c.ssl.cf1.rackcdn.com/icon-instagram_28x28.png" data-imagetype="External"></a></span></p></td>
                        <td style="text-align:left;width:30.66px;height:25.5pt;padding:0.75pt;word-break:break-word;box-sizing:border-box;" data-editing-info="{&quot;borderOverride&quot;:true}">
                            <p style="font-size:12pt;font-family:Aptos,sans-serif;text-align:left;margin:0;"><span style="color: rgb(0, 102, 204) !important;"><a style="color: rgb(0, 102, 204) !important; margin: 0px;" data-linkindex="3" title="URL d'origine&nbsp;: https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=1910e9dc6d&amp;e=b254b13612. Cliquez ou appuyez si vous faites confiance à ce lien." originalsrc="https://clubconjure.us16.list-manage.com/track/click?u=b5f123b38529eb979b3d3af62&amp;id=1910e9dc6d&amp;e=b254b13612" id="OWA3b33e79b-cd40-6bd7-5fa1-e621a82ff809" data-auth="NotApplicable" rel="noopener noreferrer" target="_blank" href="https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclubconjure.us16.list-manage.com%2Ftrack%2Fclick%3Fu%3Db5f123b38529eb979b3d3af62%26id%3D1910e9dc6d%26e%3Db254b13612&amp;data=05%7C02%7Ctristan.brault-ouellette.1%40ens.etsmtl.ca%7C55e3b98aa8364d42dabd08ddeb21e8a2%7C70aae3b79f3b484d8f9549e8fbb783c0%7C0%7C0%7C638925253123761499%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&amp;sdata=%2BD9wuWJOMLqXKy8LZT21U1xwcT9VjQTv0aoobzb4rgM%3D&amp;reserved=0"><img style="width: 21.49pt; height: 21.49pt; margin: 0px; min-width: auto; min-height: auto;" size="188212" data-outlook-trace="F:1|T:1" id="x_x__x0000_i1032" src="data:image/png;base64,[encoded data, 167036 characters]" data-custom="AAkALgAAAAAAHYQDEapmEc2byACqAC%2FEWg0AhTYsk738U0qwlp%2Bytkf%2F3gADW47F7AAAARIAEABcJGhYCl4%2BSqN5y76Int7b" data-imagetype="AttachmentByCid" crossorigin="use-credentials" fetchpriority="high" class="Do8Zj"></a></span></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

    </section>
  </main>
</MainLayout>

<script>
    const nameInput = document.getElementById('nameInput');
    const roleInput = document.getElementById('roleInput');
    const nameDisplay = document.getElementById('nameDisplay');
    const roleDisplay = document.getElementById('roleDisplay');
    const copyBtn = document.getElementById('copyBtn');
    const signature = document.getElementById('signature');

    document.addEventListener("DOMContentLoaded", () => {
        nameInput.value = nameDisplay.innerText;
        roleInput.value = roleDisplay.innerText;
    })

    nameInput.addEventListener("change", () => {
        nameDisplay.innerText = nameInput.value;
    })

    roleInput.addEventListener("change", () => {
        roleDisplay.innerText = roleInput.value;
    })

    copyBtn.addEventListener("click", async () => {
        try {
            await navigator.clipboard.write([
                new ClipboardItem({
                    "text/html": new Blob([signature.outerHTML], { type: "text/html" }),
                    "text/plain": new Blob([signature.innerText], { type: "text/plain" })
                })
            ]);
            alert("Signature copied to clipboard!");
        } catch (err) {
            console.error("Failed to copy: ", err);
            alert("Copy failed, please try again.");
        }
    });
</script>