<div ng-class="{'text-muted': !pageUrl.is_visible}" class="row px-3 py-3 d-inline-flex w-100 bg-white">
	<div class="dropdown d-inline-flex align-items-center flex-grow-1 site-item-link">
		<span ng-if="pageUrl.level >= 1" class="px-3 py-2"></span>
		<span ng-if="pageUrl.level >= 2" class="px-3 py-2"></span>
		<span ng-if="pageUrl.type == 'link'" class="d-flex mr-2">
			<ion-icon name="link-outline"></ion-icon>
		</span>
		<span ng-if="pageUrl.type == 'page' && pageUrl.level > 0" class="d-flex mr-2">
			<ion-icon name="grid-outline"></ion-icon>
		</span>

		<span ng-if="pageUrl.type == 'page' && pageUrl.level === 0" class="mr-2 d-flex">
			<ion-icon name="home-outline"></ion-icon>
		</span>

		<span ng-if="pageUrl.is_visible" class="site-item-visible">
			<ion-icon class="d-flex mr-2" name="eye-outline"></ion-icon>
		</span>
		<span ng-if="!pageUrl.is_visible" class="mr-2 d-flex">
			<ion-icon name="eye-off-outline"></ion-icon>
		</span>
		<span name="" rel="tooltip" data-placement="top" title="{{pageUrl.title}}" ng-bind="pageUrl.title" class="site-item__title">[Page Name]</span>
		<span class="ml-auto d-flex mr-3">
			<span ng-if="pageUrl.type == 'page' && pageUrl.level > 0 && !pageUrl.inherited" rel="tooltip" lmsg="data-original-title:pages.permissions.special" class="mr-3 mt-1">
				<ion-icon name="key-outline"></ion-icon>
			</span>
			<button class="btn btn-secondary btn-sm js-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				<ion-icon name="ellipsis-vertical"></ion-icon>
			</button>

			<div class="dropdown-menu dropdown-menu-right">
				<a class="dropdown-item" ng-if="pageUrl.type === 'page'" name="view_page_link" ng-href="/pages/{{pageUrl.full_url}}">
					<ion-icon name="grid-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.view_site">View Page</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.type === 'link'" name="view_page_link" target="{{list.getTarget(pageUrl)}}" ng-href="{{pageUrl.link_url}}">
					<ion-icon name="open-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.visit_link">Visit Link</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.perms.edit && pageUrl.type === 'page'" ng-class="{'menu-item-highlight': (pageUrl.level === 0 && pageUrl.children.length === 0)}" name="view_page_link" ng-href="/pages/{{pageUrl.full_url}}?edit" onclick="return SendByPost(this);">
					<ion-icon name="create-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.edit_page">Edit Page</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.perms.edit && pageUrl.type === 'page'" ng-class="{'menu-item-highlight': (pageUrl.level === 0 && pageUrl.children.length === 0)}" name="view_page_link" ng-href="/pages/{{pageUrl.full_url}}?edit&safe=true" onclick="return SendByPost(this);">
					<ion-icon name="shield-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.edit_page_safemode">Edit in safe mode</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.perms.edit && pageUrl.type === 'page'" name="view_page_link" ng-href="/pages/{{pageUrl.full_url}}/.edit">
					<ion-icon name="settings-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.page_properties">Edit Page Properties</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.perms.edit && pageUrl.type === 'link'" name="view_page_link" ng-click="list.editLink($event, pageUrl)" href="#" >
					<ion-icon name="create-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.edit_link">Edit Link</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.perms.edit && pageUrl.is_visible && pageUrl.parent_id > 0" ng-click="list.toggleVisibility($event, pageUrl)" name="view_page_link" href="#">
					<ion-icon name="eye-off-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.hide_from_navigation">Hide From Navigation</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.perms.edit &&!pageUrl.is_visible" ng-click="list.toggleVisibility($event, pageUrl)" name="view_page_link" href="#">
					<ion-icon name="eye-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.show_in_navigation">Show In Navigation</span>
				</a>

				<a class="dropdown-item" ng-if="pageUrl.perms.edit && pageUrl.level > 0" ng-click="list.deletePageurl($event, pageUrl)" name="view_page_link" href="#">
					<ion-icon name="trash-outline"></ion-icon>
					<span lmsg="pages.site.page_menu.delete">Delete</span>
				</a>

				<span ng-if="pageUrl.perms.edit && pageUrl.level < 2" class="dropdown-divider d-block"></span>

				<div ng-if="pageUrl.perms.edit && pageUrl.level < 2">
					<a class="dropdown-item" ng-if="pageUrl.type === 'page'" ng-click="list.addPage($event, pageUrl)" name="view_page_link" href="#">
						<ion-icon name="add-outline"></ion-icon>
						<span lmsg="pages.site.page_menu.create_page">Create Page</span>
					</a>

					<a class="dropdown-item" ng-click="list.addLink($event, pageUrl)" name="view_page_link" href="#">
						<ion-icon name="link-outline"></ion-icon>
						<span lmsg="pages.site.page_menu.create_link">Create Link</span>
					</a>
				</div>
			</div>
		</span>
	</div>
	<script>
		$('.site-item__title').tooltip({
			"delay": {
				"show": "500",
				"hide": "100"
			}
		});
	</script>

	<div class="drag-icon mr-0 d-flex ml-auto mt-1">
		<span ng-if="pageUrl.level > 0 && pageUrl.perms.edit" class="d-flex site-item__button site-item__handle js-drag-handle" as-sortable-item-handle="">
			<ion-icon name="reorder-three-outline"></ion-icon>
		</span>
		<span ng-if="pageUrl.level == 0 && list.canEdit()" class="d-flex  site-item__button site-item__no-movement">
		</span>
	</div>
</div>
