Add email template and improve docs

Change-Id: I102be61c80e3fea8076ecbf4ddfc191a10ed9b39
diff --git a/utils/README.md b/utils/README.md
index d27d5c9..fae9d31 100644
--- a/utils/README.md
+++ b/utils/README.md
@@ -6,11 +6,23 @@
 computer).
 
 ## Send emails
+This util lets you send emails to users before the game begins. You should have
+a file similar to the `emailsamples/users.csv` file with a list of users with
+some info about each one and an autogenerated password. Then you can use this
+util with your file to send an email to each user to remind them of the rules
+and send them their password.
+
 To send emails, run `php sendEmails.php < users.csv`, where `users.csv` has a
-form similar to the `sample.csv` file.
+form similar to the `emailsamples/users.csv` file.
 
 Before you do that, you should copy `config.default.php` to `config.php` and
-set up the Mailgun API keys. You might also have to change the template ID in
-the `sendEmails.php` file.
+set up the Mailjet API keys. You might also have to change the template ID in
+the `sendEmails.php` file to use your own email template.
+
+### Create Mailjet template
+For the email, you can use the template at `emailsamples/template.mjml` as your
+starting template. Go to https://app.mailjet.com/templates/start/transactional,
+click the **By coding it in MJML** tab, and select the **Import MJML from file**
+option. Then upload the template file.
 
 [1]: https://getcomposer.org/
diff --git a/utils/emailsamples/template.html b/utils/emailsamples/template.html
new file mode 100644
index 0000000..811f394
--- /dev/null
+++ b/utils/emailsamples/template.html
@@ -0,0 +1,24 @@
+<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title>Arriba la Carrot Cake!</title><!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style type="text/css">#outlook a { padding:0; }
+          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
+          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
+          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
+          p { display:block;margin:13px 0; }</style><!--[if mso]>
+        <noscript>
+        <xml>
+        <o:OfficeDocumentSettings>
+          <o:AllowPNG/>
+          <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+        </xml>
+        </noscript>
+        <![endif]--><!--[if lte mso 11]>
+        <style type="text/css">
+          .mj-outlook-group-fix { width:100% !important; }
+        </style>
+        <![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);</style><!--<![endif]--><style type="text/css">@media only screen and (min-width:480px) {
+        .mj-column-per-100 { width:100% !important; max-width: 100%; }
+      }</style><style media="screen and (min-width:480px)">.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }</style><style type="text/css">[owa] .mj-column-per-100 { width:100% !important; max-width: 100%; }</style><style type="text/css">@media only screen and (max-width:480px) {
+      table.mj-full-width-mobile { width: 100% !important; }
+      td.mj-full-width-mobile { width: auto !important; }
+    }</style></head><body style="word-spacing:normal;background-color:#F4F4F4;"><div style="background-color:#F4F4F4;"><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tbody><tr><td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><h1 class="text-build-content" data-testid="eZNrqsUcqsW" style="margin-top: 10px; margin-bottom: 10px; font-weight: normal;">Carrot Cake – Planta 8</h1></div></td></tr><tr><td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><p class="text-build-content" data-testid="cHzyM6xQoxI" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;">Hola {{var:name:""}}.</p></div></td></tr><tr><td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><p class="text-build-content" data-testid="I_ZQ1lLTd" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"><span style="font-size:14px;">En res comença la I Carrot Cake de Planta 8! En aquest correu t'expliquem com es desenvoluparà.</span></p></div></td></tr><tr><td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:left;color:#000000;"><ul><li>El <span style="font-size:14px;">joc comença demà <b>dilluns 12 de desembre</b>. 🎉</span><br>&nbsp;</li><li>Ja pots entrar al web <a class="link-build-content" style="color:inherit;; text-decoration: none;" target="_blank" href="https://operacio236.ml/"><span style="color:#1c80ff;font-family:Arial;font-size:14px;"><u>https://operacio236.ml/</u></span></a> per descobrir qui és la teva primera víctima! <span style="font-size:14px;">😈</span><br><br>La teva contrasenya és: <span style="font-family:Courier New, Helvetica, Arial, sans-serif;"><b>{{var:pass:"whoops, hi ha hagut un error, respon a aquest mail fent-nos-ho saber porfa"}}</b></span><br>&nbsp;</li><li>Al web hi ha un xat per parlar amb la teva víctima o amb la persona que et vol assassinar.<br>&nbsp;</li><li><b>⚠️ Molt important!!</b> Quan matis a algú, fes clic al botó «<span style="font-size:14px;"><b>l'he matat</b>» del web. La víctima també ha d'accedir al web i <b>confirmar la mort</b>.</span><br><br><span style="font-size:14px;">Un cop fet això, s'afegiran els punts al teu rànquing, i et sortirà la nova persona a qui has de matar.</span></li></ul></div></td></tr><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><p style="border-top:solid 2px #E6E6E6;font-size:1px;margin:0px auto;width:100%;"></p><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px #E6E6E6;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
+</td></tr></table><![endif]--></td></tr><tr><td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><p class="text-build-content" data-testid="0KikOOrdN1F" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;">Recordem les normes:</p><ul><li><span style="font-size:13px;">El joc es basa en assassinar als nostres companys quan menys s'ho esperin. L'arma de l'homicidi haurà de ser una pastanaga.</span></li><li><span style="font-size:13px;">Per al correcte funcionament de l'activitat, SERÀ IMPRESCINDIBLE QUE VINGUEU A LA FACULTAT durant els dies que jugueu al joc.</span></li><li><span style="font-size:13px;">Per tal que un assassinat sigui vàlid, CAP ALTRE JUGADOR PODRÀ VEURE COM LI CLAVES LA PASTANAGA.</span></li><li><span style="font-size:13px;">Quan assassinis el teu objectiu, ell quedarà eliminat del joc i tu herederàs el seu objectiu.</span></li><li><span style="font-size:13px;">Cada dia hi haurà una norma especial que anunciarem amb poca antelació (seguiu-nos a les xarxes IG: </span><a class="link-build-content" style="color:inherit;; text-decoration: none;" target="_blank" href="https://instagram.com/planta_8"><span style="color:#1c80ff;font-family:Arial;font-size:13px;"><u>@planta_8</u></span></a><span style="font-size:13px;"> TW: </span><a class="link-build-content" style="color:inherit;; text-decoration: none;" target="_blank" href="https://twitter.com/tuiteit"><span style="color:#1c80ff;font-family:Arial;font-size:13px;"><u>@tuiteit</u></span></a><span style="font-size:13px;">).</span></li></ul></div></td></tr><tr><td align="left" style="font-size:0px;padding:0px 25px 0px 25px;padding-top:0px;padding-right:25px;padding-bottom:0px;padding-left:25px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:left;color:#000000;"><p class="text-build-content" data-testid="YBBqMZbVZ" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;">En cas d'algun problema amb el web o el joc, ens pots contactar a <a class="link-build-content" style="color:inherit;; text-decoration: none;" href="mailto:vuit@operacio236.ml"><span style="color:#1c80ff;font-family:Arial;font-size:14px;"><u>vuit@operacio236.ml</u></span></a> i ho solucionem en un nanosegon del metavers! 😊</p></div></td></tr><tr><td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><p class="text-build-content" data-testid="lynf8oyZp" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"><span style="font-size:14px;">Octavi</span></p></div></td></tr><tr><td align="left" style="background:transparent;font-size:0px;padding:20px 25px 10px 25px;padding-top:20px;padding-right:25px;padding-left:25px;word-break:break-word;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:149px;"><img alt="" height="auto" src="https://0ghxs.mjt.lu/tplimg/0ghxs/b/lulwv/g5sl9.jpeg" style="border:none;border-radius:25px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="149"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></div></body></html>
\ No newline at end of file
diff --git a/utils/emailsamples/template.mjml b/utils/emailsamples/template.mjml
new file mode 100644
index 0000000..dce7b97
--- /dev/null
+++ b/utils/emailsamples/template.mjml
@@ -0,0 +1,34 @@
+<mjml owa="desktop" version="4.10.1">
+  <mj-head>
+    <mj-preview></mj-preview>
+  </mj-head>
+  <mj-body background-color="#F4F4F4" color="#5e6977" font-family="Arial, sans-serif" font-size="13px">
+    <mj-section background-color="#ffffff" background-repeat="repeat" background-size="auto" padding="20px 0" text-align="center" vertical-align="top">
+      <mj-column>
+        <mj-text padding-bottom="20px" padding-top="0px" padding="10px 25px">
+          <h1 class="text-build-content" data-testid="eZNrqsUcqsW" style="margin-top: 10px; margin-bottom: 10px">Carrot Cake – Planta 8</h1>
+        </mj-text>
+        <mj-text padding-bottom="0px" padding-top="0px" padding="10px 25px">
+          <p class="text-build-content" data-testid="cHzyM6xQoxI" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;">Hola {{var:name:""}}.</p>
+        </mj-text>
+        <mj-text padding-bottom="0px" padding-top="0px" padding="10px 25px">
+          <p class="text-build-content" data-testid="I_ZQ1lLTd" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"><span style="font-size:14px;">En res comença la I Carrot Cake de Planta 8! En aquest correu t'expliquem com es desenvoluparà.</span></p>
+        </mj-text>
+        <mj-text font-size="14px" padding-bottom="0px" padding-top="0px" padding="10px 25px">
+          <ul><li>El <span style="font-size:14px;">joc comença demà <b>dilluns 12 de desembre</b>. 🎉</span><br>&nbsp;</li><li>Ja pots entrar al web <a class="link-build-content" style="color:inherit;" target="_blank" href="https://operacio236.ml/"><span style="color:#1c80ff;font-family:Arial;font-size:14px;"><u>https://operacio236.ml/</u></span></a> per descobrir qui és la teva primera víctima! <span style="font-size:14px;">😈</span><br><br>La teva contrasenya és: <span style="font-family:Courier New, Helvetica, Arial, sans-serif;"><b>{{var:pass:"whoops, hi ha hagut un error, respon a aquest mail fent-nos-ho saber porfa"}}</b></span><br>&nbsp;</li><li>Al web hi ha un xat per parlar amb la teva víctima o amb la persona que et vol assassinar.<br>&nbsp;</li><li><b>⚠️ Molt important!!</b> Quan matis a algú, fes clic al botó «<span style="font-size:14px;"><b>l'he matat</b>» del web. La víctima també ha d'accedir al web i <b>confirmar la mort</b>.</span><br><br><span style="font-size:14px;">Un cop fet això, s'afegiran els punts al teu rànquing, i et sortirà la nova persona a qui has de matar.</span></li></ul>
+        </mj-text>
+        <mj-divider border-color="#E6E6E6" border-style="solid" border-width="2px" padding="10px 25px" width="100%"></mj-divider>
+        <mj-text font-size="13px" padding-bottom="0px" padding-top="0px" padding="10px 25px">
+          <p class="text-build-content" data-testid="0KikOOrdN1F" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;">Recordem les normes:</p><ul><li><span style="font-size:13px;">El joc es basa en assassinar als nostres companys quan menys s'ho esperin. L'arma de l'homicidi haurà de ser una pastanaga.</span></li><li><span style="font-size:13px;">Per al correcte funcionament de l'activitat, SERÀ IMPRESCINDIBLE QUE VINGUEU A LA FACULTAT durant els dies que jugueu al joc.</span></li><li><span style="font-size:13px;">Per tal que un assassinat sigui vàlid, CAP ALTRE JUGADOR PODRÀ VEURE COM LI CLAVES LA PASTANAGA.</span></li><li><span style="font-size:13px;">Quan assassinis el teu objectiu, ell quedarà eliminat del joc i tu herederàs el seu objectiu.</span></li><li><span style="font-size:13px;">Cada dia hi haurà una norma especial que anunciarem amb poca antelació (seguiu-nos a les xarxes IG: </span><a class="link-build-content" style="color:inherit;" target="_blank" href="https://instagram.com/planta_8"><span style="color:#1c80ff;font-family:Arial;font-size:13px;"><u>@planta_8</u></span></a><span style="font-size:13px;"> TW: </span><a class="link-build-content" style="color:inherit;" target="_blank" href="https://twitter.com/tuiteit"><span style="color:#1c80ff;font-family:Arial;font-size:13px;"><u>@tuiteit</u></span></a><span style="font-size:13px;">).</span></li></ul>
+        </mj-text>
+        <mj-text font-size="14px" padding-bottom="0px" padding-left="25px" padding-right="25px" padding-top="0px" padding="0px 25px 0px 25px">
+          <p class="text-build-content" data-testid="YBBqMZbVZ" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;">En cas d'algun problema amb el web o el joc, ens pots contactar a <a class="link-build-content" style="color:inherit;" href="mailto:vuit@operacio236.ml"><span style="color:#1c80ff;font-family:Arial;font-size:14px;"><u>vuit@operacio236.ml</u></span></a> i ho solucionem en un nanosegon del metavers! 😊</p>
+        </mj-text>
+        <mj-text padding-bottom="0px" padding-top="0px" padding="10px 25px">
+          <p class="text-build-content" data-testid="lynf8oyZp" style="margin: 10px 0; margin-top: 10px; margin-bottom: 10px;"><span style="font-size:14px;">Octavi</span></p>
+        </mj-text>
+        <mj-image align="left" alt="" border-radius="25px" border="none" container-background-color="transparent" height="auto" href="" padding-left="25px" padding-right="25px" padding-top="20px" padding="20px 25px 10px 25px" src="https://0ghxs.mjt.lu/tplimg/0ghxs/b/lulwv/g5sl9.jpeg" target="_blank" title="" width="149px"></mj-image>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
\ No newline at end of file
diff --git a/utils/sample.csv b/utils/emailsamples/users.csv
similarity index 100%
rename from utils/sample.csv
rename to utils/emailsamples/users.csv