<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet" />
    <title><%= subject %></title>
    <style>
      .ExternalClass {
        width: 100%;
      }

      .ExternalClass,
      .ExternalClass p,
      .ExternalClass span,
      .ExternalClass font,
      .ExternalClass td,
      .ExternalClass div {
        line-height: 100%;
      }

      td {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        box-sizing: border-box;
        font-weight: 300;
        color: #979797;
      }

      table {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        border-collapse: collapse;
      }

      img {
        -ms-interpolation-mode: bicubic;
      }

      body {
        -webkit-text-size-adjust: 100%;
        padding: 0;
        margin: 0;
      }

      .table-cell {
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 1px solid #e3e3e3;
      }

      @media screen and (max-width: 600px) {
        table {
          width: 100% !important;
        }

        .td-mobile {
          width: 100% !important;
          display: block !important;
        }

        img[class='imgmobile'] {
          width: 100% !important;
          height: auto;
        }
      }
    </style>
  </head>

  <body>
    <table align="center" cellpadding="0" cellspacing="0" border="0" style="width: 100%">
      <tr>
        <td>
          <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto">
            <tr>
              <td style="padding: 30px 20px 40px">
                <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse">
                  <tr>
                    <td style="padding-bottom: 20px">
                      <img
                        src="https://www.restoration1everett.com/_astro/restoration-logo.16f5d1f2.png"
                        width="200"
                        alt="Restoration Everett Logo"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse" width="560">
                        <tr>
                          <td class="table-cell">First Name</td>
                          <td class="table-cell" style="text-align: right"><%= first_name %></td>
                        </tr>
                        <tr>
                          <td class="table-cell">Last Name</td>
                          <td class="table-cell" style="text-align: right"><%= last_name %></td>
                        </tr>
                        <tr>
                          <td class="table-cell">Email</td>
                          <td class="table-cell" style="text-align: right"><%= email %></td>
                        </tr>
                        <tr>
                          <td class="table-cell">Phone Number</td>
                          <td class="table-cell" style="text-align: right"><%= phone %></td>
                        </tr>
                        <tr>
                          <td class="table-cell">Zip Code</td>
                          <td class="table-cell" style="text-align: right"><%= zip_code %></td>
                        </tr>
                        <tr>
                          <td class="table-cell">Service Required</td>
                          <td class="table-cell" style="text-align: right"><%= service_required %></td>
                        </tr>
                        <tr>
                          <td class="table-cell">This is an Emergency</td>
                          <td class="table-cell" style="text-align: right"><%= emergency %></td>
                        </tr>
                        <tr>
                          <td style="padding-top: 10px">Comments:</td>
                        </tr>
                        <tr>
                          <td colspan="2" class="table-cell" style="border: none"><%= comments %></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
