<template>
    <v-card class="elevation-3">
        <v-card-title class="justify-center">
            <span class="display-1">{{ atributy.nazov }}</span>
            <v-chip small color="secondary" text-color="white">{{ atributy.ucebnice_count }}</v-chip>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text class="headline">
            <v-list v-if="atributy.ucebnice_count">
                <v-list-tile v-for="(itm, indx) in atributy.ucebnice" :key="indx" @click="$emit('otvoritUcebnicu', itm)">
                    <v-list-tile-avatar>
                        <v-icon>mdi-book-open-variant</v-icon>
                    </v-list-tile-avatar>
                    <v-list-tile-content>
                        <v-list-tile-title v-text="itm.nazov"></v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
            <v-list v-else="">
                <v-list-tile>
                    <v-list-tile-content>
                        <v-list-tile-title class="text-xs-center font-weight-light">bez učebného materiálu</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
            <v-flex xs12 text-xs-center>
                <v-btn :disabled="!parseInt(atributy.ucebnice_count) > 0" round color="success" class="mx-0 font-weight-light" @click="$emit('otvoritKategoriu', atributy)">Zobraziť všetko</v-btn>
            </v-flex>
        </v-card-actions>
    </v-card>
</template>

<script>
  export default {
    name: 'Polozka',
    components: {},
    props: {
      atributy: {
        type: Object,
        required: true
      }
    },
    data() {
      return {}
    },
    computed: {},
    methods: {},
    watch: {},
  }
</script>

<style scoped></style>
