<template>
    <v-dialog v-model="show" max-width="800px">
        <v-card>
            <v-card-title class="headline">
                Gambar
            </v-card-title>

            <v-card-text>
                <v-layout row wrap justify-center>
                    <v-flex xs12>
                        <img :src="image" style="max-width: 100%; height: auto;" />
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" flat @click="show = false">
                    Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
const _ = require('lodash')

module.exports = {
    name: 'ImageDialog',

    props: {
        value: {
            type: Boolean,
            default: false
        },
        image: {
            type: String,
            default: ''
        }
    },

    computed: {
        show: {
            get: function () {
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
            }
        }
    }
}
</script>

<style scoped>
.v-card-title {
    position: relative;
    padding-right: 48px;
}

.v-btn.v-btn--icon {
    position: absolute;
    right: 8px;
    top: 8px;
}
</style>