{% 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">
    {% trans "Here's your code!" as titleOTP %}
    {% include 'emails/_parts/mail_title_container.html' with title=titleOTP %}
    <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">
              <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>
            </table>
          <div align="center" style="font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 500; padding-bottom: 15px; padding-top: 20px; width: 84%; margin-left: 8%;margin-right: 8%;height: 300px;">
            <ul align="center" style="list-style:none; text-align: left; margin: 0px; padding: 0px; color: #333333;">
              <li style="margin:0 0 10px 0;">{% trans 'Here are the details of the sign-in attempt:' %}</li>
              <li style="margin:0 0 10px 0;">{% trans 'Date & time:' %} <strong>{{ login_details.date }} </strong><li>
              <li style="margin:0 0 10px 0;">{% trans 'Account:' %} <strong>{{email}}</strong></li>
              <li style="margin:0 0 10px 0;">{% trans 'Location:' %} <strong>{{login_details.country_details.country_code}}</strong></li>
              <li style="margin:0 0 10px 0;">{% trans 'IP address:' %} <strong>{{login_details.ip_address}}</strong></li>
              {% if login_details.device != 'Other' %}
                <li style="margin:0 0 10px 0;">{% trans 'Device:' %} <strong>{{login_details.device}}</strong></li>
              {% else %}
                <li style="margin:0 0 10px 0;">{% trans 'Operating system:' %} <strong>{{login_details.os}}</strong></li>
              {% endif %}
              <li style="margin:0 0 10px 0;">{% trans 'Browser:'%} <strong>{{login_details.browser}}</strong></li>
            </ul>
                <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 %}