<i18n>
{
  "en": {
    "BasicCard": {
      "confirmation": "Confirmation",
      "delete": "Delete",
      "fullName": "Full name",
      "shortName": "Short name",
      "description": "Description",
      "edit": "Edit",
      "questionToDelete": "Are you sure you want to delete the solution?",
      "tab": "Basic data",
      "title": "Solution card",
      "yes": "Yes"
    }
  },
  "ru": {
    "BasicCard": {
      "confirmation": "Подтвердите",
      "delete": "Удалить",
      "fullName": "Полное название",
      "shortName": "Короткое название",
      "description": "Описание",
      "edit": "Редактировать",
      "questionToDelete": "Вы действительно хотите удалить приложение?",
      "tab": "Основные данные",
      "title": "Карточка приложения",
      "yes": "Да"
    }
  }
}
</i18n>

<template>
  <div v-if="common.active === 'basic'" class="q-pb-md">
    <q-card v-if="!loading" class="no-shadow q-pb-md q-gutter-y-md q-mx-md">
      <div
        class="items-center justify-between row q-pa-md"
        style="border-radius: 0"
      >
        <div class="q-gutter-y-md full-width">
          <table class="text-primary">
            <tr v-if="solutionFullName">
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('BasicCard.fullName') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ solutionFullName }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr v-if="solutionShortName">
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('BasicCard.shortName') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ solutionShortName }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr v-if="solutionDescription">
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('BasicCard.description') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ solutionDescription }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </q-card>
    <q-inner-loading :showing="loading">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['common', 'model'],
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    solutionFullName() {
      return this.model?.name || '';
    },
    solutionShortName() {
      return this.model?.shortname || '';
    },
    solutionDescription() {
      return this.model?.description || '';
    },
  },
};
</script>
