<!-- HERO -->
<tr>
  <td bgcolor="#474467" align="center" style="padding: 0px 10px 0px 10px;">
    <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
          <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
      <tr>
        <td
          bgcolor="#ffffff"
          align="center"
          valign="top"
          style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #3A384C; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 48px;"
        >
          <h1 style="font-size: 48px; font-weight: 400; margin: 0;">
            <%= gettext("An administrator changed your role") %>
          </h1>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
  </tr>
</table>
    <![endif]-->
  </td>
</tr>
<!-- COPY BLOCK -->
<tr>
  <td bgcolor="#E6E4F4" align="center" style="padding: 0px 10px 0px 10px;">
    <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
          <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
      <!-- COPY -->
      <tr>
        <td
          bgcolor="#ffffff"
          align="left"
          style="padding: 20px 30px 0px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
        >
          <p style="margin: 0;">
            <%= gettext(
              "Hi there! We just wanted to inform you that an administrator from <b>%{instance}</b> just changed your account role.",
              %{instance: @instance_name}
            )
            |> raw %>
          </p>
        </td>
      </tr>
      <tr>
        <td
          bgcolor="#ffffff"
          align="left"
          style="padding: 20px 30px 40px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
        >
          <table width="100%">
            <tr>
              <td bgcolor="#ffffff" align="left">
                <%= gettext("Old role") %>
              </td>
              <td bgcolor="#ffffff" align="left">
                <%= render("admin/_role.html", role: @old_role) %>
              </td>
            </tr>
            <tr>
              <td bgcolor="#ffffff" align="left">
                <%= gettext("New role") %>
              </td>
              <td bgcolor="#ffffff" align="left">
                <%= render("admin/_role.html", role: @new_role) %>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td
          bgcolor="#ffffff"
          align="left"
          style="padding: 20px 30px 40px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px;"
        >
          <p style="margin: 0">
            <%= gettext(
              "If something doesn't feel right to you, please contact the instance administrator through the contact methods %{start_link}on the instance's about page%{end_link}.",
              %{
                start_link: "<a href=\"#{Mobilizon.Web.Endpoint.url()}/about/instance\">",
                end_link: "</a>"
              }
            )
            |> raw %>
          </p>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
  </tr>
</table>
    <![endif]-->
  </td>
</tr>
