{% set method = payment.paymentMethod %}

<style>
    .stripe-payment {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    
        .stripe-amount {
            font-weight: bold;
            font-size: 1.2em;
        }
    
        .stripe-status {
            height: .75rem;
            width: .75rem;
            flex-shrink: 0;
            border-radius: 50%;
            background-color: var(--disabled-color);
        
            &.succeeded {
                background-color: var(--enabled-color);
            }
        }
    
        .payment-method {
        
            .icon {
                grid-area: icon;
                width: 40px;
            
                img {
                    border-radius: 5px;
                }
            }
            
            &.card {
                display: flex;
                align-items: center;
                padding: var(--s);
                gap: 5px;

                .brand {
                    grid-area: brand;
                    font-weight: bold;
                }

                .card-number {
                    grid-area: card-number;
                    font-size: 0.9em;
                    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
                    margin-left: 5px;

                    &:before {
                        content: "•••• ";
                    }
                }
            }
        }
    }
</style>

<div class="stripe-payment">
    <div class="stripe-status {{ payment.status }}" title="{{ payment.status|replace('_', ' ')|capitalize|t('freeform') }}">
    </div>
    <div>
        <a href="{{ payment.link }}" target="_blank">
            {{ amount }} {{ currency|upper }}
            <span class="icon-link-ext"></span>
        </a>
    </div>
    {% if paymentMethod %}
        <div class="payment-method card">

            {% if paymentMethod.type == "card" %}

                <div class="icon">
                    {% if paymentMethodIcon %}
                        <img src="{{ paymentMethodIcon }}" alt="Payment Method Icon" title="{{ paymentMethod.details.brand }}">
                    {% endif %}
                </div>
                <div class="card-number">
                    {{ paymentMethod.details.last4 }}
                </div>

            {% elseif paymentMethodIcon %}

                <div class="icon">
                    <img src="{{ paymentMethodIcon }}"
                         title="{{ paymentMethod.type }}"
                         alt="Payment Method Icon"
                         class="{{ paymentMethod.type }}"
                    />
                </div>
                <div class="brand">
                    {{ paymentMethod.type|replace('_', ' ')|title|t('freeform') }}
                </div>

            {% else %}

                <div class="brand">
                    {{ paymentMethod.type|replace('_', ' ')|title|t('freeform') }}
                </div>

            {% endif %}

        </div>

    {% endif %}

</div>