<template>
  <div class="row no-wrap items-center w100">
    <div
      v-if="item1"
      class="second-line-item flex no-wrap items-center q-mr-sm"
      >
      <q-icon
        v-if="item1Icon"
        :name="item1Icon"
        :color="item1IconColor"
        class="q-mr-none"
      />
      <div 
        class="ellipsis"
        :class="item1Class ?? '' "
        >
        {{ item1 }}
      </div>
    </div>
    
    <div
      v-if="item2"
      class="second-line-item flex no-wrap items-center"
      >
      <q-icon
        v-if="item2Icon"
        :name="item2Icon"
        :color="item2IconColor"
        class="q-mr-none"
      />
      <div 
        class="ellipsis"
        :class="item2Class ?? '' "
        >
        {{ item2 }}
      </div>
    
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps<{
    item1: string | null
    item1Class?: string
    item1Icon?: string
    item1IconColor?: string
    item2: string | null
    item2Class?: string
    item2Icon?: string
    item2IconColor?: string
  }>()

</script>

<style scoped>
  .second-line-item {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 60%;
  }
</style>
