{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Horilla News Letter Design</title>

  <style>
    body {
      margin: 0;
      background-color: #e5e5e5;
    }

    table {
      border-spacing: 0;
    }

    td {
      padding: 0;
    }

    img {
      border: 0;
    }

    .hr-wrapper {
      width: 100%;
      table-layout: fixed;
      background-color: #e5e5e5;
      padding-bottom: 60px;
    }

    .hr-table-main {
      background-color: #fff;
      margin: 0 auto;
      width: 100%;
      max-width: 650px;
      border-spacing: 0;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      color: #1c1c1c;
      margin-top: 15px;
    }

    .hr-table-main__header {
      table-layout: fixed;
      padding: 15px;
      width: 100%;
    }

    .hr-link {
      color: #6f6f6f;
      font-size: 12px;
    }

    .hr-callout-table {
      table-layout: fixed;
      width: 100%;
      border: 1px solid #f0f0f0;
      font-size: 14px;
    }

    .hr-callout-table td {
      padding: 10px;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <center class="hr-wrapper">
    <table class="hr-table-main" width="100%" style="margin-top:60px ;">
      <tr>
        <td>
          <table class="hr-table-main__header">
            <tr>
              <td style="width: 50%">
                <img src="{{protocol}}://{{ host }}{% static '/images/ui/horilla-logo.png' %}" height="30" width="110.4" />
              </td>
              <td style="width: 50%; text-align: right">
                <a href="#" class="hr-link">View in browser</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td align="center" style="padding-top:20px;padding-bottom: 20px ;">
          <img
            src="https://ci3.googleusercontent.com/meips/ADKq_NZzfB2Yeamia3PRl_MPY2l5X-HKt_GdWTuHkHyUh4s8jl9IFTbklpAOA-tF3RxEN2nsK759vl1ak1ZOroD08dPnWxnWvqmXUiB209X05-AMQwPCCzM-yu5L4EfrVOE4435gYyWmY4yo4CEMOi0nA9cvN18Pd9wYHnxxGg=s0-d-e1-ft#https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6506/1882ba7c-c779-44c4-9642-99e296fb98be.png"
            style="display:block;height:auto;border:0;width:20%" width="272" title="donation box" class="CToWUd"
            data-bit="iit">
        </td>
      </tr>
      <tr>
        <td style="padding:15px 25px 0 25px; font-size: 24px;" align="center">
          <strong>Hello {{record.instances.0.get_name}}, Your Payslips are ready!</strong>
        </td>
      </tr>
      <tr>
        <td align="center" style="padding-top: 0px;">
          <p style="width: 95%;">
            Hi, {{record.instances.0.get_name}}. You got {{record.count}} attachments of payslips,<br> Have a good day.
          </p>
        </td>
      </tr>
      <tr>
        <td style="padding: 15px" align="center">
          <a href="{{protocol}}://{{ host }}{% url "view-payslip" %}" style="
                background-color: #e54f37;
                color: #fff;
                border-radius: 10px;
                display: inline-block;
                padding: 15px 25px;
                text-decoration: none;
                font-weight: bold;
              ">View Payslips</a>
        </td>
      </tr>


      <tr>
        <td align="center" style="
              padding-left: 15px;
              padding-right: 15px;
              padding-top: 30px;
              padding-bottom: 15px;
              color: #5c5c5c;
              font-size: 12px;
            ">
          This mail was sent you because your email has been enrolled as an
          employee at {{record.instances.0.get_company}}.<br />
          Don't want to receive mails like these anymore?
          <a href="#" style="color: #5c5c5c">Unsubscribe here</a>.
        </td>
      </tr>
      <tr>
        <td align="center" style="
              padding-left: 15px;
              padding-right: 15px;
              padding-bottom: 10px;
              padding-top: 10px;
              color: #5c5c5c;
              {% comment %} background-color: #e54f37; {% endcomment %}
              font-size: 12px;
            ">
          &copy; 2024 Horilla, Inc.
        </td>
      </tr>
    </table>
  </center>
</body>

</html>
