<div class="panel panel-default projectspace lt-module-page__content-panel position-relative">
	<div class="saveConfigurationButton abs-position">
		<button ng-hide="saving" type="button" ng-click="openNewMetadataPopup();" class="btn btn-primary">{{'Add metadata' | translate}}</button>
	</div>

	<div style="position:relative;">
		<wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>
	</div>


	<div class="panel-heading">{{'Metadata' | translate}}</div>

	<ul class="list-group lt-list">
		<li class="list-group-item lt-list__item lt-flextable__table">
			<div class="lt-flextable__row lt-flextable__row-heading col5">Name</div>
			<div class="lt-flextable__row lt-flextable__row-heading col5">Type</div>
			<div class="lt-flextable__row lt-flextable__row-heading col5"></div>
			<div class="lt-flextable__row lt-flextable__row-heading col5">Required</div>
			<div class="lt-flextable__row lt-flextable__row-heading col5"></div>
		</li>
	</ul>

	<ul ng-show="!loading" class="list-group lt-list" ui-sortable="sortableOption" ng-model="onlySitetypeMetadataFields">

		<li class="list-group-item lt-list__item lt-flextable__table metadataDefinitionRow" ng-repeat="def in onlySitetypeMetadataFields | orderBy: 'sortOrder'">
			<div class="lt-list-item__title lt-list-item__title lt-flextable__row col5">
				{{settings.getDisplayName(def)}}
				<span class="streamline icon-question-circle" style="cursor: pointer" bs-popover data-placement="right" template="BusinessApps/Templates/CommonMetadataHelp.html" auto-close="true"></span>
			</div>
			<div class="lt-flextable__row col5">{{def.type}}</div>

			<div class="lt-flextable__row col5" ng-if="!def.isSitetypeMetadata">{{"inherited from instance" | translate}}</div>
			<div class="lt-flextable__row col5" ng-if="!def.isSitetypeMetadata">
				<div class="checkbox">
					<label>
						<input type="checkbox" ng-model="def.required" ng-disabled="true" />
					</label>
				</div>

			</div>
			<div class="lt-flextable__row col5" ng-if="!def.isSitetypeMetadata">

				<div class="checkbox">
					<label>
						<input type="checkbox" ng-model="def.addToSitetype" ng-change="changeInstanceMetadataDefinition(def)" ng-disabled="!settings.canBeDeleted(def)" />
						{{labelAddToSitetype}}
					</label>
				</div>
			</div>

			<div class="lt-flextable__row col5" ng-if="def.isSitetypeMetadata">{{"sitetype specific" | translate}}</div>
			<div class="lt-flextable__row col5" ng-if="def.isSitetypeMetadata">
				<div class="checkbox">
					<label>
						<input type="checkbox" ng-model="def.required" ng-disabled="true" />
					</label>
				</div>
			</div>

			<div class="lt-list-item__actions lt-flextable__row col5" ng-if="def.isSitetypeMetadata">
				<span class="streamline icon-pencil-1" aria-hidden="true" ng-click="openNewMetadataPopup(def)" ng-disabled="!settings.canBeModified(def)"></span>
				<span class="streamline icon-bin-1" aria-hidden="true" ng-click="deleteSitetypeMetadata(def)" ng-show="settings.canBeDeleted(def)"></span>
				<span class="streamline icon-bin-1" aria-hidden="true" ng-show="!settings.canBeDeleted(def)" ng-click="showCanDeleteMessage();"></span>
			</div>
		</li>

		<li class="list-group-item lt-list__item lt-flextable__table" ng-if="instanceMetadataWithCheckboxes.length>0">
			<strong>Metadata not added.</strong>
		</li>

		<li ng-repeat="def in instanceMetadataWithCheckboxes"  class="list-group-item lt-list__item lt-flextable__table" ng-if="instanceMetadataWithCheckboxes.length>0">

			<div class="lt-list-item__title lt-list-item__title lt-flextable__row col5">
				{{settings.getDisplayName(def)}}
				<span ng-if="!settings.canBeDeleted(def)" class="streamline icon-question-circle" style="cursor: pointer" bs-popover data-placement="right" template="BusinessApps/Templates/CommonMetadataHelp.html" auto-close="true"></span>
			</div>
			<div class="lt-flextable__row col5">{{def.type}}</div>
			<div class="lt-flextable__row col5">{{"inherited from instance" | translate}}</div>
			<div class="lt-flextable__row col5" ng-if="!def.isSitetypeMetadata">
				<div class="checkbox">
					<label>
						<input type="checkbox" ng-model="def.required" ng-disabled="true" />
					</label>
				</div>
			</div>
			<div class="lt-flextable__row col5" ng-if="!def.isSitetypeMetadata">
				<div class="checkbox">
					<label>
						<input type="checkbox" ng-model="def.addToSitetype" ng-change="changeInstanceMetadataDefinition(def)" />
						{{labelAddToSitetype}}
					</label>
				</div>
			</div>
		</li>
	</ul>
</div>