{% extends 'modals/modal-base.html.twig' %}

{% block modal_classes %}plan-modal{% endblock %}
{% block modal_title %}2FAS PREMIUM Credit Card Redirect{% endblock %}
{% block modal_body %}
    <div class="modal-body update-card-before">
        <div class="spinner-container">
            <div class="spinner-circle">
                <div class="sk-circle1 sk-circle"></div>
                <div class="sk-circle2 sk-circle"></div>
                <div class="sk-circle3 sk-circle"></div>
                <div class="sk-circle4 sk-circle"></div>
                <div class="sk-circle5 sk-circle"></div>
                <div class="sk-circle6 sk-circle"></div>
                <div class="sk-circle7 sk-circle"></div>
                <div class="sk-circle8 sk-circle"></div>
                <div class="sk-circle9 sk-circle"></div>
                <div class="sk-circle10 sk-circle"></div>
                <div class="sk-circle11 sk-circle"></div>
                <div class="sk-circle12 sk-circle"></div>
            </div>
        </div>
        <div class="content-container">
            <div class="text-content">
                <p>
                    <span class="line">
                        After clicking <strong>continue</strong> button you will be redirected to
                    </span>
                    <span class="line">
                        2FAS website to change your credit card data.
                    </span>
                </p>
                <img src="{{ assets_url }}images/logo.png" class="modal-logo" alt="2FAS Logo">
            </div>
            <div class="buttons">
                <a href="#" class="twofas-btn cancel-btn js-close-modal js-close-plan-modal">CANCEL</a>
                <a href="https://dashboard.2fas.com/#/login" class="twofas-btn action-btn js-plan-redirect" target="_blank">CONTINUE TO 2FAS.COM</a>
            </div>
        </div>
        <div class="clear-fix"></div>
    </div>
    <div class="modal-body update-card-after hidden">
        <div class="content-container without-spinner">
            <div class="text-content">
                <p>
                    <span class="line">
                        Click OK button when you complete changing credit card data
                    </span>
                </p>
            </div>
            <div class="buttons">
                <a href="#" class="twofas-btn action-btn js-close-cc-complete js-waiting-link">
                    <span>OK</span>

                    <span class="spinner_button">
                        <span class="bounce1"></span>
                        <span class="bounce2"></span>
                        <span class="bounce3"></span>
                    </span>
                </a>
            </div>
        </div>
        <div class="clear-fix"></div>
    </div>
{% endblock %}