javascript:
  $(document).ready(function(){
    // warning when changing auth mode
    var auth_mode_changed = false;

    $("input[name='service[backend_version]']").change( function(){
      auth_mode_changed = true;
    });

    $("#edit_service_#{@service.id}").submit( function(){
      if(auth_mode_changed && !confirm("Changing the Authentication mode can affect your current integration with 3scale's backend! It is not advisable to do this operation when you are in production mode. Do you really want to change?"))
        return false;
    });

    // scrolling
    var scrolledToSubmit = false;

    var toggleState = function (elem, one, two) {
      var elem = $(elem);
      elem.attr('data-state', elem.attr('data-state') === one ? two : one);
    };

    var toggleText = function (elem, one, two) {
      $(elem).text($(elem).text() == one ? two : one);
    };

    $('.IntegrationSettingsBox-toggle').on( "click", function(e) {
      toggleState('.IntegrationSettingsBox-summary', 'open', 'closed');
      toggleState('.IntegrationSettingsBox-form', 'closed', 'open');
      toggleState('.integration', 'open', 'closed');
      toggleText('.IntegrationSettingsBox-toggle', 'edit integration settings', 'cancel');
      e.preventDefault();

      // toggling the form visibility is like a new visit
      scrolledToSubmit = false;
    });

    $("input[type=radio][name='service[deployment_option]']").change(function() {
      var commitTopOffset = $(".commit").offset().top;

      if(!scrolledToSubmit && document.body.scrollTop + $(window).height() < commitTopOffset ) {
        $(document.body).animate({
          scrollTop: commitTopOffset
        }, 750);

        scrolledToSubmit = true;
      }
    });
  });

- unless Rails.application.config.three_scale.apicast_oauth
  javascript:
    $(document).ready(function(){

      // oauth not for APIcast 1
      function toggleOauthAvailability() {
        var current_deployment_option = $("input[type=radio][name='service[deployment_option]']:checked").val();
        var wrapper = $(".backend_version_oauth");
        var authentication_option = $("input[type=radio][name='service[backend_version]'][value='oauth']");

        if (current_deployment_option == 'on_3scale') {
          authentication_option.attr("disabled", true);
          wrapper.addClass("disabled").attr("title", "OAuth is not supported by APIcast Cloud Gateway at this moment in time. Pick another Gateway or Plugin option at the top of this page to enable OAuth activation.");;
        } else {
          authentication_option.attr("disabled", false);
          wrapper.removeClass("disabled").attr("title", "OAuth");;
        }
      };

      toggleOauthAvailability();

      $("input[type=radio][name='service[deployment_option]']").change(function() {
        toggleOauthAvailability();
      });

      function toggleApiCastAvailability() {
        var current_authentication_option = $("input[type=radio][name='service[backend_version]']:checked").val();
        var wrapper = $(".deployment_option_on_3scale");
        var deployment_option = $("input[type=radio][name='service[deployment_option]'][value='on_3scale']");

        if (current_authentication_option == 'oauth') {
          deployment_option.attr("disabled", true);
          wrapper.addClass("disabled").attr("title", "APIcast Cloud Gateway doesn't support OAuth at this moment in time. Pick another Authentication method at the bottom of this page to enable APIcast activation.");
        } else {
          deployment_option.attr("disabled", false);
          wrapper.removeClass("disabled").attr("title", "APIcast");
        }
      };

      toggleApiCastAvailability();

      $("input[type=radio][name='service[backend_version]']").change(function() {
        toggleApiCastAvailability();
      });
    });


#integration-settings
  = form.inputs "Production Deployment Option" do

    - if @service.deployment_option == nil
      - @service.deployment_option = 'on_3scale'

    = form.input :deployment_option,
      as: :radio,
      collection: Service.deployment_options(current_account)['Gateway'],
      label: Service.deployment_options(current_account).keys[0],
      wrapper_html: { class: "radio--iconic gateway" },
      value_as_class: true,
      hint: t("formtastic.hints.deployment_option_gateway")

    = form.input :deployment_option,
      as: :radio,
      collection: Service.deployment_options(current_account)['Plugin'],
      label: 'Or ' + Service.deployment_options(current_account).keys[1],
      wrapper_html: { class: "radio--iconic plugin" },
      value_as_class: true,
      hint: t("formtastic.hints.deployment_option_plugin")

  = form.inputs "Authentication" do
    = form.input :backend_version,
      as: :radio,
      required: false,
      collection: Logic::Backend::Service::VERSIONS,
      label: 'Authentication',
      wrapper_html: { class: "radio--iconic" },
      value_as_class: true,
      hint: 'Authentication is essential to provide Access Control. The chosen authentication mode dictates how your customers will authenticate with your API.…'

= form.buttons do
  = form.commit_button
