<div class="section--main-slider">
  <div class="slide empty" style="background-image: url(<?= THEME_PATH ?>/static/images/slider/[email protected]);">
  </div>
</div>
<div class="section--profile-content landing-block">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-6 d-flex justify-content-center">
          <div class="row">
        <?php if($pm_maintaince_mode==true){ ?>
        <h3 class="text-center red">
          <?php esc_html_e( 'We are currently doing maintenance to our payment system. Please come back later.', 'pickatale-membership' ); ?>
          </h2>
        <?php }else{ ?>
            <style type="text/css">
                #container-3ds-authentication{
                    margin-top:40px;
                }
                .three-d-secure-auth-container {
                    display: none;
                    height: 400px;
                    width: 100%;
                }
                .three-d-secure-auth-container div {
                    height: 100%;
                }
                .three-d-secure-submitting-messagge {
                    display: none;
                }
                .errors {
                    background: #f81b4e;
                    border-radius: 5px;
                    color: #fff;
                    line-height: 1.2;
                    margin-bottom: 10px;
                    padding: 15px;
                }
            </style>
            <p class="col-12">Step 2 of 2</p>
            <h3 class="red text-center col-12 info">Your bank requires authentication using 3D Secure.</h3>
            <section class="col-12">
            <form id="pm-recurly-form-3ds" method="post" action="<?php echo esc_url( get_permalink( get_queried_object_id() ) ); ?>subscription/pay/">
                <div id="container-3ds-authentication" class="three-d-secure-auth-container col-12 " ></div>
                <div class="three-d-secure-submitting-messagge col-12">
                Authenticating your payment method...
                </div>
                <?php wp_nonce_field( 'pm-register-subscription-nonce' ); ?>
                <input type="hidden" name="pm-form-request" value="register-subscription" />
                <input type="hidden" name="pm-price-plan" value="<?php echo esc_attr( $pm_price_plan ); ?>">
                <input type="hidden" name="three-d-secure-token" id="three-d-secure-token" value="">
                <input type="hidden" name="recurly-token" id="recurly-token" value="">
            </form>
            </section>
            <section id="errors" class="errors col-12 text-center" style="margin-top:30px;"></section>
      <?php } ?>
            </div>
    </div>
  </div>
</div>
</div>