<template>
  <div :class="['has-text-dark', (modal)?'box p-0 mb-0':'']">

    <div class="p-4" v-if="modal">
      <h1 class="title is-4">{{ $t('text.basic_data') }}</h1>
      <h2 class="subtitle is-6" >{{obj.id}}</h2>
    </div>

    <template v-if="obj.id">
      <section class="p-3">
        <b-field :label="$t('text.code')">
          <span>{{ obj.code }}</span>
        </b-field>

        <b-field :label="$t('text.description')">
          <span>{{ obj.description }}</span>
        </b-field>
      </section>

      <section class="has-background-light p-3">
        <b-field :label="$t('text.create_at')">
          <span>{{ obj.createdDate | moment("calendar") }}</span>
        </b-field>

        <b-field :label="$t('text.create_by')">
          <span class="image is-24x24 is-pulled-left mr-2">
            <v-gravatar class="is-rounded" :email="obj.createdUser" :size="24" default-img="mm"/>
          </span>
          <span>{{ obj.createdUser }}</span>
        </b-field>

        <b-field :label="$t('text.update_at')">
          <span>{{ obj.modifiedDate | moment("calendar") }}</span>
        </b-field>

        <b-field :label="$t('text.update_by')">
          <span class="image is-24x24 is-pulled-left mr-2">
            <v-gravatar class="is-rounded" :email="obj.modifiedUser" :size="24" default-img="mm"/>
          </span>
          <span>{{ obj.modifiedUser }}</span>
        </b-field>
      </section>

      <section class="p-3">
        <b-field grouped>
          <b-field :label="$t('text.version')">
            <span>{{ obj.version }}</span>
          </b-field>

          <b-field :label="$t('text.deleted')">
            <b-tag type="is-danger" v-if="obj.deleted">{{ $t('text.yes') }}</b-tag>
            <b-tag v-else>{{ $t('text.no') }}</b-tag>
          </b-field>
        </b-field>
      </section>

    </template>
  </div>
</template>

<script>
export default {
  name: "LeanispDetailObject",
  props: ["obj", "modal"],
};
</script>