{% extends "mnfapp/base.html" %}
{% load static %}
{% block content %}
    <style>
        
        .thanks{
            position: absolute;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
            width:800px;
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        }
        
        h3{
        
            margin-top:30px;
        }
        .page-container3{
            display: flex;
            width: 80vw;
            margin:auto;
        }
        .input{
            display: flex;
        }
        .input input{
            margin-left: 0.3em;
            margin-right: 0.3em;
        }
        .page-container3{
            margin-top:1em;
            margin-bottom: 1em;
            border: solid black 1px;
            padding: 1em;
        }

        .privilege-thankyou-img {
height: 320px;
}
    </style>

{% if user.is_authenticated %}
{%if pId%}
<div class="thanks">
    <img src={% static 'media/privilege/popup-image-thankyou.png' %} alt="Thankyou img" class="privilege-thankyou-img" />
    <h1 style="font-size: 1.8rem; color: #252525; text-align: center; margin-top: 2rem;">Thanks user, you may now enjoy all our services</h1>
    <h3  style="font-size: 1.4rem; color: #616161; text-align: center; margin-top: 0;">Payment Id is {{pId}}</h3><br>
    {% if isSubscription %}
    {% if expiry %}
    <h3 style="font-size: 1.4rem; color: #616161; text-align: center; margin-top: 0;">Hurray!! your Subcription extended till <span style="color: #252525; font-weight: 600;">{{expiry}}</span></h3>
    {% endif %}
    {% endif %}
</div>
    <script>
        window.onload = function() {
                var newURL = "/pay/payment";
                window.history.pushState({path:newURL},'',newURL);
            }
    </script>

{%endif%}
{%endif%}
{%endblock%}