<div ng-controller="Umbraco.PrevalueEditors.TreeSourceController" class="umb-property-editor umb-contentpicker">

	<select ng-model="model.value.type" class="umb-property-editor" ng-change="clear()">
		<option value="content">Content</option>
		<option value="media">Media</option>
		<option value="member">Members</option>
	</select>


    <umb-node-preview
		ng-show="node"
        class="mt1"
		icon="node.icon"
		name="node.name"
		published="node.published"
		description="node.path"
		allow-remove="true"
		allow-edit="true"
		on-remove="clear()"
		on-edit="openContentPicker()">
	</umb-node-preview>

    <div ng-if="!node && model.value.type !== 'member'" class="mt2">
        <span ng-hide="showSearch || model.value.query">
            <a class="umb-node-preview-add"
               href=""
               ng-click="openContentPicker()"
               prevent-default>
                <localize key="general_choose">Choose a root node</localize>
            </a>
            <div class="mt2" ng-show="model.value.type == 'content'">
                <i class="icon icon-search"></i>
                <a href ng-click="showSearch = true">Query for root node with xpath</a>
            </div>
        </span>

        <span ng-show="showSearch || model.value.query">

            <input type="text"
                   ng-model="model.value.query"
                   class="umb-property-editor umb-textstring"
                   placeholder="Enter xpath query">

            <ul class="unstyled list-icons" style="margin-top: 15px">
                <li style="max-width: 600px">
                    <i class="icon icon-help-alt"></i>
                    <a href ng-click="showHelp = 1" prevent-default>
                        Show xpath query help
                    </a>

                    <small ng-if="showHelp">
                        <p>
                            Use Xpath query to set a root node on the tree, either based on a search from the root of the content tree, or by using a context-aware placeholder.
                        </p>

                        <p>
                            Placeholders finds the nearest published ID and runs its query from there. so for instance:

                            <pre>$parent/newsArticle</pre>

                            Will try to get the parent if available, but will then fall back to the nearest ancestor and query for all news articles there.
                        </p>

                        <p>
                            Available placeholders: <br/>
                            <code>$current</code>: current page or closest found ancestor<br/>
                            <code>$parent</code>: parent page or closest found ancestor<br/>
                            <code>$root</code>: root of the content tree<br/>
                            <code>$site</code>: Ancestor node at level 1 <br/>
                        </p>
                    </small>
                </li>
                <li>
                    <i class="icon icon-delete red"></i>
                    <a href ng-click="showSearch = false; model.value.query = ''"> Cancel and clear query</a>
                </li>
            </ul>
        </span>
    </div>

</div>
