<template lang="pug">
  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8
    .flex.flex-col.gap-y-6
      span.title-info.text-base.font-bold Паспортные данные
      .grid.grid-cols-2.gap-x-4.gap-y-6
        base-input(
          mask="#### ######",
          v-model="identityDocument.pass.series_number",
          placeholder="0000 000000",
          label="Серия и номер",
          outlined
        )
        base-input(
          v-model="identityDocument.pass.issued_by_org",
          placeholder="Точно как в паспорте",
          label="Кем выдан",
          outlined
        )
        base-input(
          mask="###-###",
          v-model="identityDocument.pass.issued_by_org_code",
          placeholder="000–000",
          label="Код подразделения",
          outlined
        )
        base-input(
          type="date"
          v-model="identityDocument.pass.issued_by_date",
          placeholder="Дата",
          label="Дата выдачи",
          outlined
        )
    .flex.flex-col.gap-y-6
      span.title-info.text-base.font-bold СНИЛС и ИНН
      .grid.grid-cols-2.gap-x-4.gap-y-6
        base-input(
          disabled,
          filled,
          mask="###-###-### ##",
          v-model="identityDocument.snils.number",
          placeholder="000–000–000 00",
          label="Номер СНИЛС"
        )
        base-input(
          disabled,
          filled,
          mask="############",
          v-model="identityDocument.inn.number",
          placeholder="000000000000",
          label="Номер ИНН"
        )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";

export default {
  name: "FormCreateIdentityDocuments",
  components: { BaseInput },
  props: {
    identityDocument: Object,
    saveClient: Function,
  },
};
</script>

<style lang="sass" scoped>
.wrapper-documents
  height: 338px
  overflow-y: auto
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track
    background-color: rgba(211, 212, 220, 0.5)
    border-radius: 8px
  &::-webkit-scrollbar-thumb
    border-radius: 8px
    background-color: var(--btn-blue-color)

.title-info
  color: var(--font-dark-blue-color)

.input-date
  border: 1.5px solid var(--border-light-grey-color)
</style>
