<template>
  <q-card :class="['domain-card', item.id == activeId ? 'default': '']">
    <q-card-section>
      <div class="row  no-wrap">
        <div class="col">
          <div class="text-h6 ellipsis">{{ item.name }}</div>
          <div class="text-subtitle2">{{ item.url }}</div>
        </div>
        <div class="col-auto">
          <!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
          <q-chip v-if="!isOwnerFunc(item.owner.id)" square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
          <q-chip v-else square color="purple" text-color="white" icon="people" label="自分" size="sm" />
          <div class="text-right">
            <!-- icon="add_moderator" -->
            <!-- <q-chip square color="primary" text-color="white" label="管理者" size="sm" /> -->
          </div>
        </div>

      </div>
    </q-card-section>
    <q-card-section>
      <div class="row items-center no-wrap">
        <div class="col">
          <div class="text-grey-7 text-caption text-weight-medium">
            アカウント
          </div>
          <div class="smaller-font-size">{{ item.user }}</div>
        </div>
        <div class="col-auto">
          <div class="text-grey-7 text-caption text-weight-medium">
            所有者
          </div>
          <div class="smaller-font-size">{{ !isOwnerFunc(item.owner.id) ? item.owner.fullName : '自分' }}</div>
        </div>
      </div>
    </q-card-section>
    <q-separator v-if="$slots.actions" />
    <slot name="actions" :item="item"></slot>
  </q-card>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { IDomainOwnerDisplay } from 'src/types/DomainTypes';
import { useAuthStore } from 'stores/useAuthStore';

const props = defineProps<{
  item: IDomainOwnerDisplay;
  activeId: number;
}>();

const authStore = useAuthStore();
const isOwnerFunc = computed(() => (ownerId: string) => {
  return ownerId == authStore.userId;
});

</script>

<style lang="scss" scoped>
.domain-card.default {
  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2),
              0 10px 14px 1px rgba(0, 0, 0, 0.14),
              0 4px 18px 3px rgba(0, 0, 0, 0.12),
              inset 0 0 0px 2px #1976D2;
}
.domain-card {
  width: 22rem;
  word-break: break-word;

  .smaller-font-size {
    font-size: 13px;
  }
}
</style>
