<template>
  <card class="flex flex-col items-center justify-center">
    <div class="px-3 py-3 w-full">
      <h1 class="text-center text-3xl text-80 font-light">
        Лидеры <small>(режим {{ mode ? 'paid' : 'free' }})</small>
      </h1>
      <ul v-if="mode">
        <li v-for="leader in users" :key="leader.user_id"
            class="mt-3"
        >
          <span><small>(id: {{ leader.user_id }})</small> {{ leader.user.first_name }} {{ leader.user.last_name }}</span> - <span>Username: <a :href="`/profile/${leader.user.username}`">{{ leader.user.username }}</a></span> <br><span>Кол.-во голосов:{{ leader.vote_count }}</span>
        </li>
      </ul>
      <ul v-else>
        <li v-for="user in users" :key="user.id"
            class="mt-3"
        >
          <span><small>(id: {{ user.id }})</small> {{ user.name }}</span> - <span>Username: <a :href="`/profile/${user.username}`">{{ user.username }}</a></span> <br><span>Кол.-во голосов:{{ user.countVote }}</span>
        </li>
      </ul>

      <h2 v-if="mode" class="mt-6">
        Общая сумма: {{ amount }}
      </h2>
    </div>
  </card>
</template>

<script>
export default {
    props: [
        'card',

        // The following props are only available on resource detail cards...
        // 'resource',
        // 'resourceId',
        // 'resourceName',
    ],

    data(){
        return {
            users: [],
            amount:0,
            mode: true,
        }
    },

    mounted() {
        this.users = this.card.leaders
        this.amount = this.card.amount
        this.mode = this.card.mode
    },
}
</script>
