<c8y-title translate>App configuration</c8y-title>

<div class="row">
  <div class="col-lg-12 col-lg-max">
    <form #configForm="ngForm">
      <div class="card card--fullpage">
        <div class="card-header separator">
          <div class="card-title" translate>Cockpit configuration</div>
        </div>

        <div class="inner-scroll">
          <div class="card-block p-t-0 p-b-0">
            <fieldset class="row separator-bottom p-t-24 p-b-24">
              <div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
                <div class="d-inline-flex m-b-16">
                  <h4 class="text-medium m-r-4" translate>Features</h4>
                  <button
                    class="btn btn-clean"
                    popover="{{
                      'Define which are the enabled features in the current application.'
                        | translate
                    }}"
                    container="body"
                    placement="right"
                    [outsideClick]="true"
                  >
                    <i [c8yIcon]="'question-circle-o'" class="text-info"></i>
                  </button>
                </div>
              </div>
              <div class="col-xs-12 col-sm-9 col-md-8">
                <c8y-feature-config
                  [config]="config"
                  (onUpdate)="updateFeatures()"
                ></c8y-feature-config>
              </div>
            </fieldset>
            <fieldset class="row separator-bottom p-t-24 p-b-24">
              <div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
                <div class="d-inline-flex m-b-16">
                  <h4 class="text-medium m-r-8" translate>Top level nodes</h4>
                  <button
                    class="btn btn-clean"
                    popover="{{
                      'Select which nodes to display in the top level of the navigator menu. By default, only Groups is shown.'
                        | translate
                    }}"
                    container="body"
                    placement="right"
                    [outsideClick]="true"
                  >
                    <i [c8yIcon]="'question-circle-o'" class="text-info"></i>
                  </button>
                </div>
              </div>
              <div class="col-xs-12 col-sm-10 col-md-10">
                <div class="row">
                  <c8y-root-node-config
                    [config]="config"
                    (onUpdate)="updateRootNodes()"
                  ></c8y-root-node-config>
                </div>
              </div>
            </fieldset>

            <fieldset class="row separator-bottom p-t-24 p-b-24">
              <div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
                <div class="d-inline-flex m-b-16">
                  <h4 class="text-medium m-r-8" translate>Home dashboard</h4>
                  <button
                    class="btn btn-clean"
                    popover="{{
                      'The landing page for this application. By default it is a customizable dashboard displaying data for the overall tenant.'
                        | translate
                    }}"
                    placement="right"
                    container="body"
                    [outsideClick]="true"
                  >
                    <i [c8yIcon]="'question-circle-o'" class="text-info"></i>
                  </button>
                </div>
              </div>
              <div class="col-xs-12 col-sm-9 col-md-8">
                <c8y-home-dashboard-config [config]="config"></c8y-home-dashboard-config>
              </div>
            </fieldset>

            <fieldset class="row separator-bottom p-t-24 p-b-24">
              <div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
                <h4 class="text-medium d-inline-block m-r-4" translate>Misc</h4>
              </div>
              <div class="col-xs-12 col-sm-9 col-md-8">
                <c8y-misc-config [config]="config"></c8y-misc-config>
              </div>
            </fieldset>
          </div>
        </div>
        <div class="card-footer separator">
          <button
            type="submit"
            class="btn btn-primary"
            translate
            [disabled]="!configForm.form.valid"
            (click)="save()"
            c8yProductExperience
            [actionName]="'cockpitConfigurationSaved'"
            [actionData]="{ config: config }"
          >
            Save
          </button>
        </div>
      </div>
    </form>
  </div>
</div>