{extends file=$layout}

{block name='content'}
    <style>
        .box-pm {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

        .title {
            margin-bottom: 30px;
        }

        .pm {
            margin: 0 .8125rem;
        }

        .pm-content {
            position: relative;
            margin-bottom: 1.563rem;
            height: 165px;
            width: 161px;
            background: #fff;
            box-shadow: 2px 2px 8px 0 rgb(0 0 0 / 20%)
        }

        .pm-content:hover {
            border: 1px solid green
        }

        .pm-logo {

            max-height: 50%;
            max-width: 65%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .pm-description {
            bottom: 1.25rem;
            padding-top: .625rem;
            z-index: 2;
            text-align: center;
            height: 3.125rem;
            transition: bottom .3s;
            color: black;
        }

        .hidden {
            display: none;
        }

        .pbl_loading-content {
            background: #fbfbfb none;
            border: 1px solid #d6d4d4;
            border-radius: 4px;
            transform: translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
            color: black;
            padding: 20px;
        }

        #pbl_loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 50000;
            background: rgba(0, 0, 0, .5)
        }
    </style>
    <section class="clearfix" style="display:block">
        <h2 class="h3 text-uppercase title">
            {l s='Choose payment channel' mod='imoje'}
        </h2>
        <div class="box-pm row">
            <div id="pbl_loading" class="hidden">
                <div class="pbl_loading-content">
                    <img id="loading-gif" src="{$loading_gif}" alt="{l s='Loading' mod='imoje'}"
                         style="display: block; margin-left: auto; margin-right: auto;"/><br/>
                    {l s='Please wait, you will be redirected to next step.' mod='imoje'}
                </div>
            </div>

            {foreach from=$payment_method_list key=id item=payment_method}
                <div class="pm">
                    <a class="pm-link"
                       href="{$payment_link}?pm={$payment_method.paymentMethod}&pmc={$payment_method.paymentMethodCode}">
                        <div class="pm-content">

                            {if $payment_method.logo}
                                <img class="pm-logo" src="{$payment_method.logo}"
                                     alt="{$payment_method.description}">
                            {/if}
                            <div class="pm-description">
                                <p>
                                    {$payment_method.description}
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            {/foreach}
        </div>
    </section>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function (event) {

            $('.pm-link').click(function () {
                $('#pbl_loading').removeClass('hidden');

            });
        })
    </script>
{/block}