<div class="col-md-12 p-t-16">
  <div class="row m-l-8 m-r-8">
    <div class="col-xs-12 col-sm-3 col-md-2">
      <h4 class="text-normal text-right text-left-xs" translate>Logout configuration</h4>
    </div>
    <div class="col-xs-12 col-sm-9 col-md-10 col-lg-9">
      <c8y-form-group>
        <label for="redirectAfterLogout" title="{{ 'Redirect after logout' | translate }}" class="c8y-switch">
          <input
            type="checkbox"
            [(ngModel)]="templateModel.redirectAfterLogout"
            name="redirectAfterLogout"
            id="redirectAfterLogout"
          />
          <span></span>
          <span class="control-label">{{ 'Redirect after logout' | translate }}</span>
        </label>
      </c8y-form-group>

      <c8y-form-group *ngIf="templateModel.redirectAfterLogout">
        <label for="redirectAfterLogoutUrl" class="control-label" translate> Redirect URL </label>
        <input
          class="form-control"
          name="redirectAfterLogoutUrl"
          id="redirectAfterLogoutUrl"
          type="url"
          [(ngModel)]="templateModel.redirectAfterLogoutUrl"
          placeholder="{{ 'e.g. https://my-tenant.cumulocity.com/apps/cockpit' | translate }}"
          c8yDefaultValidation="httpUrl"
          required
        />
      </c8y-form-group>
    </div>
  </div>
</div>