<template>
    <div>
        <p>
            Essential Addons for YOOtheme Pro<br />
            v{{ version }} by
            <a href="https://zoolanders.com/essentials-for-yootheme-pro" target="_blank">zoolanders.com</a>.
        </p>

        <button
            class="uk-button uk-button-default uk-width-1-1 uk-text-nowrap uk-margin-top"
            type="button"
            @click="openChangelog"
        >
            {{ $t('Changelog') }}
        </button>
    </div>
</template>

<script>
import essentials from '../api';
import Changelog from './AboutPanelChangelog.vue';

export default {
    name: 'About',

    props: {
        panel: {
            type: Object,
        },
    },

    computed: {
        version() {
            return essentials.version;
        },
    },

    methods: {
        openChangelog() {
            this.$modal(Changelog).show({ width: 'xlarge' });
        },
    },
};
</script>
