{% extends "emails/base.html" %}
{% load staticfiles %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load mathfilters %}
{% block email_greeting %}
<tr>
    <td align="center" class="mobile" style="font-family: 'Lato', sans-serif; font-size:17px; line-height:21px; color:#ffffff;font-weight: bold;letter-spacing: normal; margin-bottom: 26px;">
        Psngr
    </td>
</tr>
<tr>
    <td height="26px" style="line-height:26px; font-size:26px;">&nbsp;</td>
</tr>
{% endblock %}


{% block email_body %}
<!-- Start Wrapper -->
<table style="max-width:640px; width: 100%;" cellpadding="0" cellspacing="0" border="0" class="wrapper">
    <tr>
      <td>
          {% trans "Here's your code!" as titleOTP %}
          {% include 'emails/_parts/mail_title_container.html' with title=titleOTP %}
      </td>
    </tr>
    <tr>
        <td align="center" bgcolor="#ffffff">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center">
                {% trans 'You are receiving this email because there has been a sign-in attempt to your Psngr account and you have enabled 2-factor authentication. ' as subtitleStr %}
                {% trans 'If you are attempting to sign-in, please use the following code to confirm your identity: ' as subtitleStr2 %}
                {% with titleStr="Hi "|add:first_name %}
                    {% include 'emails/_parts/welcome_container.html' with title=titleStr subtitle=subtitleStr subtitle2=subtitleStr2%}
                {% endwith %}
            </table>
            <table width="100%" cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center">
              <tr>
                <td align="center">
                  <div width="70%" bgcolor="#ffffff" style="margin-top: 30px; margin-bottom: 20px; align-content: center">
                        <span align="center" valign="middle" style="font-family: 'Lato', sans-serif; font-size: 22px; border-radius: 6px; color: #24b646; border: 1px solid #24b646;line-height:24px;background-color: #ffffff;width: 180px;padding: 9px; margin-right: 20px;height: 100px;border-style: dashed;font-weight: bold;">
                            {{otp}}
                        </span>
                  </div>
                </td>
              </tr>
          </table>
          <div  align="center" style="font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 500; padding-bottom: 15px; padding-top: 20px;height: 400px;">
            <div align="left" style="font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 500;color: #333333; margin-top: 10px;">
                <span style="margin-bottom: 10px !important;">{% trans 'Here are the details of the sign-in attempt:' %}</span><br><br>
                <span style="margin-bottom: 10px !important;">{% trans 'Date & time:' %} <strong>{{ login_details.date }} </strong></span><br>
                <span style="margin-bottom: 10px !important;">{% trans 'Account:' %} <strong>{{email}}</strong></span><br>
                <span style="margin-bottom: 10px !important;">{% trans 'Location:' %} <strong>{{login_details.country_details.country_code}}</strong></span><br>
                <span style="margin-bottom: 10px !important;">{% trans 'IP address:' %} <strong>{{login_details.ip_address}}</strong></span><br>
                <span style="margin-bottom: 10px !important;">{% trans 'Browser:'%} <strong>{{login_details.browser}}</strong></span><br>
            </div>
            <div align="left" style="font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 500;color: #333333; margin-top: 30px;">
              {% trans "If this wasn't you, please reset your password. Like always, if you have any questions please respond to this email to open a support ticket." %}
            </div>
          </div>
        </td>
    </tr>
</table>
{% endblock %}