<label class="acc-label mt-5">
  {{t "cloudProvider.title"}}
  {{!-- <span class="text-info">{{t "cloudProvider.helpText" htmlSafe=true}}</span> --}}

  <span class="inline-block">
    {{#tooltip-element
       type="tooltip-basic"
       model=(t "cloudProvider.helpText" htmlSafe=true)
       tooltipTemplate="tooltip-static"
       aria-describedby="tooltip-base"
       tooltipFor="tooltipPoolCreateAfter"
       placement="top"
       tagName="div"
    }}
      <i class="icon icon-help icon-blue"></i>
    {{/tooltip-element}}
  </span>
</label>

{{#if (and (eq driver "custom") (eq selectedCloudProvider "none"))}}
  {{#if (not-eq mode "view")}}
    <div class="col span-12">
      <BannerMessage
        @color="bg-info mt-0 mb-0"
        @icon="icon-info"
        @message={{t "cloudProvider.custom.notInList" htmlSafe=true}}
      />
    </div>
  {{/if}}
{{/if}}

<div class="row">
  <CheckComputedOverride
    @applyClusterTemplate={{applyClusterTemplate}}
    @clusterTemplateCreate={{clusterTemplateCreate}}
    @computedOverrideAllowed={{selectedCloudProviderOverrideAvailable}}
    @selectedCloudProvider={{mut selectedCloudProvider}}
    @driver={{mut driver}}
    @isCreateClusterOrClusterTemplate={{isCreateClusterOrClusterTemplate}}
    @computedState={{not (eq selectedCloudProvider "none")}}
  >
    {{#input-or-display
       editable=(not-eq mode "view")
       value=selectedCloudProvider
    }}
      <div class="col span-6">
        {{#if (and applyClusterTemplate (eq selectedCloudProvider "none"))}}
          <div class="radio">
            <label>
              {{t "generic.none"}}
            </label>
          </div>
        {{else if isCreateClusterOrClusterTemplate}}
          <div class="radio">
            <label>
              {{radio-button
                selection=selectedCloudProvider
                value="none"
              }} {{t "generic.none"}}
            </label>
          </div>
        {{/if}}
        {{#if (or (eq driver "amazonec2") (eq driver "custom"))}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "amazonec2"))}}
            <div class="radio">
              <label>
                {{t "cloudProvider.amazon"}}
              </label>
            </div>
          {{else if isCreateClusterOrClusterTemplate}}
            <div class="radio">
              <label>
                {{radio-button
                  selection=selectedCloudProvider
                  value="amazonec2"
                }} {{t "cloudProvider.amazon"}}
              </label>
            </div>
          {{/if}}
        {{/if}}
        {{#if (or (eq driver "azure") (eq driver "custom"))}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "azure"))}}
            <div class="radio">
              <label>
                {{t "cloudProvider.azure"}}
              </label>
            </div>
          {{else if isCreateClusterOrClusterTemplate}}
            <div class="radio">
              <label>
                {{radio-button
                  selection=selectedCloudProvider
                  value="azure"
                }} {{t "cloudProvider.azure"}}
              </label>
            </div>
          {{/if}}
        {{/if}}
        {{#if (and (not-eq driver "amazonec2") (not-eq driver "azure"))}}
          {{#if (and applyClusterTemplate (eq selectedCloudProvider "generic"))}}
            <div class="radio">
              <label>
                {{t "generic.custom"}}
              </label>
            </div>
          {{else if isCreateClusterOrClusterTemplate}}
            <div class="radio">
              <label>
                {{radio-button
                  selection=selectedCloudProvider
                  value="generic"
                }} {{t "generic.custom"}}
              </label>
            </div>
          {{/if}}
        {{/if}}

        {{#if (and applyClusterTemplate (eq selectedCloudProvider "external"))}}
          <div class="radio">
            <label>
              {{t "cloudProvider.external.label"}}
            </label>
          </div>
        {{else if isCreateClusterOrClusterTemplate}}
          <div class="radio">
            <label>
              {{radio-button
                selection=selectedCloudProvider
                value="external"
              }} {{t "cloudProvider.external.label"}}
            </label>
          </div>
        {{/if}}
      </div>
    {{/input-or-display}}
  </CheckComputedOverride>
  {{#unless (eq selectedCloudProvider "none")}}
    <div class="col span-6">
      <BannerMessage
        @color="bg-info mt-0 mb-0"
        @icon="icon-alert"
        @message={{t "cloudProvider.warning"}}
      />
    </div>
  {{/unless}}
</div>

{{#if (eq selectedCloudProvider "azure")}}
  {{#each-in configAnswers as |key value|}}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label pb-0">{{key}}
          {{#if (get (get azureDescriptions key) "required")}}
            {{#if (eq mode "new")}}
              {{field-required}}
            {{else if (and (eq mode "edit") (or (not-eq key "aadClientSecret") clusterTemplateCreate))}}
              {{field-required}}
            {{/if}}
          {{/if}}
          {{#if clusterTemplateCreate}}
            <ClusterTemplateOverrideToggle
              @path={{concat "rancherKubernetesEngineConfig.cloudProvider.azureCloudProvider." key}}
              @configVariable={{configVariable}}
              @addOverride={{addOverride}}
              @questions={{questions}}
            />
          {{/if}}
        </label>
        <p class="help-block mt-0">
          {{t (get (get azureDescriptions key) "description")}}
        </p>
      </div>
      <div class="col span-6">
        <CheckOverrideAllowed
          @applyClusterTemplate={{applyClusterTemplate}}
          @clusterTemplateRevision={{clusterTemplateRevision.clusterConfig}}
          @paramName={{concat "rancherKubernetesEngineConfig.cloudProvider.azureCloudProvider." key}}
          @questions={{questions}}
        >
          {{#input-or-display
             editable=(not-eq mode "view")
             value=(get configAnswers key)
             obfuscate=(if (eq (get (get azureDescriptions key) "type") "password") true false)
          }}
            {{input
              class="form-control input-sm value"
              spellcheck="false"
              type=(or (get (get azureDescriptions key) "type") "text")
              value=(mut (get configAnswers key))
              placeholder=(t "generic.value")
            }}
          {{/input-or-display}}
        </CheckOverrideAllowed>
      </div>
    </div>
  {{/each-in}}
{{/if}}

{{#if (not-eq mode "view")}}
  <p class="text-info">
    {{#if (eq selectedCloudProvider "generic")}}
      {{t "cloudProvider.custom.helpText" htmlSafe=true}}
    {{else if (eq selectedCloudProvider "external")}}
      {{t "cloudProvider.external.helpText" htmlSafe=true}}
    {{/if}}
  </p>
{{/if}}