<!--
/**
 *                       ######
 *                       ######
 * ############    ####( ######  #####. ######  ############   ############
 * #############  #####( ######  #####. ######  #############  #############
 *        ######  #####( ######  #####. ######  #####  ######  #####  ######
 * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
 * ###### ######  #####( ######  #####. ######  #####          #####  ######
 * #############  #############  #############  #############  #####  ######
 *  ############   ############  #############   ############  #####  ######
 *                                      ######
 *                               #############
 *                               ############
 *
 * Adyen Payment module (https://www.adyen.com/)
 *
 * Copyright (c) 2020 Adyen BV (https://www.adyen.com/)
 * See LICENSE.txt for license details.
 *
 * Author: Adyen <magento@adyen.com>
 */
-->

<!-- TODO check if it can be outsources to an adyen-methods template to be used by all the methods-->
<div id="ActionWrapper">
    <div id="ActionModal">
        <div id="ActionContainer"></div>
    </div>
</div>

<!-- ko foreach: adyenPaymentMethods -->
    <div class="payment-method" data-bind="css: {'_active': (brandCode == $parent.isBrandCodeChecked())}">
        <div class="payment-method-title field choice">

            <input type="radio"
                   name="payment[method]"
                   class="radio"
                   data-bind="attr: {'id': 'adyen_' + brandCode}, value: 'adyen_' + brandCode, checked: brandCode == $parent.isBrandCodeChecked, click: $parent.selectPaymentMethodBrandCode"/>
            <label data-bind="attr: {'for': 'adyen_' + brandCode}" class="label">

                <!-- ko if: icon -->
                <img data-bind="attr: {
                            'src': icon.url
                            }">
                <!--/ko-->

                <span data-bind="text: name"></span>
            </label>
        </div>
        <div class="payment-method-content">


            <!-- ko foreach: $parent.getRegion(getMessageName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
            <div>
                <span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + brandCode}"></span>
            </div>

            <div class="payment-method-billing-address">
                <!-- ko foreach: $parents[1].getRegion($parent.getBillingAddressFormName()) -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!--/ko-->
            </div>

            <form class="form" data-role="adyen-hpp-form" action="#" method="post"
                  data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + brandCode}">
                <fieldset class="fieldset"
                          data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + brandCode}'>
                    <div data-bind='attr: {id: "adyen-alternative-payment-container-" + brandCode}'
                         afterRender="renderCheckoutComponent()"></div>
                </fieldset>

                <div class="checkout-agreements-block">
                    <!-- ko foreach: $parents[1].getRegion('before-place-order') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!--/ko-->
                </div>

                <div class="actions-toolbar">
                    <div class="primary">
                        <button class="action primary checkout"
                                type="submit"
                                data-bind="
                                    click: continueToAdyenBrandCode,
                                    enable: placeOrderAllowed() && (brandCode == $parent.isBrandCodeChecked()),
                                    css: {disabled: !$parent.isPlaceOrderActionAllowed()}"
                                disabled>
                            <span data-bind="text: $t('Place Order')"></span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
<!--/ko-->