<span>
<!-- Show all of the current values -->
<span ng-repeat="(key,value) in values">
	<button class="btn btn-sm btn-secondary" ng-click="confirmAndRemove(values, key)" style="margin-bottom:3px;margin-right:3px;">
		<b>{{key}}:</b> {{value}}&nbsp;<i class="fas fa-xmark"></i>
	</button>
</span>

<!-- Edit button -->
<span style="line-height:24px;" ng-hide="editing">
	<a href style="text-decoration: none;" ng-click="edit()"><i class="fas fa-pen-to-square fa-lg"></i></a>&nbsp;
</span>

<!-- TODO: Add the ability to support select controls -->
<!-- Input for new item -->
<span ng-show="editing" class="text-nowrap">
	<input type="{{keyType}}" ng-keyup="onKeyup($event)" ng-model="newKey">
	<input type="{{valueType}}" ng-keyup="onKeyup($event)" ng-model="newValue">
	<a href style="text-decoration: none;" ng-click="add(values, newKey, newValue)"><i class="fas fa-plus fa-lg"></i></a>
	<a href style="text-decoration: none;" ng-click="unedit()"><i class="fas fa-xmark fa-lg"></i></a>
</span>

<!-- Transclude any content inside the tag -->
<span ng-transclude></span>
</span>