fix social media network links, format phone number correctly

mail_signature/templates/mail_signature/index.html

@@ -65,12 +65,21 @@
                     <label class="basis-56 flex items-center font-bold" for="phone">
                         Telefonní číslo:
                     </label>
-                    <input
-                        id="phone"
-                        name="phone"
-                        type="tel"
-                        class="border border-gray-200 p-2 rounded-md grow w-full"
-                    >
+                    <div class="grow w-full flex gap-4 items-center">
+                        <input
+                            id="phone-prefix"
+                            name="phone-prefix"
+                            type="text"
+                            class="basis-16 w-16 border border-gray-200 p-2 rounded-md"
+                            value="+420"
+                        >
+                        <input
+                            id="phone"
+                            name="phone"
+                            type="number"
+                            class="border border-gray-200 p-2 rounded-md grow w-full"
+                        >
+                    </div>
                 </div>
                 
                 <div class="flex gap-4 items-center">

static_src/mail_signature.js

@@ -71,7 +71,7 @@ const generateSignature = () => {
     let phone = escapeHTML($("#phone").val());
     
     let web = escapeHTML($("#web").val());
-    let mastodon = escapeHTML($("#web").val());
+    let mastodon = escapeHTML($("#mastodon").val());
     let twitter = escapeHTML($("#twitter").val());
     let instagram = escapeHTML($("#instagram").val());
     let linkedin = escapeHTML($("#linkedin").val());
@@ -85,14 +85,20 @@ const generateSignature = () => {
         if (email !== "") {
             result += `<div style="display:flex;column-gap:0.3em;margin-bottom:0.25em">
                        <img src="${emailDataURL}" aria-label="E-mail" title="E-mail" width="14">
-                       <a href="${email}" style="color:black!important">${email}</a>
+                       <a href="mailto:${email}" style="color:black!important">${email}</a>
                        </div>`;
         }
         
         if (phone !== "") {
+            phone = phone.replace(" ", "");
+            let phoneGroups = phone.match(/.?.?.?/g);
+            
+            const formattedBasePhone = phoneGroups.join(" ");
+            const prefix = $("#phone-prefix").val();
+            
             result += `<div style="display:flex;column-gap:0.3em;margin-bottom:0.25em">
                        <img src="${phoneDataURL}" aria-label="Telefonní číslo" title="Telefonní číslo" width="14">
-                       <a href="${phone}" style="color:black!important">${phone}</a>
+                       <a href="tel:${prefix} ${formattedBasePhone}" style="color:black!important">${prefix}&nbsp;&nbsp;${formattedBasePhone}</a>
                        </div>`;
         }
         
@@ -160,7 +166,7 @@ const generateSignature = () => {
         if (linkedin !== "") {
             result += `<a
                            style="width:30px;height:30px;background:#1c84bb;text-decoration:none;display:flex;justify-content:center;align-items:center"
-                           href="${instagram}"
+                           href="${linkedin}"
                        >
                            <img
                                src="${linkedInDataURL}"