github.com/masterhung0112/hk_server/v5@v5.0.0-20220302090640-ec71aef15e1c/templates/messages_notification.html (about)

     1  {{define "messages_notification"}}
     2  
     3  <!-- FILE: messages_notification.mjml -->
     4  <!doctype html>
     5  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
     6  
     7  <head>
     8    <title>
     9    </title>
    10    <!--[if !mso]><!-->
    11    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12    <!--<![endif]-->
    13    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    14    <meta name="viewport" content="width=device-width, initial-scale=1">
    15    <style type="text/css">
    16      #outlook a {
    17        padding: 0;
    18      }
    19  
    20      body {
    21        margin: 0;
    22        padding: 0;
    23        -webkit-text-size-adjust: 100%;
    24        -ms-text-size-adjust: 100%;
    25      }
    26  
    27      table,
    28      td {
    29        border-collapse: collapse;
    30        mso-table-lspace: 0pt;
    31        mso-table-rspace: 0pt;
    32      }
    33  
    34      img {
    35        border: 0;
    36        height: auto;
    37        line-height: 100%;
    38        outline: none;
    39        text-decoration: none;
    40        -ms-interpolation-mode: bicubic;
    41      }
    42  
    43      p {
    44        display: block;
    45        margin: 13px 0;
    46      }
    47    </style>
    48    <!--[if mso]>
    49          <xml>
    50          <o:OfficeDocumentSettings>
    51            <o:AllowPNG/>
    52            <o:PixelsPerInch>96</o:PixelsPerInch>
    53          </o:OfficeDocumentSettings>
    54          </xml>
    55          <![endif]-->
    56    <!--[if lte mso 11]>
    57          <style type="text/css">
    58            .mj-outlook-group-fix { width:100% !important; }
    59          </style>
    60          <![endif]-->
    61    <!--[if !mso]><!-->
    62    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
    63    <style type="text/css">
    64      @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
    65    </style>
    66    <!--<![endif]-->
    67    <style type="text/css">
    68      @media only screen and (min-width:480px) {
    69        .mj-column-per-100 {
    70          width: 100% !important;
    71          max-width: 100%;
    72        }
    73  
    74        .mj-column-per-50 {
    75          width: 50% !important;
    76          max-width: 50%;
    77        }
    78  
    79        .mj-column-per-90 {
    80          width: 90% !important;
    81          max-width: 90%;
    82        }
    83      }
    84    </style>
    85    <style type="text/css">
    86      @media only screen and (max-width:480px) {
    87        table.mj-full-width-mobile {
    88          width: 100% !important;
    89        }
    90  
    91        td.mj-full-width-mobile {
    92          width: auto !important;
    93        }
    94      }
    95    </style>
    96    <style type="text/css">
    97      @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
    98  
    99      .emailBody {
   100        background: #F3F3F3 !important;
   101      }
   102  
   103      .emailBody a {
   104        text-decoration: none !important;
   105        color: #166DE0 !important;
   106      }
   107  
   108      .title div {
   109        font-weight: 600 !important;
   110        font-size: 28px !important;
   111        line-height: 36px !important;
   112        letter-spacing: -0.01em !important;
   113        color: #3D3C40 !important;
   114      }
   115  
   116      .subTitle div {
   117        font-size: 16px !important;
   118        line-height: 24px !important;
   119        color: rgba(61, 60, 64, 0.64) !important;
   120      }
   121  
   122      .button a {
   123        background-color: #166DE0 !important;
   124        font-weight: 600 !important;
   125        font-size: 16px !important;
   126        line-height: 18px !important;
   127        color: #FFFFFF !important;
   128        padding: 15px 24px !important;
   129      }
   130  
   131      .messageButton a {
   132        background-color: #FFFFFF !important;
   133        border: 1px solid #FFFFFF !important;
   134        box-sizing: border-box !important;
   135        color: #166DE0 !important;
   136        padding: 12px 20px !important;
   137        font-weight: 600 !important;
   138        font-size: 14px !important;
   139        line-height: 14px !important;
   140      }
   141  
   142      .info div {
   143        font-size: 14px !important;
   144        line-height: 20px !important;
   145        color: #3D3C40 !important;
   146        padding: 40px 0px !important;
   147      }
   148  
   149      .footerTitle div {
   150        font-weight: 600 !important;
   151        font-size: 16px !important;
   152        line-height: 24px !important;
   153        color: #3D3C40 !important;
   154        padding: 0px 0px 4px 0px !important;
   155      }
   156  
   157      .footerInfo div {
   158        font-size: 14px !important;
   159        line-height: 20px !important;
   160        color: #3D3C40 !important;
   161        padding: 0px 48px 0px 48px !important;
   162      }
   163  
   164      .footerInfo a {
   165        color: #166DE0 !important;
   166      }
   167  
   168      .appDownloadButton a {
   169        background-color: #FFFFFF !important;
   170        border: 1px solid #166DE0 !important;
   171        box-sizing: border-box !important;
   172        color: #166DE0 !important;
   173        padding: 13px 20px !important;
   174        font-weight: 600 !important;
   175        font-size: 14px !important;
   176        line-height: 14px !important;
   177      }
   178  
   179      .emailFooter div {
   180        font-size: 12px !important;
   181        line-height: 16px !important;
   182        color: rgba(61, 60, 64, 0.56) !important;
   183        padding: 8px 24px 8px 24px !important;
   184      }
   185  
   186      .postCard {
   187        padding: 0px 24px 40px 24px !important;
   188      }
   189  
   190      .messageCard {
   191        background: #FFFFFF !important;
   192        border: 1px solid rgba(61, 60, 64, 0.08) !important;
   193        box-sizing: border-box !important;
   194        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
   195        border-radius: 4px !important;
   196        padding: 32px !important;
   197      }
   198  
   199      .messageAvatar img {
   200        width: 32px !important;
   201        height: 32px !important;
   202        padding: 0px !important;
   203        border-radius: 32px !important;
   204      }
   205  
   206      .messageAvatarCol {
   207        width: 32px !important;
   208      }
   209  
   210      .postNameAndTime {
   211        padding: 0px 0px 4px 0px !important;
   212        display: flex;
   213      }
   214  
   215      .senderName {
   216        font-family: Open Sans, sans-serif;
   217        text-align: left !important;
   218        font-weight: 600 !important;
   219        font-size: 14px !important;
   220        line-height: 20px !important;
   221        color: #3D3C40 !important;
   222      }
   223  
   224      .time {
   225        font-family: Open Sans, sans-serif;
   226        font-size: 12px;
   227        line-height: 16px;
   228        color: rgba(61, 60, 64, 0.56);
   229        padding: 2px 6px;
   230        align-items: center;
   231        float: left;
   232      }
   233  
   234      .channelBg {
   235        background: rgba(61, 60, 64, 0.08);
   236        border-radius: 4px;
   237        display: flex;
   238      }
   239  
   240      .channelLogo {
   241        width: 10px;
   242        height: 10px;
   243        padding: 5px 4px 5px 6px;
   244        float: left;
   245      }
   246  
   247      .channelName {
   248        font-family: Open Sans, sans-serif;
   249        font-weight: 600;
   250        font-size: 10px;
   251        line-height: 16px;
   252        letter-spacing: 0.01em;
   253        text-transform: uppercase;
   254        color: rgba(61, 60, 64, 0.64);
   255        padding: 2px 6px 2px 0px;
   256      }
   257  
   258      .senderMessage div {
   259        text-align: left !important;
   260        font-size: 14px !important;
   261        line-height: 20px !important;
   262        color: #3D3C40 !important;
   263        padding: 0px !important;
   264      }
   265  
   266      .senderInfoCol {
   267        width: 394px !important;
   268        padding: 0px 0px 0px 12px !important;
   269      }
   270  
   271      @media all and (min-width: 541px) {
   272        .emailBody {
   273          padding: 32px !important;
   274        }
   275      }
   276  
   277      @media all and (max-width: 540px) and (min-width: 401px) {
   278        .emailBody {
   279          padding: 16px !important;
   280        }
   281  
   282        .messageCard {
   283          padding: 16px !important;
   284        }
   285  
   286        .senderInfoCol {
   287          width: 80% !important;
   288          padding: 0px 0px 0px 12px !important;
   289        }
   290      }
   291  
   292      @media all and (max-width: 400px) {
   293        .emailBody {
   294          padding: 0px !important;
   295        }
   296  
   297        .footerInfo div {
   298          padding: 0px !important;
   299        }
   300  
   301        .messageCard {
   302          padding: 16px !important;
   303        }
   304  
   305        .postCard {
   306          padding: 0px 0px 40px 0px !important;
   307        }
   308  
   309        .senderInfoCol {
   310          width: 80% !important;
   311          padding: 0px 0px 0px 12px !important;
   312        }
   313      }
   314    </style>
   315  </head>
   316  
   317  <body style="word-spacing:normal;">
   318    <div class="emailBody" style="">
   319      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   320      <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
   321        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
   322          <tbody>
   323            <tr>
   324              <td style="direction:ltr;font-size:0px;padding:24px;text-align:center;">
   325                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   326                <div style="margin:0px auto;max-width:552px;">
   327                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   328                    <tbody>
   329                      <tr>
   330                        <td style="direction:ltr;font-size:0px;padding:0px 0px 40px 0px;text-align:center;">
   331                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
   332                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   333                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   334                              <tbody>
   335                                <tr>
   336                                  <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
   337                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
   338                                      <tbody>
   339                                        <tr>
   340                                          <td style="width:132px;">
   341                                            <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
   342                                          </td>
   343                                        </tr>
   344                                      </tbody>
   345                                    </table>
   346                                  </td>
   347                                </tr>
   348                              </tbody>
   349                            </table>
   350                          </div>
   351                          <!--[if mso | IE]></td></tr></table><![endif]-->
   352                        </td>
   353                      </tr>
   354                    </tbody>
   355                  </table>
   356                </div>
   357                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   358                <div style="margin:0px auto;max-width:552px;">
   359                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   360                    <tbody>
   361                      <tr>
   362                        <td style="direction:ltr;font-size:0px;padding:0px 24px 40px 24px;text-align:center;">
   363                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]-->
   364                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   365                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   366                              <tbody>
   367                                <tr>
   368                                  <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
   369                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
   370                                  </td>
   371                                </tr>
   372                                <tr>
   373                                  <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 16px 24px;word-break:break-word;">
   374                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle}}</div>
   375                                  </td>
   376                                </tr>
   377                                <tr>
   378                                  <td align="center" vertical-align="middle" class="button" style="font-size:0px;padding:0px;word-break:break-word;">
   379                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
   380                                      <tr>
   381                                        <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
   382                                          <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
   383                                            {{.Props.Button}}
   384                                          </a>
   385                                        </td>
   386                                      </tr>
   387                                    </table>
   388                                  </td>
   389                                </tr>
   390                              </tbody>
   391                            </table>
   392                          </div>
   393                          <!--[if mso | IE]></td></tr></table><![endif]-->
   394                        </td>
   395                      </tr>
   396                    </tbody>
   397                  </table>
   398                </div>
   399                <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
   400                {{range .Props.Posts}}
   401                <div class="postCard">
   402                  <!--[if mso | IE]><tr><td class="messageCard-outlook" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="messageCard-outlook" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   403                  <div class="messageCard" style="margin:0px auto;max-width:552px;">
   404                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   405                      <tbody>
   406                        <tr>
   407                          <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
   408                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:552px;" ><![endif]-->
   409                            <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
   410                              <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:276px;" ><![endif]-->
   411                              <div class="mj-column-per-50 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
   412                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   413                                  <tbody>
   414                                    <tr>
   415                                      <td align="center" class="messageAvatar" style="font-size:0px;padding:0px;word-break:break-word;">
   416                                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
   417                                          <tbody>
   418                                            <tr>
   419                                              <td style="width:276px;">
   420                                                <img alt="" height="auto" src="cid:{{.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="276" />
   421                                              </td>
   422                                            </tr>
   423                                          </tbody>
   424                                        </table>
   425                                      </td>
   426                                    </tr>
   427                                  </tbody>
   428                                </table>
   429                              </div>
   430                              <!--[if mso | IE]></td><td style="vertical-align:top;width:496px;" ><![endif]-->
   431                              <div class="mj-column-per-90 mj-outlook-group-fix senderInfoCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:90%;">
   432                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   433                                  <tbody>
   434                                    <tr>
   435                                      <td>
   436                                        <div class="postNameAndTime">
   437                                          <div class="senderName">{{.SenderName}}</div>
   438                                          {{if .Time}}
   439                                          <div class="time">{{.Time}}</div>
   440                                          {{end}}
   441                                          {{if .ChannelName}}
   442                                          <div class="channelBg">
   443                                            <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
   444                                            <div class="channelName">{{.ChannelName}}</div>
   445                                          </div>
   446                                          {{end}}
   447                                        </div>
   448                                      </td>
   449                                    </tr>
   450                                    <tr>
   451                                      <td align="center" class="senderMessage" style="font-size:0px;padding:0px;word-break:break-word;">
   452                                        <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Message}}</div>
   453                                      </td>
   454                                    </tr>
   455                                    {{if .MessageURL}}
   456                                    <tr>
   457                                      <td align="center" vertical-align="middle" class="messageButton" style="font-size:0px;padding:16px 0px 0px 0px;word-break:break-word;">
   458                                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
   459                                          <tr>
   460                                            <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
   461                                              <a href="{{.MessageURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
   462                                                {{$.Props.MessageButton}}
   463                                              </a>
   464                                            </td>
   465                                          </tr>
   466                                        </table>
   467                                      </td>
   468                                    </tr>
   469                                    {{end}}
   470                                  </tbody>
   471                                </table>
   472                              </div>
   473                              <!--[if mso | IE]></td></tr></table><![endif]-->
   474                            </div>
   475                            <!--[if mso | IE]></td></tr></table><![endif]-->
   476                          </td>
   477                        </tr>
   478                      </tbody>
   479                    </table>
   480                  </div>
   481                  <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
   482                </div>{{end}}
   483                <!--[if mso | IE]><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   484                <div style="margin:0px auto;max-width:552px;">
   485                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   486                    <tbody>
   487                      <tr>
   488                        <td style="direction:ltr;font-size:0px;padding:16px 0px 40px 0px;text-align:center;">
   489                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
   490                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   491                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   492                              <tbody>
   493                                <tr>
   494                                  <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
   495                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.NotificationFooterTitle}}</div>
   496                                  </td>
   497                                </tr>
   498                                <tr>
   499                                  <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
   500                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"><a href="{{.Props.SiteURL}}">{{.Props.NotificationFooterInfoLogin}}</a>{{.Props.NotificationFooterInfo}}</div>
   501                                  </td>
   502                                </tr>
   503                              </tbody>
   504                            </table>
   505                          </div>
   506                          <!--[if mso | IE]></td></tr></table><![endif]-->
   507                        </td>
   508                      </tr>
   509                    </tbody>
   510                  </table>
   511                </div>
   512                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   513                <div style="margin:0px auto;max-width:552px;">
   514                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
   515                    <tbody>
   516                      <tr>
   517                        <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
   518                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
   519                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
   520                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
   521                              <tbody>
   522                                <tr>
   523                                  <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
   524                                    <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
   525                                      {{.Props.FooterV2}}
   526                                    </div>
   527                                  </td>
   528                                </tr>
   529                              </tbody>
   530                            </table>
   531                          </div>
   532                          <!--[if mso | IE]></td></tr></table><![endif]-->
   533                        </td>
   534                      </tr>
   535                    </tbody>
   536                  </table>
   537                </div>
   538                <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
   539              </td>
   540            </tr>
   541          </tbody>
   542        </table>
   543      </div>
   544      <!--[if mso | IE]></td></tr></table><![endif]-->
   545    </div>
   546  </body>
   547  
   548  </html>
   549  
   550  {{end}}