-<template>
    <li :id="'page-' + page.id + '-container'" :data-id="page.id" class="nav-stacked-row">
        <div :id="'page-' + page.id" class="nav-stacked-item">
            <span v-if="canReorder" class="nav-stacked-drag" :class="{'nav-no-drag': isHome() || !canReorder}">
                <span class="fa fa-arrows" v-if="!isHome()"></span>
            </span>
            <a :href="getEditUrl()" class="nav-stacked-title" v-text="page.label" v-if="canUpdate"></a>
            <span :href="getEditUrl()" class="nav-stacked-title" v-text="page.label" v-else></span>
            <span class="nav-stacked-published_at text-muted hidden-xs">Publish Date: {{ publishDate }} ({{ page.published_ago }})</span>
            <span :title="__('viewPageFront')" class="nav-stacked-menu text-muted pull-right">
                <a :href="getViewUrl()"><span class="fa fa-globe"></span></a>
            </span>
            <span class="nav-stacked-menu text-muted pull-right" @click="toggleVisibility">
                <span class="fa fa-eye" v-if="!loading.display_in_menu && isVisibleInMenu"></span>
                <span class="fa fa-eye-slash" v-if="!loading.display_in_menu && isInvisibleInMenu"></span>
                <span class="fa fa-refresh fa-spin fa-fw" v-if="loading.display_in_menu"></span>
            </span>
            <span class="nav-stacked-status pull-right" @click="toggleStatus">
                <span class="fa fa-circle text-green" v-if="!loading.status && isActive"></span>
                <span class="fa fa-circle text-danger" v-if="!loading.status && isInactive"></span>
                <span class="fa fa-refresh fa-spin fa-fw"v-if="loading.status"></span>
            </span>
            <span class="nav-stacked-menu text-muted pull-right" v-if="isAlias()" title="System Page">
                <span class="fa fa-rocket"></span>
            </span>
            <span class="nav-stacked-menu text-muted pull-right" v-if="isProtected" title="Protected Page">
                <span class="fa fa-lock"></span>
            </span>
        </div>
    </li>
</template>
<script>
    import * as moment from 'moment';

    export default {
        props: {
          'page': {
            type: Object,
            default: []
          },
          'can-update': {
            type: Boolean,
            default: false
          },
          'can-reorder': {
            type: Boolean,
            default: false
          },
          'can-toggle-status': {
            type: Boolean,
            default: false
          },
          'can-toggle-visibility': {
            type: Boolean,
            default: false
          }
        },
        data() {
            return {
                loading: {
                    status: false,
                    display_in_menu: false
                }
            };
        },
        computed: {
            isActive() {
                return this.page.status === 'active';
            },
            isInactive() {
                return this.page.status === 'inactive';
            },
            isVisibleInMenu() {
                return this.page.display_in_menu;
            },
            isInvisibleInMenu() {
                return !this.page.display_in_menu;
            },
            isProtected() {
                return this.page.is_protected;
            },
            publishDate() {
                return moment(this.page.published_at)
                    .format('MMMM Do YYYY, h:mm:ss a')
            }
        },
        methods: {
            __(key) {
                if (window.Translation.hasOwnProperty(key)) {
                    return window.Translation[key];
                }
                return '';
            },
            isAlias() {
                return this.page.is_alias;
            },
            isNotAlias() {
                return !this.isAlias();
            },
            isHome() {
                return this.page.is_home;
            },
            getEditUrl() {
                return `${window.Pages.editUrl}/${this.page.id}`;
            },
            getViewUrl() {
                return `${window.Laravel.baseUrl}/${this.page.code}`;
            },
            toggleStatus() {
                if (this.isAlias() || ! this.canToggleStatus) return false;
                this.toggleAttribute('status');
            },
            toggleVisibility() {
                if (this.isAlias() || ! this.canToggleVisibility) return false;
                this.toggleAttribute('display_in_menu');
            },
            toggleAttribute(attribute) {
                var self = this;
                self.loading[attribute] = true;
                axios.post(`${window.Pages.toggleUrl}/${self.page.id}`, {
                    name: attribute,
                    value: self.page[attribute]
                }).then(response => {
                    self.page[attribute] = response.data.value;
                    self.loading[attribute] = false;
                    window.Ignite.Core.flash(`Updated successfully.`, 'success');
                }).catch(error => {
                    self.loading[attribute] = false;
                    window.Ignite.Core.flash(`Update failed.`, 'error');
                });
            }
        }
    }
</script>