<template>
    <div class="row h-100 align-items-center text-center">
        <div class="absolute w-100 parentContainer" style="top:0px;" v-if="!primary && item.short_code !== 'RMB' && deleteable">
            <div class="row">
                <div class="col"></div>
                <div class="col-auto p-r-0" >
                    <div class="icon-thumbnail pointer hint-text fs-10 icon-25 bg-master-lighter requestModal" data-type="deleteCurrency">
                        <i class="fa fa-times fs-10 m-b-5"></i>
                    </div>
                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteCurrency">
                        <delete-currency-form-component :data="item" :section="section"></delete-currency-form-component>
                    </modal-component>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="m-b-10"><span class="flag-icon fs-40" :class="'flag-icon-'+item.country.short_code.toLowerCase()"></span></div>
            <div class="font-heading bold">{{this.item.short_code}}</div>
            <div class="font-heading fs-10 all-caps">{{this.item.country.name}}</div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    export default {
        props: {
            primary: {
                type: Boolean,
                default: false
            },
            deleteable: {
                type: Boolean,
                default: true
            }
        },
        mixins: [componentHandler, ModalFormHandler]
    }
</script>
