<commit_before><template>
<div v-if="page.revision"
	:class="{
		'page-list__item': !root,
		'page-list__root': root && hasChildren && flatten,
		'page-list__first': root && !(hasChildren && flatten),
		'add-gutter-bottom': depth > 2
	}"
>
	<!-- Expand tree icon -->
	<div v-if="!root && hasChildren" class="page-list__item__expand" @click="toggle">
		<icon v-show="open" name="minus" width="10" height="10" />
		<icon v-show="!open" name="plus" width="10" height="10" />
	</div>
	<!-- End expand tree icon -->

	<div
		class="page-list__title"
		:class="{ 'page-list__title--selected': pageData.id === this.page.id }"
	>
		<span class="page-list__item__drag-handle">
			<icon v-if="!root && canUser('page.move')" name="arrow" width="14" height="14" />
		</span>

		<el-tooltip
			v-if="statuses[page.status]"
			:content="statuses[page.status].name"
		>
			<div
				class="page-list__status"
				:class="{[`page-list__status--${page.status}`]: true }"
			/>
		</el-tooltip>

		<span ref="name" class="page-list__text" @click="edit">
			{{ page.path === '/' ? 'Home page' : (page.title || page.slug) }}
		</span>

		<!-- Page options dropdown -->
		<el-dropdown trigger="click" @command="handleCommand" size="small" class="page-list__options">
			<el-button type="text" style="padding: 0;">
				<icon name="more-alt" width="14" height="14" class="page-list__option-icon" />
			</el-button>

			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item
					command="openEditModal"
					v-if="canUser('page.edit')"
				>
					Edit page settings
				</el-dropdown-item>

				<el-dropdown-item
					v-show="!root"
					:disabled="depth > 2"
					command="openModal"
					v-if="canUser('page.add')"
				>
					Add subpage
				</el-dropdown-item>

				<el-dropdown-item
					command="publish"
					v-if="canUser('page.publish')"
					:disabled="page.status === 'published'"
				>
					Publish
				</el-dropdown-item>

				<el-dropdown-item
					command="unpublish"
					v-if="canUser('page.delete')"
					:disabled="page.status === 'new'"
				>
					Unpublish
				</el-dropdown-item>

				<el-dropdown-item
					v-show="!root"
					command="remove"
					divided
					v-if="canUser('page.delete')"
				>
					Delete
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<!-- End page options dropdown -->
	</div>

	<draggable
		v-model="children"
		:options="{
			group: 'pages',
			chosenClass: 'page-list__item--dragging',
			handle: '.page-list__item__drag-handle'
		}"
		@end="handleDragEnd"
		class="add-gutter"
		v-if="depth <= 2"
		:move="handleMove"
	>
		<template v-if="hasChildren">
			<page-list-item
				:class="{'page-list__item--collapsed': !open && depth !== 0}"
				v-for="(child, index) in page.children"
				:page="child"
				:site="site"
				:isDraggable="true"
				:key="child.id"
				:open-modal="openModal"
				:open-edit-modal="openEditModal"
				:path="`${path}.${index}`"
				:depth="depth + 1"
			/>
		</template>
	</draggable>
</div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import Draggable from 'vuedraggable';
import Icon from 'components/Icon';
import promptToSave from '../mixins/promptToSave';

export default {
	name: 'page-list-item',

	props: ['page', 'on-add', 'flatten', 'open-modal', 'open-edit-modal', 'path', 'depth'],

	components: {
		Icon,
		Draggable
	},

	mixins:[promptToSave],

	created() {<commit_msg>Don't show publish option in page list item dropdowns if a page's parent isn't published.<commit_after><template>
<div v-if="page.revision"
	:class="{
		'page-list__item': !root,
		'page-list__root': root && hasChildren && flatten,
		'page-list__first': root && !(hasChildren && flatten),
		'add-gutter-bottom': depth > 2
	}"
>
	<!-- Expand tree icon -->
	<div v-if="!root && hasChildren" class="page-list__item__expand" @click="toggle">
		<icon v-show="open" name="minus" width="10" height="10" />
		<icon v-show="!open" name="plus" width="10" height="10" />
	</div>
	<!-- End expand tree icon -->

	<div
		class="page-list__title"
		:class="{ 'page-list__title--selected': pageData.id === this.page.id }"
	>
		<span class="page-list__item__drag-handle">
			<icon v-if="!root && canUser('page.move')" name="arrow" width="14" height="14" />
		</span>

		<el-tooltip
			v-if="statuses[page.status]"
			:content="statuses[page.status].name"
		>
			<div
				class="page-list__status"
				:class="{[`page-list__status--${page.status}`]: true }"
			/>
		</el-tooltip>

		<span ref="name" class="page-list__text" @click="edit">
			{{ page.path === '/' ? 'Home page' : (page.title || page.slug) }}
		</span>

		<!-- Page options dropdown -->
		<el-dropdown trigger="click" @command="handleCommand" size="small" class="page-list__options">
			<el-button type="text" style="padding: 0;">
				<icon name="more-alt" width="14" height="14" class="page-list__option-icon" />
			</el-button>

			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item
					command="openEditModal"
					v-if="canUser('page.edit')"
				>
					Edit page settings
				</el-dropdown-item>

				<el-dropdown-item
					v-show="!root"
					:disabled="depth > 2"
					command="openModal"
					v-if="canUser('page.add')"
				>
					Add subpage
				</el-dropdown-item>

				<!-- TODO: figure out nicest way of disallowing pages from being published if parent is new -->
				<el-dropdown-item
					command="publish"
					v-if="canUser('page.publish')"
					:disabled="page.status === 'published' || parentStatus === 'new'"
				>
					Publish
				</el-dropdown-item>

				<el-dropdown-item
					command="unpublish"
					v-if="canUser('page.delete')"
					:disabled="page.status === 'new'"
				>
					Unpublish
				</el-dropdown-item>

				<el-dropdown-item
					v-show="!root"
					command="remove"
					divided
					v-if="canUser('page.delete')"
				>
					Delete
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<!-- End page options dropdown -->
	</div>

	<draggable
		v-model="children"
		:options="{
			group: 'pages',
			chosenClass: 'page-list__item--dragging',
			handle: '.page-list__item__drag-handle'
		}"
		@end="handleDragEnd"
		class="add-gutter"
		v-if="depth <= 2"
		:move="handleMove"
	>
		<template v-if="hasChildren">
			<page-list-item
				:class="{'page-list__item--collapsed': !open && depth !== 0}"
				v-for="(child, index) in page.children"
				:page="child"
				:site="site"
				:is-draggable="true"
				:key="child.id"
				:open-modal="openModal"
				:open-edit-modal="openEditModal"
				:path="`${path}.${index}`"
				:depth="depth + 1"
				:parent-status="page.status"
			/>
		</template>
	</draggable>
</div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import Draggable from 'vuedraggable';
import Icon from 'components/Icon';
import promptToSave from '../mixins/promptToSave';

export default {
	name: 'page-list-item',

	props: [
		'page',
		'on-add',
		'flatten',
		'open-modal',
		'open-edit-modal',
		'path',
		'depth',
		'parentStatus'
	],

	components: {
		Icon,
		Draggable
	},

	mixins:[promptToSave],

	created() {
{'fraction_non_alphanumeric': 0.20056457304163727, 'fraction_numerical': 0.00621030345800988, 'mean_word_length': 3.3499079189686927, 'pattern_counts': {'":': 0, '<': 96, '<?xml version=': 0, '>': 98, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '406986', 'n_tokens_mistral': 3091, 'n_tokens_neox': 2547, 'n_words': 457}