<template>
    <div class="bottom-margin-medium box-shadow-light rounded-large" :class="classObject">
        <template v-if="isDinamic">
            <div class="header-base-listing flex-column">
                <div class="flex full-width middle-xs">
                    <div class="flex full-width between-xs middle-xs">
                        <div class="base-listing-separation flex middle-xs">
                            <span v-if="showicon" class="base-listing-icon right-margin-small">
                                <i :class="icon"></i>
                            </span>
                            <div>
                                <span :class="`base-listing-subTitle ${titleSize}`" v-text="subtitle"></span>
                                <span style="font-weight: bold;" :class="`text-dark-opacity ${titleSize}`" v-text="subtitlevalue"></span>
                            </div>
                        </div>
                        <div class="base-listing-separation">
                            <a href="#" @click.prevent="onLink($event)" class="text-medium-link" :class="`base-listing-subTitle ${titleSize}`" v-text="subtitlesecond" title="Clique aqui para visualizar"></a>
                            <span style="font-weight: bold;" :class="`text-dark-opacity ${titleSize}`"
                                v-text="subtitlesecondvalue"></span>
                        </div>
                    </div>
                </div>
                <div class="base-listing-division"></div>
            </div>
        </template>
        <template v-else>
            <div class="header-base-listing flex-column" :style="showicon ? 'cursor: pointer' : ''"
                @click="handleCardClick($event)">
                <div class="flex full-width middle-xs">
                    <div class="flex full-width between-xs middle-xs">
                        <div class="base-listing-separation flex middle-xs">
                            <span v-if="showicon" class="base-listing-icon right-margin-small">
                                <div :class="showContent ? 'rotate-arrow open' : 'rotate-arrow'">
                                    <i :class="icon"></i>
                                </div>
                            </span>
                            <div>
                                <span :class="`base-listing-subTitle ${titleSize}`" v-text="subtitle"></span>
                                <span style="font-weight: bold;" :class="`text-dark-opacity ${titleSize}`" v-text="subtitlevalue"></span>
                            </div>
                        </div>
                        <div class="base-listing-separation nowrap-xs">
                            <span :class="`base-listing-subTitle ${titleSize}`" v-text="subtitlesecond"></span>
                            <span style="font-weight: bold;" :class="`text-dark-opacity ${titleSize}`"
                                v-text="subtitlesecondvalue"></span>
                        </div>
                    </div>
                </div>
                <div class="base-listing-division"></div>
            </div>
        </template>    
        <slot>
        </slot>
    </div>
</template>

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