<template>
    <v-card dark ripple elevation-6 class="red" @click="$emit('otvoritUcebnicu', ucebnica)">
        <v-img height="200" class="white--text">
            <v-container fill-height fluid>
                <v-layout align-center justify-center fill-height ma-0>
                    <v-flex xs12 align-end flexbox class="text-xs-center">
                        <span class="headline">{{ ucebnica.nazov }}</span>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-img>
        <v-card-text>{{ ucebnica.popis }}</v-card-text>
        <v-divider dark class="mx-3"></v-divider>
        <v-card-actions>
            <div>
                <v-icon size="20" class="mr-2">mdi-calendar</v-icon>
                <span class="caption font-weight-light">{{ ucebnica.datum_zmeny }}</span>
            </div>
            <v-spacer></v-spacer>
            <div>
                <v-icon size="20" class="mr-2">mdi-account-outline</v-icon>
                <span class="caption font-weight-light">{{ ucebnica.autor }}</span>
            </div>
        </v-card-actions>
    </v-card>
</template>

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

<style scoped>
    .v-card {
        cursor: pointer;
    }
</style>
