<%


if (THEME_OBJ && THEME_OBJ.isProThemeActive() === "Yes" && topBarHeight > 0) {
    header_padding = `style="padding-top: calc(${topBarHeight}px - 46px)"`;
    header_margin = 'style="margin-top:6rem"';
}

let href_return = decodeURIComponent(APP_RETURN_URL || "");
let onclick_event = "showOverlay()";
let payment_head_title = 'Credit Card';

if (page_type === "ADD_CARD") {
    payment_head_title = languageLabelsArr.LBL_ADD_CARD;

    if (userPaymentInfoData && userPaymentInfoData.length > 0) {
        href_return = "javascript:void(0);";
        onclick_event = "backToPaymentList()";
    }
} else if (page_type === "PAYMENT_LIST") {
    payment_head_title = 'payment_head_title';
}

let border_margin = "";

if (page_type === "CHARGE_OUTSTANDING_AMT" || APP_RETURN_URL) {
    border_margin = 'style="margin-left:40px"';
}
%>

<% if (THEME_OBJ && THEME_OBJ.isProThemeActive() === "Yes") { %>

<div class="row payment-header" <%- header_padding %>>
    <div class="col-lg-8 py-2 payment-header-content">

        <div class="payment-title">

            <% if (page_type === "CHARGE_OUTSTANDING_AMT" || APP_RETURN_URL) { %>

                <a class="text-reset float-left"
                   href="<%= href_return %>"
                   onclick=""
                   style="width:40px">

                    <img src="<%= tconfig.tsite_url %>views/payment/images/back.png">

                </a>

            <% } else { %>

                <span class="float-left" style="width:40px">&nbsp;</span>

            <% } %>

            <div class="mx-auto text-center">
               Credit  Card
            </div>

            <div id="close-action">

                <% if (systemType === "WEB") { %>

                    <a href="<%= cancelUrl %>&status=failure">
                        Close
                    </a>

                <% } else { %>

                    <a href="<%= failure_url %>?success=0&page_action=close">
                        Close
                    </a>

                <% } %>

            </div>

        </div>

        <div class="payment-title-border" <%- border_margin %>></div>

    </div>
</div>

<% } else { %>

<div class="row payment-header">

    <div class="col-lg-8 mx-auto text-center">

        <h1 class="display-4 payment-title">

            <% if (page_type === "CHARGE_OUTSTANDING_AMT" || APP_RETURN_URL) { %>

                <a class="mr-1 text-reset"
                   href="<%= href_return %>"
                   onclick=""
                   style="padding-right:15px;">

                    <i class="fas fa-chevron-left"></i>

                </a>

            <% } %>

            <%= payment_head_title %>

            <span class="float-right" id="close-action">

                <a href="<%= failure_url %>?success=0&page_action=close">

                    <img src="<%= tconfig.tsite_url %>views/payment/images/quit.svg">

                </a>

            </span>

        </h1>

        <div class="payment-title-border" <%- border_margin %>></div>

    </div>

</div>

<% } %>