.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(
:class="{'pl-6px collapsed-name': expandedTime}"
) {{trimPatientName(record?.member?.last_name, record?.member?.first_name, record?.member?.patronymic)}}
.gradient.absolute.w-5.h-full.right-0(v-if="expandedTime")
.info-block.justify-center
img.w-5.h-5(:src="recordingStatus?.icon")
.last-item.info-block.justify-center(v-if="expandedType")
img.w-5.h-5(:src="medicalСardStatus?.icon")
.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 {{ contact.value }}
.h-6.w-6.color-black.background-dark-grey.text-xxs.rounded.flex.items-center.justify-center(
v-if="collapsedDisplayCondition"
) +1
span.text-xxs.self-end(v-if="record?.services.length && bodyClass?.['flex-col']") {{`${record?.services.length} услуг`}}