<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">
      <div class="h4 text-normal text-right text-left-xs" translate>Logout configuration</div>
    </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>