<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting" />
    <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title th:text="#{email.encuestaDeleted.title}">Encuesta Eliminada</title>
    <link rel="icon" th:href="@{|${baseUrl}/favicon.ico|}" />
    <link href="https://fonts.googleapis.com/css?family=NotoSansSP:300,400,700" rel="stylesheet" />
    <link rel="manifest" href="manifest.webapp" />
    <style>
      .bg_white {
        background: #ffffff;
      }
      .bg_light {
        background: #fafafa;
      }
      .bg_black {
        background: #000000;
      }
      .bg_dark {
        background: rgba(0, 0, 0, 0.8);
      }
      .email-section {
        padding: 2.5em;
      }
      /*BUTTON*/
      .btn {
        padding: 10px 15px;
        display: inline-block;
      }
      .btn.btn-primary {
        border-radius: 5px;
        background: #007bff;
        color: #ffffff;
      }
      .btn.btn-white {
        border-radius: 5px;
        background: #ffffff;
        color: #000000;
      }
      .btn.btn-white-outline {
        border-radius: 5px;
        background: transparent;
        border: 1px solid #fff;
        color: #fff;
      }
      .btn.btn-black-outline {
        border-radius: 0px;
        background: transparent;
        border: 2px solid #000;
        color: #000;
        font-weight: 700;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: 'Lato', sans-serif;
        color: #000000;
        margin-top: 0;
        font-weight: 400;
      }

      body {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.8;
        color: rgba(0, 0, 0, 0.4);
      }

      a {
        color: #30e3ca;
      }

      table {
      }
      /*LOGO*/

      .logo h1 {
        margin: 0;
      }
      .logo h1 a {
        color: #30e3ca;
        font-size: 24px;
        font-weight: 700;
        font-family: 'Lato', sans-serif;
      }

      /*HERO*/
      .hero {
        position: relative;
        z-index: 0;
      }

      .hero .text {
        color: rgba(0, 0, 0, 0.3);
      }
      .hero .text h2 {
        color: #000;
        font-size: 40px;
        margin-bottom: 0;
        font-weight: 400;
        line-height: 1.4;
      }
      .hero .text h3 {
        font-size: 24px;
        font-weight: 300;
      }
      .hero .text h2 span {
        font-weight: 600;
        color: #30e3ca;
      }

      /*HEADING SECTION*/
      .heading-section {
      }
      .heading-section h2 {
        color: #000000;
        font-size: 28px;
        margin-top: 0;
        line-height: 1.4;
        font-weight: 400;
      }
      .heading-section .subheading {
        margin-bottom: 20px !important;
        display: inline-block;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: rgba(0, 0, 0, 0.4);
        position: relative;
      }
      .heading-section .subheading::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -10px;
        content: '';
        width: 100%;
        height: 2px;
        background: #30e3ca;
        margin: 0 auto;
      }

      .heading-section-white {
        color: rgba(255, 255, 255, 0.8);
      }
      .heading-section-white h2 {
        /*font-family: ;*/
        line-height: 1;
        padding-bottom: 0;
      }
      .heading-section-white h2 {
        color: #ffffff;
      }
      .heading-section-white .subheading {
        margin-bottom: 0;
        display: inline-block;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.4);
      }

      ul.social {
        padding: 0;
      }
      ul.social li {
        display: inline-block;
        margin-right: 10px;
      }

      .footer {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        color: rgba(0, 0, 0, 0.5);
      }
      .footer .heading {
        color: #000;
        font-size: 20px;
      }
      .footer ul {
        margin: 0;
        padding: 0;
      }
      .footer ul li {
        list-style: none;
        margin-bottom: 10px;
      }
      .footer ul li a {
        color: rgba(0, 0, 0, 1);
      }
    </style>
  </head>

  <body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f1f1f1">
    <center style="width: 100%; background-color: #f1f1f1">
      <div
        style="
          display: none;
          font-size: 1px;
          max-height: 0px;
          max-width: 0px;
          opacity: 0;
          overflow: hidden;
          mso-hide: all;
          font-family: sans-serif;
        "
      >
        &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
      </div>
      <div style="max-width: 600px; margin: 0 auto" class="email-container">
        <!-- BEGIN BODY -->
        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto">
          <tr>
            <td valign="top" class="bg_white" style="padding: 1em 2.5em 0 2.5em">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td class="logo" style="text-align: center">
                    <h1>
                      <a href="#"
                        ><img
                          src="https://res.cloudinary.com/marielascloud/image/upload/v1626333881/DataSurveyLogo2_smr2ok.png"
                          alt=""
                          width="300"
                      /></a>
                    </h1>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- end tr -->
          <tr>
            <td valign="middle" class="hero bg_white" style="padding: 3em 0 2em 0">
              <img
                src="https://res.cloudinary.com/marielascloud/image/upload/v1626333882/email_v7pjtv.png"
                alt=""
                style="width: 300px; max-width: 600px; height: auto; margin: auto; display: block"
              />
            </td>
          </tr>
          <!-- end tr -->
          <tr>
            <td valign="middle" class="hero bg_white" style="padding: 2em 0 4em 0">
              <table>
                <tr>
                  <td>
                    <div class="text" style="padding: 0 2.5em; text-align: center">
                      <h2 th:text="#{email.encuestaDeleted.greeting(${user.login})}">¡Encuesta eliminada!</h2>
                      <h3 th:text="#{email.encuestaDeleted.text1}">¡Su encuesta ha sido eliminada exitosamente!</h3>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- end tr -->
          <!-- 1 Column Text + Button : END -->
        </table>
        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto">
          <tr>
            <td valign="middle" class="bg_light footer email-section">
              <table>
                <tr>
                  <td valign="top" width="33.333%" style="padding-top: 20px">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                      <tr>
                        <td style="text-align: left; padding-right: 10px">
                          <h3 class="heading">Acerca de</h3>
                          <p>DataSurvey es su compañero más cercano para poder recolectar información valiosa para usted.</p>
                        </td>
                      </tr>
                    </table>
                  </td>
                  <td valign="top" width="33.333%" style="padding-top: 20px">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                      <tr>
                        <td style="text-align: left; padding-left: 5px; padding-right: 5px">
                          <h3 class="heading">Información de contacto</h3>
                          <ul>
                            <li><span href="mailto:datasurveyapp@gmail.com" class="text">datasurveyapp@gmail.com</span></li>
                          </ul>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- end: tr -->
          <tr>
            <td class="bg_light" style="text-align: center">
              <p><a href="https://datasurvey.org" style="color: rgba(0, 0, 0, 0.8)">DataSurvey.org</a></p>
            </td>
          </tr>
        </table>
      </div>
    </center>
  </body>
</html>
