<template>
    <div class="popover-container">
        <span class="popover-table-price">
            <span :class="is_admin ? 'text-price-admin' : 'text-price'" id="text">Ver parcelas disponiveis <i class="fa fa-chevron-down"></i></span>
            <div id="tooltip" class="popover-content">
                <h4>Ver parcelas disponiveis</h4>
                <p>Você poderá escolher o número de parcelas na hora de fechar a compra.</p>
                <table>
                    <thead>
                        <tr>
                            <th>Prazo</th>
                            <th>Valor Mensal (R$)</th>
                            <th>Total (R$)</th>
                        </tr>
                    </thead>
                    <tbody v-if="data.amount_parcels && data.parcel_with_no_fees">
                        <tr v-for="(parcel, index) in data.parcels">
                            <th>{{ index + 1 }}x {{ (index + 1) > data.parcel_with_no_fees ? 'com juros' : 'sem juros' }} </th>
                            <th>{{ parcel.value }}</th>
                            <th>{{ parcel.total }}</th>
                        </tr>
                    </tbody>
                </table>
                <div id="arrow" data-popper-arrow></div>
            </div>
        </span>
    </div>
</template>



<script src="./scripts.js"></script>
<style src="./styles.css" scoped></style>