<template>
  <div class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="d-flex flex-column flex-md-row flex-shrink-0 gap-3 align-items-center">
      <div class="text-decoration-none text-dark"><i class="pli-information fs-5"></i></div>
    </div>
    <div class="flex-fill min-w-0 ms-3">
      <div class="d-flex flex-wrap flex-xl-nowrap align-items-xl-center">
        <div class="w-md-160px flex-shrink-0">
          <div class="h6 fw-normal m-0 text-decoration-none">{{ label }}</div>
        </div>
        <div class="flex-fill w-100 min-w-0 mt-2 mt-xl-0 mx-xl-3 order-xl-2">
          <div class="d-block h6 fw-normal m-0 text-decoration-none text-truncate">
            {{ value == null || value == "" ? '-' : value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.list-group-item {
  border: none;
}
</style>
<script setup lang="ts">
const props = defineProps({
  label: {
    type: String,
    required: true,
  },
  value: {
    type: String,
    required: true,
  },
});
</script>
