.section-wrapper.flex.flex-col.h-fit.cursor-pointer(@dblclick="openInterfaceChange" :class="{click:isOpenChange}" :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}")
.section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
.flex.items-center.gap-x-8(v-if="isOpenChange")
base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
.edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
.flex.relative
base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true" @click="openAddingWrap")
table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
.section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
.flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange" :style="{fontWeight:key === 'numba'&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width")
.copy.icon-copy.cursor-pointer(v-if="item.copy" @click="() => copyValue(item)")
.flex(v-if="settings[section].options && !isChange")
span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}}
.copy.icon-copy.cursor-pointer.pl-4(v-if="key === 'numba'" @click="() => copyValue(item)")
.flex(v-if="item.value && !isChange")
span.text-sm.w-fit {{item.value}}
.flex.items-center(v-if="item.name")
.icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.name" @click="(e) => deleteDoc(e, section)")
.icon-files.cursor-pointer.pr-3.text-xl(:style="{color:settings.docsColor[item.type]}")
span.text-sm {{item.name}}