.card-wrapper.flex.gap-y-2px.flex-col.absolute
.header.w-full.flex.gap-x-2px.text-sm
.first-item.color-black.justify-center.gap-x-2(:class="timeClass")
span.font-semibold.color-black(v-if="expandedType || expandedTime") {{ recordTime }}
q-icon.cursor-pointer.arrow-icon(
name="app:left-arrow",
size="16px",
v-if="expandedTime",
@click.stop="changeTimeDisplay(false)"
)
q-icon.cursor-pointer.time-icon(
v-if="!expandedType && !expandedTime",
name="app:time",
size="20px",
@click.stop="changeTimeDisplay(true)"
)
.color-black.pl-4.flex-1.font-semibold.py-6px.relative.cursor-default(
:class="{'pl-6px collapsed-name': expandedTime}"
) {{trimPatientName(record?.person?.last_name, record?.person?.first_name, record?.person?.patronymic)}}
.gradient.absolute.w-5.h-full.right-0(v-if="expandedTime")
.info-block.justify-center(v-if="expandedType")
q-icon(
:name="record?.person?.has_medical_card ? 'app:medcard-green' : 'app:medcard'",
size="20px",
)
.last-item.info-block.justify-center
.recording-status(:class="recordingStatus?.class")
.body.background-grey.flex.flex-col.justify-between.pl-4.pr-2.color-grey(
:style="bodyHeight",
:class="bodyPadding"
)
.flex.gap-x-14(:class="bodyClass")
.flex.gap-x-2.items-center(
v-for="contact in contacts",
:key="contact?.value",
)
q-icon.network-icon(:name="contact?.icon", size="16px")
.text-xxs.cursor-default {{ contact?.value }}
.h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center.cursor-default(
v-if="collapsedDisplayCondition && contact"
) +1