<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: #0f131c">
    <center>
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; background-color: #0f131c">
        <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: #ffffff"
                      >
                        <tr>
                          <td style="font-size: 36px; font-weight: lighter; line-height: 1.3; padding-bottom: 25px">Booking Status</td>
                        </tr>

                        <tr>
                          <td>
                            <table
                              border="0"
                              cellpadding="0"
                              cellspacing="0"
                              role="presentation"
                              style="
                                width: 100%;
                                border-radius: 16px;
                                border: 2px solid var(--dark-grey-border, #343a45);
                                background: var(--Corporate-blue, #111723);
                              "
                            >
                              <tr>
                                <td
                                  colspan="2"
                                  style="
                                    padding: 20px 20px 15px 20px;
                                    font-size: 16px;
                                    font-weight: bold;
                                    border-bottom: 1px solid #2c2f42;
                                    color: #ffffff;
                                  "
                                >
                                  Facility Booking
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42; width: 40%">
                                  Facility
                                </td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  {{facilityName}}
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Booked by</td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  <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: #ffffff">{{fullName}}</td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Company</td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  {{company}}
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Email</td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  {{email}}
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Phone Number</td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  {{phoneNumber}}
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Booked at</td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  {{bookAt}}
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Booking Date</td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  {{bookingDate}}
                                </td>
                              </tr>
                              <tr>
                                <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Booking Slot</td>
                                <td
                                  align="right"
                                  style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                >
                                  {{slotName}}
                                </td>
                              </tr>
                              {{#if remarks}}
                                <tr>
                                  <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd; border-bottom: 1px solid #2c2f42">Status</td>
                                  <td
                                    align="right"
                                    style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal; border-bottom: 1px solid #2c2f42"
                                  >
                                    {{status}}
                                  </td>
                                </tr>
                              {{else}}
                                <tr>
                                  <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd">Status</td>
                                  <td align="right" style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal">{{status}}</td>
                                </tr>
                              {{/if}}
                              {{#if remarks}}
                                <tr>
                                  <td style="padding: 20px 35px; font-size: 15px; color: #adb5bd">Remarks</td>
                                  <td align="right" style="padding: 15px 20px; font-size: 15px; color: #ffffff; font-weight: normal">{{remarks}}</td>
                                </tr>
                              {{/if}}
                            </table>
                          </td>
                        </tr>
                        {{!-- Booking Policy Starts --}}
                        {{#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: #ffffff;">
                                The policy below was acknowledged during booking.
                              </td>
                            </tr>
                            <tr>
                              <td align="center" style="padding-top: 30px; font-size: 20px; font-weight: bold; color: #ffffff;">
                                Booking Policy
                              </td>
                            </tr>
                            <!-- Tiptap HTML Content -->
                            <tr>
                              <td style="padding: 20px 30px; font-size: 14px; line-height: 22px; color: #ffffff;">
                                {{{bookingPolicy}}}
                              </td>
                            </tr>
                          </table>
                        {{/if}}
                        {{!-- Booking Policy Ends --}}
                        <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: #adb5bd">
                            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: #adb5bd; padding-top: 10px">
                            Need help? Contact our support team at
                            <a href="mailto:contact@seven365.com.sg" style="color: #5cacee; text-decoration: underline">contact@seven365.com.sg</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </center>
  </body>
</html>