<h2>{{'Request' | translate}}</h2>
<div>
    <form>
        <div class="form-group">
            <label>{{'Method' | translate}}</label>
            <select ng-change="vm.markAsUnsaved(vm.request)" ng-options="method as method for method in vm.methods" ng-model="vm.request.method" class="form-control"></select>           
        </div>
        <div class="form-group">
            <label>{{'Url*' | translate}}</label>
            <input type="text" ng-model="vm.request.url" wizdom365-enter="vm.request.id ? vm.save() : vm.create()" ng-change="vm.markAsUnsaved(vm.request)" placeholder="absolute (https://...) or relative (/...)" class="form-control" required>
        </div>
        <div>
            <div ng-show="vm.creating">{{'Creating, please wait' | translate}}</div>
            <button ng-if="!vm.request.id" ng-hide="vm.saving" ng-disabled="!vm.request.url" type="button" ng-click="vm.create();" class="btn btn-primary">{{'Create' | translate}}</button>

            <button ng-if="vm.request.id && vm.request.unsaved" ng-disabled="!vm.request.url" ng-hide="vm.saving" type="button" ng-click="vm.save();" class="btn btn-primary" default>{{'Save' | translate}}</button>
            <button ng-if="!vm.request.id || vm.request.unsaved" ng-hide="vm.saving" type="button" ng-click="vm.cancel();" class="btn btn-default">{{'Cancel' | translate}}</button>
        </div>
    </form>
</div>
