<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
            <form class="form" ng-submit="add()" name="contextEntityDetailForm" novalidate autocomplete="off">
                <fieldset>
                    <legend>{{ 'catalog.blades.property-attributes.labels.new-attribute' | translate }}</legend>
                    <div class="form-group">
                        <label class="form-label">{{ 'catalog.blades.property-attributes.labels.name' | translate }}</label>
                        <div class="form-input" ng-init="setForm(contextEntityDetailForm);">
                            <input ng-class="{'error': contextEntityDetailForm.attrName.$invalid && !contextEntityDetailForm.attrName.$pristine}" type="text" placeholder="{{ 'catalog.blades.property-attributes.placeholders.name' | translate }}" required ng-model="newValue.name" ui-validate=" 'attributeNameValidator($value)' " name="attrName" focus-on="">
                        </div>
                        <div class="form-error" ng-if="contextEntityDetailForm.attrName.$dirty && contextEntityDetailForm.attrName.$invalid">
                            <span ng-if="contextEntityDetailForm.attrName.$error.required">{{ 'catalog.blades.property-attributes.validations.name-required' | translate }}</span>
                            <span ng-if="contextEntityDetailForm.attrName.$error.validator">{{ 'catalog.blades.property-attributes.validations.name-duplicate' | translate }}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">{{ 'catalog.blades.property-attributes.labels.value' | translate }}</label>
                        <div class="form-input">
                            <input ng-class="{'error': contextEntityDetailForm.attrValue.$invalid && !contextEntityDetailForm.attrValue.$pristine}" type="text" placeholder="{{ 'catalog.blades.property-attributes.placeholders.value' | translate }}" required ng-model="newValue.value" name="attrValue">
                        </div>
                        <div class="form-error" ng-if="contextEntityDetailForm.attrValue.$dirty">
                            <span ng-if="contextEntityDetailForm.attrValue.$error.required">{{ 'catalog.blades.property-attributes.validations.value-required' | translate }}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn" ng-disabled="contextEntityDetailForm.$invalid" type="submit">
                            {{ 'platform.commands.add' | translate }}
                        </button>
                    </div>
                </fieldset>
            </form>
            <fieldset>
                <legend>{{ 'catalog.blades.property-attributes.labels.current-attributes' | translate }}</legend>
                <div class="table-wrapper">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="table-col">
                                    <label class="form-control __checkbox">
                                        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll(selectedAll)" />
                                        <span class="check"></span>
                                    </label>
                                </th>
                                <th class="table-col">{{ 'catalog.blades.property-attributes.labels.name' | translate }}</th>
                                <th class="table-col">{{ 'catalog.blades.property-attributes.labels.value' | translate }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="table-item" ng-repeat="data in pb.currentEntity.attributes track by $index" ng-class="{'selected': data === selectedItem}" context-menu data-target="pa_menu_{{$index}}" ng-click='selectItem(data)'>
                                <td class="table-col">
                                    <div data-role="input-control" class="input-control checkbox">
                                        <label class="form-control __checkbox">
                                            <input type="checkbox" ng-model="data.selected">
                                            <span class="check"></span>
                                        </label>
                                    </div>
                                </td>
                                <td class="table-col">
                                    <div class="form-input">
                                        <input type="text" required ng-model="data.name">
                                    </div>
                                    <ul role="menu" class="menu __context" id="pa_menu_{{$index}}">
                                        <li class="menu-item" ng-click='delete($index)'>
                                            <i class="menu-ico fas fa-trash-alt"></i>
                                            {{ 'platform.commands.delete' | translate }}
                                        </li>
                                    </ul>
                                </td>
                                <td class="table-col">
                                    <div class="form-input">
                                        <input type="text" required ng-model="data.value">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
        </div>
    </div>
</div>