<div
  class="row"
  data-ng-controller="applicationSettingsCtrl"
>
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      icon="cog"
      label="{{ 'Application' | translate }}"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="cog"
      label="{{ 'Settings' | translate }}"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>
  <div class="col-xs-12 col-sm-12 col-md-6">
    <form
      name="defaultAppForm"
      data-ng-submit="updateDefaultApp()"
    >
      <div class="card card--fullpage">
        <div class="card-header separator p-l-16 p-r-16">
          <div
            class="card-title"
            translate
          >
            Default application
          </div>
        </div>
        <div class="inner-scroll">
          <div class="card-block p-l-16 p-r-16">
            <p translate>
              The default application specifies the application that shows up per default when
              logging into the platform. It applies to all users of the tenant. Select an
              application from the list below and make sure that all users can access this
              application.
            </p>
            <ul class="c8y-list__group m-t-16">
              <li
                class="c8y-list__item bg-inherit"
                ng-repeat="application in applications track by application.id"
              >
                <div class="c8y-list__item__block">
                  <div class="c8y-list__item__check p-l-0 m-t-auto m-b-auto">
                    <label class="c8y-radio">
                      <input
                        ng-class="{
                          active: applicationSettings.defaultApplication === application
                        }"
                        id="{{ 'apps' + $index }}"
                        name="defaultApp"
                        type="radio"
                        ng-model="applicationSettings.defaultApplication"
                        ng-value="application"
                      />
                      <span data-cy="applicationSettingsCtrl--input-span"></span>
                    </label>
                  </div>
                  <div class="c8y-list__item__appicon p-l-0">
                    <c8y-app-icon app="::application"></c8y-app-icon>
                  </div>
                  <div class="c8y-list__item__body">
                    <div class="d-flex d-col">
                      <label
                        class="text-truncate"
                        title="{{ ::application | humanizeAppName }}"
                        for="{{ 'apps' + $index }}"
                      >
                        {{::application | humanizeAppName}}
                      </label>
                      <small class="text-muted">
                        {{::application.contextPath}}
                      </small>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="card-footer separator p-l-16 p-r-16">
          <button
            class="btn btn-primary"
            title="{{ 'Save default application' | translate }}"
            type="submit"
            ng-disabled="defaultAppForm.$invalid || defaultAppForm.$pristine"
          >
            {{ 'Save default application' | translate }}
          </button>
        </div>
      </div>
    </form>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-6">
    <form
      class="card"
      name="accessForm"
      data-ng-submit="saveAccessControl(allow_origin)"
      novalidate
    >
      <div class="card card--fullpage">
        <div class="card-header separator p-l-16 p-r-16">
          <div
            class="card-title"
            translate
          >
            Access control
          </div>
        </div>
        <div class="inner-scroll">
          <div class="card-block p-l-16 p-r-16">
            <p
              class="m-b-24 text-pre-line"
              ng-bind-html="helpText | translate"
            ></p>
            <div class="form-group m-b-8">
              <label
                for="allowedDomain"
                translate
              >
                Allowed domain
              </label>
              <input
                class="form-control"
                id="allowedDomain"
                placeholder="{{ placeholderText }}"
                type="text"
                data-ng-model="allow_origin.value"
              />
              <p
                class="help-block"
                translate
              >
                Be careful not to lock yourself out of the platform.
              </p>
            </div>
          </div>
        </div>
        <div class="card-footer separator p-l-16 p-r-16">
          <button
            class="btn btn-primary"
            title="{{ 'Save access control' | translate }}"
            type="submit"
            ng-disabled="accessForm.$invalid || accessForm.$pristine"
          >
            {{ 'Save access control' | translate }}
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
