<template>
    <div class="bottom-margin-medium box-shadow-light rounded-large" :class="classObject">
        <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">
                        <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>

        <slot>
        </slot>
    </div>
</template>

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