<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Booking Status</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
  </head>

  <body style="background-color: #f5f7fa">
    <center>
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; background-color: #f5f7fa">
        <tbody>
          <tr>
            <td>
              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 550px; margin: 0 auto">
                <tbody>
                  <tr>
                    <td style="padding: 20px 40px">
                      <table
                        align="center"
                        border="0"
                        cellpadding="0"
                        cellspacing="0"
                        role="presentation"
                        style="width: 100%; font-family: Arial, Helvetica, sans-serif; color: #333333"
                      >
                        <tr>
                          <td style="font-size: 36px; font-weight: lighter; line-height: 1.3; padding-bottom: 25px; color: #222222">
                            Booking Status
                          </td>
                        </tr>

                        <tr>
                          <td>
                            <table
                              border="0"
                              cellpadding="0"
                              cellspacing="0"
                              role="presentation"
                              style="
                                width: 100%;
                                border-radius: 16px;
                                border: 2px solid #e0e4ea;
                                background: #ffffff;
                              "
                            >
                              <tr>
                                <td
                                  colspan="2"
                                  style="
                                    padding: 20px 20px 15px 20px;
                                    font-size: 16px;
                                    font-weight: bold;
                                    border-bottom: 1px solid #e6e8ef;
                                    color: #222222;
                                  "
                                >
                                  Facility Booking
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef; width: 40%">
                                  Facility
                                </td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{facilityName}}
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">
                                  Booked by
                                </td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  <table border="0" cellpadding="0" cellspacing="0" align="right">
                                    <tr>
                                      <td
                                        align="center"
                                        style="
                                          background-color: #6f42c1;
                                          border-radius: 50%;
                                          width: 24px;
                                          height: 24px;
                                          line-height: 24px;
                                          color: #ffffff;
                                          font-size: 12px;
                                          font-weight: bold;
                                        "
                                      >
                                        {{fullNameFirstLetter}}
                                      </td>
                                      <td style="padding-left: 10px; color: #222222">{{fullName}}</td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">Company</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{company}}
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">Email</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{email}}
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">Phone Number</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{phoneNumber}}
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">Booked at</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{bookAt}}
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">Booking Date</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{bookingDate}}
                                </td>
                              </tr>

                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">Booking Slot</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{slotName}}
                                </td>
                              </tr>

                              {{#if remarks}}
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d; border-bottom: 1px solid #e6e8ef">
                                  Status
                                </td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222; border-bottom: 1px solid #e6e8ef">
                                  {{status}}
                                </td>
                              </tr>
                              {{else}}
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d">Status</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222">
                                  {{status}}
                                </td>
                              </tr>
                              {{/if}}

                              {{#if remarks}}
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #6c757d">Remarks</td>
                                <td align="right" style="padding: 15px 20px; font-size: 15px; color: #222222">{{remarks}}</td>
                              </tr>
                              {{/if}}

                            </table>
                          </td>
                        </tr>

                        {{!-- Booking Policy --}}
                        {{#if bookingPolicy}}
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                          <tr>
                            <td align="center" style="padding: 40px 20px 20px 20px; font-size: 24px; font-weight: bold; color: #222222;">
                              The policy below was acknowledged during booking.
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="padding-top: 30px; font-size: 20px; font-weight: bold; color: #222222;">
                              Booking Policy
                            </td>
                          </tr>

                          <tr>
                            <td style="padding: 20px 30px; font-size: 14px; line-height: 22px; color: #333333;">
                              {{{bookingPolicy}}}
                            </td>
                          </tr>
                        </table>
                        {{/if}}

                        <tr>
                          <td align="center" style="padding: 30px 0">
                            <a
                              href="{{bookingLink}}"
                              target="_blank"
                              style="
                                display: inline-block;
                                padding: 14px 40px;
                                color: #ffffff;
                                font-size: 18px;
                                line-height: normal;
                                border-radius: 6px;
                                background-color: #1867c0;
                                text-decoration: none;
                                width: 550px;
                                text-align: center;
                              "
                            >
                              View My Booking
                            </a>
                          </td>
                        </tr>

                        <tr>
                          <td align="left" style="font-size: 14px; line-height: 1.5; color: #6c757d">
                            If you didn't sign up, you can safely ignore this email.
                          </td>
                        </tr>

                        <tr>
                          <td align="left" style="font-size: 14px; line-height: 1.5; color: #6c757d; padding-top: 10px">
                            Need help? Contact our support team at
                            <a href="mailto:contact@seven365.com.sg" style="color: #0d6efd; text-decoration: underline">
                              contact@seven365.com.sg
                            </a>
                          </td>
                        </tr>

                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </center>
  </body>
</html>
