<div class="row">
  <div class="col span-5">
    <label class="acc-label pb-5">
      {{t "authPage.googleoauth.notAuthenticated.form.adminEmail.labelText"}}
      {{field-required}}
    </label>
    {{input
      type="text"
      name="username"
      value=authConfig.adminEmail
      classNames="form-control"
    }}
  </div>

  <div class="col span-5">
    <label class="acc-label pb-5">
      {{t "authPage.googleoauth.notAuthenticated.form.hostname.labelText"}}
        {{field-required}}
    </label>
    {{#input-or-display
      editable=(not isEnabled)
      value=authConfig.hostname
    }}
      {{input
        type="text"
        value=authConfig.hostname
        classNames="form-control"
      }}
    {{/input-or-display}}
  </div>

  <div class="col span-2">
    <label class="acc-label pb-5">
      {{t "authPage.googleoauth.notAuthenticated.form.nestedGroupMembershipEnabled.labelText"}}
    </label>
    <div class="checkbox mt-10">
      <label>
        {{input
          type="checkbox"
          checked=authConfig.nestedGroupMembershipEnabled
        }}
        {{t "generic.enable"}}
      </label>
    </div>
  </div>
</div>


<div class="pt-20 pb-10">
<h3>
  <b>
    {{t "authPage.googleoauth.stepOne.header"}}
  </b>
  <span>
    {{t "authPage.googleoauth.stepOne.info" htmlSafe=true}}
  </span>
</h3>
<hr/>
<ul>
  <li>
    {{t "authPage.googleoauth.notAuthenticated.ul.li1.ul.li1"}}
     {{#tooltip-element
        type="tooltip-basic"
        model=(t "authPage.googleoauth.notAuthenticated.ul.li1.helpertext" clusterId=cluster.id htmlSafe=true)
        tooltipTemplate="tooltip-static"
        aria-describedby="tooltip-base"
        baseClass="text-left"
      }}
      <span>
        <i class="icon icon-help icon-blue"/>
      </span>
    {{/tooltip-element}}
  </li>

      <li>
        {{t "authPage.googleoauth.notAuthenticated.ul.li2.ul.li1" appName=settings.appName htmlSafe=true}}
        <span>
          {{destinationDomain}}
          {{copy-to-clipboard
            size="small"
            clipboardText=destinationDomain
            htmlSafe=true
          }}
        </span>
        {{#tooltip-element
            type="tooltip-basic"
            model=(t "authPage.googleoauth.notAuthenticated.ul.li2.helperText" clusterId=cluster.id htmlSafe=true)
            tooltipTemplate="tooltip-static"
            aria-describedby="tooltip-base"
            baseClass="text-left"
          }}
          <span>
            <i class="icon icon-help icon-blue"/>
          </span>
        {{/tooltip-element}}
      </li>
      <li>
        <b>
          {{t "authPage.googleoauth.notAuthenticated.ul.li2.ul.li2" htmlSafe=true}}
        </b>
        <span>
          {{destinationUrl}}
          {{copy-to-clipboard
            size="small"
            clipboardText=destinationUrl
            htmlSafe=true
          }}
        </span>
      </li>
      <li>
        {{t "authPage.googleoauth.notAuthenticated.ul.li2.ul.li3"}}
      </li>
    </ul>
</div>

<div class="pt-20 pb-10">
  <h3>
    <b>
      {{t "authPage.googleoauth.stepTwo.header"}}
    </b>
    <span>
      {{t "authPage.googleoauth.stepTwo.info" htmlSafe=true}}
    </span>
  </h3>
  <hr/>
  <div class="row">
    <div class="col span-6">
      <ul>
        <li>
          {{t "authPage.googleoauth.notAuthenticated.ul.li3.ul.li1"}}
        </li>
        <li>
          <b>
            {{t "authPage.googleoauth.notAuthenticated.ul.li3.ul.li2" htmlSafe=true}}
          </b>
          <span>
            {{authorizedJavascriptOrigin}}
            {{copy-to-clipboard
              size="small"
              clipboardText=authorizedJavascriptOrigin
              htmlSafe=true
            }}
          </span>
        </li>
        <li>
          {{t "authPage.googleoauth.notAuthenticated.ul.li3.ul.li3" htmlSafe=true}}
          <span>
            {{redirectURI}}
            {{copy-to-clipboard
              size="small"
              clipboardText=redirectURI
              htmlSafe=true
            }}
          </span>
        </li>
        <li>
          {{t "authPage.googleoauth.notAuthenticated.ul.li3.ul.li4"}}
        </li>
      </ul>
    </div>
    <div class="col span-6">
      {{#input-text-file
        classNames="box"
        label="authPage.googleoauth.notAuthenticated.form.oauthCredential.labelText"
        value=authConfig.oauthCredential
        accept="text/*, .json"
        minHeight=60
        canChangeName=false
        nameRequired=true
        placeholder="authPage.googleoauth.notAuthenticated.form.oauthCredential.labelText"
        concealValue=true
        as |section|
      }}
        {{#if (eq section "description")}}
          <div class="row help">
            <div class="col span-12 help-block wrap mb-0">
              {{t "authPage.googleoauth.notAuthenticated.form.oauthCredential.helperText" htmlSafe=true}}
            </div>
          </div>
        {{/if}}
      {{/input-text-file}}
    </div>
  </div>
</div>

<div class="pt-20 pb-10">
  <h3>
    <b>
      {{t "authPage.googleoauth.stepThree.header"}}
    </b>
    <span>
      {{t "authPage.googleoauth.stepThree.info" htmlSafe=true}}
    </span>
  </h3>
  <hr/>

  <div class="row">
    <div class="col span-6">
      <ul>
        <li>
          {{t "authPage.googleoauth.notAuthenticated.ul.li4.ul.li1" htmlSafe=true}}
        </li>
        <li>
          {{t "authPage.googleoauth.notAuthenticated.ul.li4.ul.li2"}}
        </li>
        <li>
          {{t "authPage.googleoauth.notAuthenticated.ul.li4.ul.li3"}}
        </li>
        <li>
          {{t "authPage.googleoauth.notAuthenticated.ul.li4.ul.li4"}}
        </li>
      </ul>
    </div>
    <div class="col span-6">
      {{#input-text-file
        classNames="box"
        label="authPage.googleoauth.notAuthenticated.form.serviceAccountCredential.labelText"
        value=authConfig.serviceAccountCredential
        accept="text/*, .json"
        minHeight=60
        canChangeName=false
        nameRequired=true
        placeholder="authPage.googleoauth.notAuthenticated.form.serviceAccountCredential.labelText"
        concealValue=true
        as |section|
      }}
        {{#if (eq section "description")}}
          <div class="row help">
            <div class="col span-12 help-block wrap mb-0">
              {{t "authPage.googleoauth.notAuthenticated.form.serviceAccountCredential.helperText" htmlSafe=true}}
            </div>
          </div>
        {{/if}}
      {{/input-text-file}}
    </div>
  </div>

  <div class="row text-center mt-40 mb-20">
    <div class="btn-group">
      <button
        disabled={{buttonDisabled}}
        class="btn bg-primary"
        {{action save}}>
        {{#if saving}}
          <i class="icon icon-spinner icon-spin"></i>
          {{t "authPage.googleoauth.testAuth.buttonText.post"}}
        {{else if doneSaving}}
          {{t "generic.saved"}}
        {{else}}
          <i class="icon icon-google"></i>
          {{t "authPage.googleoauth.testAuth.buttonText.pre"}}
        {{/if}}
      </button>
      <button {{action cancel}} class="btn bg-transparent">
        {{t "saveCancel.cancel"}}
      </button>
    </div>
  </div>
</div>