{% extends '_partials/login-base.html.twig' %}

{% block body %}
<div class="d-flex">
    <div class="d-none d-lg-block col-6 p-0" style="background-image: url('{{ asset('assets/img/bg-3.jpg') }}');">

    </div>
    <div class="col-12 col-lg-6 p-0 d-flex flex-column justify-content-center align-items-center"  style="min-height: 100vh;">
        <div class="d-flex justify-content-end mb-5">
            <h1>Cards</h1>
        </div>
        <div class="d-flex flex-column flex-md-row flex-wrap justify-content-between w-75">
            {% for wallet in wallets %}
                {% for card in wallet.cards %}
                    <div class="card position-relative overflow-hidden mr-5 mb-5" style="width: 300px;height: 150px; border: 2px solid lightblue;">
                        <img class="position-absolute" width="200" src="{{ asset('assets/img/paynetics-symbol_v2.svg') }}" style="opacity: .1; right: -70px; top: -50px;" alt="Logo">
                        <div class="card-body d-flex flex-column justify-content-end  p-4">

                            {{ card.pan| default }}

                            <p class="text-uppercase font-weight-bold">{{ card.card_alias| default('No alias') }}</p>

                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="m-0">Type:</p>
                                    <p class="m-0">{{ card.is_virtual ? 'Virtual' : 'Plastic' }}</p>
                                </div>

                                <div>
                                    <p class="m-0">Valid:</p>
                                    <div class="d-flex">
                                        <p class="font-weight-bolder text-dark-75 m-0"> {{ card.exp_month| default }}</p> /
                                        <p class="font-weight-bolder text-dark-75 m-0">{{ card.exp_year| default }}</p>
                                    </div>
                                </div>

                                <div>
                                    <p class="m-0">Balance:</p>
                                    {% for balance in wallet.balances %}
                                        <div class="d-flex">
                                            <div class="mr-3">{{ balance.balance }} </div>
                                            <div>{{ balance.currency }}</div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}