<div class="row">
  <div class="col span-6">
    <label class="acc-label">
      {{t "cruPrivateRegistry.title.label"}}
      {{#if clusterTemplateCreate}}
        <ClusterTemplateOverrideToggle
          @path="uiOverridePrivateRegistry"
          @configVariable={{enablePrivateRegistry}}
          @addOverride={{addOverride}}
          @questions={{clusterTemplateRevision.questions}}
        />
      {{/if}}
    </label>
    <CheckOverrideAllowed
      @applyClusterTemplate={{applyClusterTemplate}}
      @clusterTemplateRevision={{clusterTemplateRevision.clusterConfig}}
      @enablePrivateRegistry={{mut enablePrivateRegistry}}
      @multipleRegistries={{multipleRegistries}}
      @paramName="uiOverridePrivateRegistry"
      @questions={{clusterTemplateRevision.questions}}
      @value={{enablePrivateRegistry}}
    >
      {{#input-or-display
         editable=(not-eq mode "view")
         value=(if enablePrivateRegistry (t "generic.enabled") (t "generic.disabled"))
      }}
        <div class="radio">
          <label>
            {{radio-button
              selection=enablePrivateRegistry
              value=false
              disabled=(if multipleRegistries true false)
            }}
            {{t "generic.disabled"}}
          </label>
        </div>
        <div class="radio">
          <label>
            {{radio-button
              selection=enablePrivateRegistry
              value=true
              disabled=(if multipleRegistries true false)
            }}
            {{t "generic.enabled"}}
          </label>
        </div>
      {{/input-or-display}}
    </CheckOverrideAllowed>
  </div>
</div>

{{#if enablePrivateRegistry}}
  <div class="row">
    <div class="col {{if multipleRegistries "span-3" "span-4"}}">
      <label class="acc-label" for="cru-private-registry-url">
        {{t "cruPrivateRegistry.registry.url.label"}}
        {{#if clusterTemplateCreate}}
          <ClusterTemplateOverrideToggle
            @path="rancherKubernetesEngineConfig.privateRegistries[0].url"
            @configVariable={{privateRegistry.url}}
            @addOverride={{addOverride}}
            @questions={{clusterTemplateRevision.questions}}
          />
        {{/if}}
      </label>
      <CheckOverrideAllowed
        @questions={{clusterTemplateRevision.questions}}
        @paramName="rancherKubernetesEngineConfig.privateRegistries[0].url"
        @value={{privateRegistry.url}}
        @clusterTemplateRevision={{clusterTemplateRevision.clusterConfig}}
        @applyClusterTemplate={{applyClusterTemplate}}
      >
        {{#input-or-display
           editable=(not-eq mode "view")
           value=privateRegistry.url
        }}
          {{input-url
            id="cru-private-registry-url"
            classNames="form-control input-sm"
            isInvalid=(action (mut urlInvalid))
            urlWarning=(action (mut urlWarning))
            urlError=(action (mut urlError))
            value=privateRegistry.url
            stripScheme=true
          }}
        {{/input-or-display}}
      </CheckOverrideAllowed>
    </div>
    <div class="col {{if multipleRegistries "span-3" "span-4"}}">
      <label class="acc-label" for="cru-private-registry-username">
        {{t "cruPrivateRegistry.registry.user.label"}}
        {{#if clusterTemplateCreate}}
          <ClusterTemplateOverrideToggle
            @path="rancherKubernetesEngineConfig.privateRegistries[0].user"
            @configVariable={{privateRegistry.user}}
            @addOverride={{addOverride}}
            @questions={{clusterTemplateRevision.questions}}
          />
        {{/if}}
      </label>
      <CheckOverrideAllowed
        @questions={{clusterTemplateRevision.questions}}
        @paramName="rancherKubernetesEngineConfig.privateRegistries[0].user"
        @value={{privateRegistry.user}}
        @clusterTemplateRevision={{clusterTemplateRevision.clusterConfig}}
        @applyClusterTemplate={{applyClusterTemplate}}
      >
        {{#input-or-display
           editable=(not-eq mode "view")
           value=privateRegistry.user
        }}
          {{input
            id="cru-private-registry-username"
            class="input-sm"
            type="text"
            value=privateRegistry.user
          }}
        {{/input-or-display}}
      </CheckOverrideAllowed>
    </div>
    <div class="col {{if multipleRegistries "span-3" "span-4"}}">
      <label class="acc-label" for="cru-private-registry-password">
        {{t "cruPrivateRegistry.registry.password.label"}}
        {{#if clusterTemplateCreate}}
          <ClusterTemplateOverrideToggle
            @path="rancherKubernetesEngineConfig.privateRegistries[0].password"
            @configVariable={{privateRegistry.password}}
            @addOverride={{addOverride}}
            @questions={{clusterTemplateRevision.questions}}
          />
        {{/if}}
      </label>
      <CheckOverrideAllowed
        @questions={{clusterTemplateRevision.questions}}
        @paramName="rancherKubernetesEngineConfig.privateRegistries[0].password"
        @value={{privateRegistry.password}}
        @clusterTemplateRevision={{clusterTemplateRevision.clusterConfig}}
        @applyClusterTemplate={{applyClusterTemplate}}
      >
        {{#input-or-display
           id="cru-private-registry-password"
           editable=(not-eq mode "view")
           obfuscate=true
           value=privateRegistry.password
        }}
          {{input
            class="conceal input-sm"
            type="password"
            value=privateRegistry.password
          }}
        {{/input-or-display}}
      </CheckOverrideAllowed>
    </div>
    {{#if multipleRegistries}}
      <div class="col span-2">
        <label class="acc-label">
          {{t "cruPrivateRegistry.registry.default.label"}}
        </label>
        <div class="text-center m-5">
          {{#input-or-display
             editable=(not-eq mode "view")
             value=privateRegistry.isDefault
          }}
            {{input
              type="checkbox"
              checked=privateRegistry.isDefault
              disabled=(and (not privateRegistry.isDefault) hasDefault)
            }}
          {{/input-or-display}}
        </div>
      </div>
      <div class="col span-1">
        <button class="btn bg-primary btn-sm mt-25" {{action "removeRegistry" privateRegistry}}>
          <i class="icon icon-minus"/>
        </button>
      </div>
    {{/if}}
  </div>
{{/if}}

{{!-- this really shouldn't happen but its in place to handle multiple sys reg added in api level which isn't current suuported by the UI --}}
{{#if multipleRegistries}}
  {{#each privateRegistries as |reg idx|}}
    {{!-- skip the first item as its above --}}
    {{#if (gt idx 0)}}
      <div class="row">
        <div class="col span-3">
          <label class="acc-label">
            {{t "cruPrivateRegistry.registry.url.label"}}
          </label>
          {{#input-or-display
             editable=(not-eq mode "view")
             value=reg.url
          }}
            {{input-url
              classNames="form-control input-sm"
              isInvalid=(action (mut urlInvalid))
              urlWarning=(action (mut urlWarning))
              urlError=(action (mut urlError))
              value=reg.url
              stripScheme=false
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-3">
          <label class="acc-label">
            {{t "cruPrivateRegistry.registry.user.label"}}
          </label>
          {{#input-or-display
             editable=(not-eq mode "view")
             value=reg.user
          }}
            {{input
              class="input-sm"
              type="text"
              value=reg.user
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-3">
          <label class="acc-label">
            {{t "cruPrivateRegistry.registry.password.label"}}
          </label>
          {{#input-or-display
             editable=(not-eq mode "view")
             obfuscate=true
             value=reg.password
          }}
            {{input
              class="conceal input-sm"
              type="password"
              value=reg.password
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-2">
          <label class="acc-label">
            {{t "cruPrivateRegistry.registry.default.label"}}
          </label>
          <div class="text-center m-5">
            {{input
              type="checkbox"
              checked=reg.isDefault
              disabled=(and (not reg.isDefault) hasDefault)
            }}
          </div>
        </div>
        <div class="col span-1">
          <button class="btn bg-primary btn-sm mt-25" {{action "removeRegistry" reg}}>
            <i class="icon icon-minus"/>
          </button>
        </div>
      </div>
    {{/if}}
  {{/each}}
{{/if}}