{% 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}}/{{instance.get_company.icon}}"
                                        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="{{protocol}}://{{host}}{% static '/images/ui/leave.svg' %}"
                            style="
                                display: block;
                                height: auto;
                                border: 0;
                                width: 20%;
                            "
                            width="272"
                        />
                    </td>
                </tr>
                <tr>
                    <td
                        style="padding: 15px 25px 0 25px; font-size: 24px"
                        align="center"
                    >
                        <strong
                            >Hello {{ instance.get_full_name }},
                            {{subject}}!</strong
                        >
                    </td>
                </tr>
                <tr>
                    <td align="center" style="padding-top: 0px">
                        <p style="width: 90%">{{content}}</p>
                    </td>
                </tr>
                {% if link != "#" %}
                <tr>
                    <td style="padding: 15px" align="center">
                        <a
                            href="{{protocol}}://{{host}}/leave/request-view/?id={{link}}"
                            style="
                                background-color: #e54f37;
                                color: #fff;
                                border-radius: 10px;
                                display: inline-block;
                                padding: 15px 25px;
                                text-decoration: none;
                                font-weight: bold;
                            "
                            >View Leave Request</a
                        >
                    </td>
                </tr>
                {% endif %}

                <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 {{instance.recruitment_id.company_id.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;
                            font-size: 12px;
                        "
                    >
                        &copy; 2024 Horilla, Inc.
                    </td>
                </tr>
            </table>
        </center>
    </body>
</html>
