<div class="umb-block-grid-area-allowance-editor">

    <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>

    <div ng-show="vm.loading !== true" class="__list">
        
        <div ng-repeat="allowance in vm.model track by allowance.$key" class="umb-block-grid-area-allowance-editor__entry">
            <select 
                ng-model="allowance.$chosenValue"
                localize="title"
                title="blockEditor_pickSpecificAllowance"
                required
            >
                <option ng-repeat="blockGroup in vm.allBlockGroups" value="groupKey:{{blockGroup.key}}">{{blockGroup.name}}</option>
                <option disabled value="">---------</option>
                <option ng-repeat="blockType in vm.allBlockTypes" ng-init="elementType = vm.getElementTypeByKey(blockType.contentElementTypeKey)" value="elementTypeKey:{{elementType.key}}">{{elementType.name}}</option>
            </select>
            <input 
                type="number"
                name="label"
                min="0"
                ng-max="model.value.max"
                placeholder="0"
                ng-model="allowance.minAllowed"
                localize="title"
                title="blockEditor_allowanceMinimum"
                fix-number/>
            <span>–</span>
            <input 
                type="number"
                name="label"
                ng-model="allowance.maxAllowed"
                placeholder="∞"
                ng-min="model.value.min || 0"
                localize="title"
                title="blockEditor_allowanceMaximum"
                fix-number/>
            <button 
                type="button" 
                class="btn-reset umb-outline"
                localize="title"
                title="actions_delete"
                ng-click="vm.deleteAllowance(allowance);">
                <umb-icon icon="icon-trash" class="icon"></umb-icon>
                <span class="sr-only">
                    <localize key="actions_delete">Delete</localize>
                </span>
            </button>
        </div>
    </div>

    <button
        type="button"
        class="btn-reset umb-block-grid-area-editor__create-button umb-outline"
        ng-click="vm.onNewAllowanceClick()">
        <localize key="general_add">Add</localize>
    </button>

    <div ng-if="vm.model.length === 0" class="__empty-label">
      <localize key="blockEditor_areaAllowedBlocksEmpty">By default, all block types are allowed in an Area, Use this option to allow only selected types.</localize>
    </div>

</div>



