<div ng-controller="myController<?=$prop_id?>" ng-cloak>
	<div id="modal<?=$prop_id?>" class="ui modal">
	  <i class="close icon"></i>
	  <div class="header">Выбор должности</div>
	  <div class="content">
	    <div class="ui top attached tabular menu">
		  <a semantic-tab<?=$prop_id?> class="item active" data-tab="tab-position">По должности</a>
		  <a semantic-tab<?=$prop_id?> class="item" data-tab="tab-department">По подразделению</a>
		</div>
		<div class="ui tab segment active" data-tab="tab-position">
		  	<div class="ui search">
			  	<div class="ui icon input">
			    	<input class="prompt" type="text" placeholder="Название должности ..." ng-model="searchPosition">
			    	<i class="search icon"></i>
			  	</div>
				<div class="results"></div>
			</div>
			<div jqx-tree<?=$prop_id?> id="jqxTree-position<?=$prop_id?>" class="wrapper-results<?=$prop_id?>">
			    <ul ng-model="positions">
			    	<li ng-repeat="position in positions"
			    		ng-include="'position-tree<?=$prop_id?>'"
			    		ng-attr-item-checked="{{isChecked(category.checked)}}"
			    		ng-attr-item-id="{{position.id}}"
			    		item-expanded='true'>
			    	</li>
			    </ul>
			</div>
		</div>
		<div class="ui segment tab" data-tab="tab-department">
		  	<div class="ui search">
			  	<div class="ui icon input">
			    	<input class="prompt" type="text" placeholder="Название подразделения ..." ng-model="searchDepartment">
			    	<i class="search icon"></i>
			  	</div>
				<div class="results"></div>
			</div>
			<div jqx-tree<?=$prop_id?> id="jqxTree-department<?=$prop_id?>" class="wrapper-results<?=$prop_id?>">
			    <ul ng-model="departments">
			    	<li ng-repeat="department in departments"
			    		ng-include="'department-tree<?=$prop_id?>'"
			    		ng-attr-item-checked="{{isChecked(department.checked)}}"
			    		ng-attr-item-id="{{department.id}}"
			    		item-expanded='true'>
			    	</li>
			    </ul>
			</div>
		</div>
	  </div>
	  <div class="actions">
	    <div class="ui grey ok button">Закрыть</div>
	  </div>
	</div>

	<div class="ui teal labels">
		<div ng-repeat="pos in positions" ng-if="hasChecked(pos)" class="ui mini label">
			{{pos.title}}
			<i class="delete icon" ng-click="checkItem(pos.id, false)"></i>
			
			<div class="ui flowing popup top center transition hidden">
				<div ng-repeat="cat in pos.categories" ng-if="hasChecked(cat)">
					{{cat.title}}
					<input type="hidden" name="PROPERTY_<?=$prop_id?>[]" value="{{cat.id}}">
				</div>
			</div>
		</div>
	</div>

	<button ng-click="showModal()" class="ui tiny primary button edit-button">Добавить</button>

	<script type="text/ng-template" id="position-tree<?=$prop_id?>">
	    {{ position.title }}
	    <ul ng-if="position.categories">
	        <li ng-repeat="position in position.categories"
	        	ng-include="'position-tree<?=$prop_id?>'"
	        	ng-attr-item-checked="{{isChecked(position.checked)}}"
	        	ng-attr-item-id="{{position.id}}"
	        	item-expanded='true'>
	        </li>
	    </ul>
	</script>

	<script type="text/ng-template" id="department-tree<?=$prop_id?>">
	    {{ department.title }}
	    <ul ng-if="department.categories">
	        <li ng-repeat="department in department.categories"
	        	ng-include="'department-tree<?=$prop_id?>'"
	        	ng-attr-item-checked="{{isChecked(department.checked)}}"
	        	ng-attr-item-id="{{department.id}}"
	        	item-expanded='true'>
	        </li>
	    </ul>
	</script>
</div>