<link href="css/graphql/graphql-endpoint-configuration-modal.css?v=3.4.0-RC3" rel="stylesheet"/>

<div class="modal-header">
    <h3 class="modal-title">{{'graphql.endpoints_management.endpoint_configuration_modal.title' | translate}}</h3>
    <span ng-click="toggleAdvancedSettings()" class="toggle-advanced-settings">
        <input type="checkbox" class="switch" ng-checked="showAdvancedSettings"/>
        <label></label>
        <span>{{'graphql.endpoints_management.endpoint_configuration_modal.actions.show_advanced_settings.label' | translate}}</span>
    </span>
</div>
<div class="modal-body graphql-endpoint-configuration-modal-body">
    <div class="graphql-endpoint-configuration-loader" onto-loader size="100"
         ng-show="loadingEndpointConfigurationSettings"></div>

    <dynamic-form ng-if="!loadingEndpointConfigurationSettings" form-model="endpointConfigurationSettings.settings"
                  on-validity-change="handleValidityChange(valid)" show-all-fields="showAdvancedSettings"
                  translation-key-prefix="graphql.endpoints_management.endpoint_configuration_modal.settings."
                  form-ctrl="formCtrl">
    </dynamic-form>
</div>
<div class="modal-footer mt-0">
    <button type="button" class="btn btn-secondary cancel-btn" ng-click="cancel()">{{'common.cancel.btn' | translate}}
    </button>
    <button id="graphql-endpoint-configuration-modal-submit"
            class="btn btn-primary"
            ng-disabled="!endpointConfigurationSettingsValid || savingEndpointSettings || formCtrl.$pristine"
            ng-click="ok()" type="submit">
        <span>{{'save.changes.label' | translate}}</span>
        <span class="saving-endpoint-settings" ng-if="savingEndpointSettings" onto-loader size="15"></span>
    </button>
</div>
