<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-atom"
    path="#{{ vm.basePath }}"
    label="{{ vm.breadcrumbsLabel() | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<form
  name="vm.applicationForm"
  novalidate
>
  <div class="row">
    <div class="col-md-8 col-xs-12">
      <div class="card card--fullpage">
        <div class="card-header separator">
          <div class="card-title">
            {{ 'Properties' | translate }}
          </div>
        </div>
        <div class="inner-scroll">
          <div class="card-block">
            <div class="row">
              <div class="col-sm-5">
                <div class="form-group">
                  <label>{{ 'ID' | translate }}</label>
                  <input
                    class="disabled form-control"
                    type="text"
                    disabled
                    ng-model="vm.application.id"
                  />
                </div>
              </div>
              <div class="col-sm-7">
                <div
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('name') }"
                >
                  <label>{{ 'Name' | translate }}</label>
                  <input
                    class="form-control"
                    placeholder="{{ 'e.g. My application' | translate }}"
                    name="name"
                    type="text"
                    required
                    ng-model="vm.application.name"
                    ng-maxlength="120"
                    ng-disabled="vm.application.type === 'MICROSERVICE' || vm.isPlatformApplicationBasePath()"
                  />
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('name')"
                    >
                      {{ vm.validationHints('name') }}
                    </c8y-message>
                  </c8y-messages>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-5">
                <div
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('key') }"
                >
                  <label>{{ 'Application key' | translate }}</label>
                  <input
                    class="form-control"
                    placeholder="{{ 'e.g. my-application-key' | translate }}"
                    name="key"
                    type="text"
                    required
                    ng-model="vm.application.key"
                    ng-maxlength="120"
                    ng-disabled="vm.application.id || vm.isPlatformApplicationBasePath()"
                  />
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('key')"
                    >
                      {{ vm.validationHints('key') }}
                    </c8y-message>
                  </c8y-messages>
                </div>
              </div>

              <div ng-class="{ 'col-sm-12': vm.isNew, 'col-sm-7': !vm.isNew }">
                <div class="form-group">
                  <label>{{ 'Type' | translate }}</label>
                  <div>
                    <div ng-if="vm.application.id">
                      <p class="form-control-static">
                        <i c8y-icon="{{ vm.icon(vm.application) }}"></i>
                        <span ng-bind="vm.typeLabel(vm.application) | translate"></span>
                      </p>
                    </div>

                    <div
                      class="btn-group"
                      ng-if="vm.isNew"
                    >
                      <button
                        class="btn btn-default btn-sm"
                        title="{{ vm.typeLabel('HOSTED') | translate }}"
                        type="button"
                        ng-model="vm.application.type"
                        uib-btn-radio="'HOSTED'"
                      >
                        <i c8y-icon="cloud"></i>
                        <span ng-bind="vm.typeLabel('HOSTED') | translate"></span>
                      </button>

                      <button
                        class="btn btn-default btn-sm"
                        title="{{ vm.typeLabel('EXTERNAL') | translate }}"
                        type="button"
                        ng-model="vm.application.type"
                        uib-btn-radio="'EXTERNAL'"
                      >
                        <i c8y-icon="external-link-square"></i>
                        <span ng-bind="vm.typeLabel('EXTERNAL') | translate"></span>
                      </button>

                      <button
                        class="btn btn-default btn-sm"
                        title="{{ vm.typeLabel('MICROSERVICE') | translate }}"
                        type="button"
                        ng-model="vm.application.type"
                        uib-btn-radio="'MICROSERVICE'"
                      >
                        <i c8y-icon="microchip"></i>
                        <span ng-bind="vm.typeLabel('MICROSERVICE') | translate"></span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div ng-switch="vm.application.type">
              <div ng-switch-when="HOSTED">
                <div
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('contextPath') }"
                >
                  <label>{{ 'Path' | translate }}</label>
                  <div class="input-group">
                    <span class="input-group-addon">{{ host }}/apps/</span>
                    <input
                      class="form-control"
                      placeholder="{{ 'e.g. my-application`used in URL`' | translate }}"
                      name="contextPath"
                      type="text"
                      required
                      ng-maxlength="120"
                      ng-model="vm.application.contextPath"
                      ng-disabled="vm.application.id || vm.isPlatformApplicationBasePath()"
                    />
                    <c8y-messages>
                      <c8y-message
                        class="form-control-feedback-message"
                        ng-if="vm.invalid('contextPath')"
                      >
                        {{ vm.validationHints('contextPath') }}
                      </c8y-message>
                    </c8y-messages>
                  </div>
                </div>

                <div
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('contextPath') }"
                >
                  <label>
                    {{ 'Description' | translate }}
                  </label>
                  <input
                    class="form-control"
                    aria-label="{{ vm.validationHints('description') }}"
                    uib-tooltip="{{ vm.validationHints('description') }}"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                    placeholder="{{ 'e.g. Application to manage devices' | translate }}"
                    name="description"
                    type="text"
                    ng-maxlength="200"
                    ng-model="vm.application.description"
                    ng-disabled="vm.isPlatformApplicationBasePath()"
                  />
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('contextPath')"
                    >
                      {{ vm.validationHints('description') }}
                    </c8y-message>
                  </c8y-messages>
                </div>

                <div
                  class="form-group"
                  ng-if="vm.isNew"
                >
                  <label>
                    {{ 'Archive' | translate }}
                    <i
                      class="text-info"
                      c8y-icon="question-circle-o"
                      uib-tooltip="{{
                        'Compressed files must have an index.html at root. URLs in the web application can be relative.'
                          | translate
                      }}"
                      tooltip-popup-delay="500"
                      tooltip-append-to-body="true"
                    ></i>
                  </label>

                  <div class="input-group">
                    <input
                      class="form-control"
                      placeholder="{{ 'Select file' | translate }}"
                      type="text"
                      required
                      ng-model="vm.file.name"
                      readonly
                    />
                    <span class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        title="{{ 'Upload file' | translate }}"
                        type="button"
                        ng-file-select="vm.onFileSelect($files)"
                      >
                        <span>
                          <i c8y-icon="upload"></i>
                        </span>
                      </button>
                    </span>
                  </div>
                </div>
              </div>

              <div ng-switch-when="MICROSERVICE">
                <div
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('contextPath') }"
                >
                  <label>{{ 'Path' | translate }}</label>
                  <div class="input-group">
                    <span class="input-group-addon">{{ vm.host }}/service/</span>
                    <input
                      class="form-control"
                      placeholder="{{ 'e.g. my-microservice`used in URL`' | translate }}"
                      name="contextPath"
                      type="text"
                      required
                      ng-maxlength="120"
                      ng-model="vm.application.contextPath"
                      ng-disabled="vm.application.id || vm.isPlatformApplicationBasePath()"
                    />
                    <c8y-messages>
                      <c8y-message
                        class="form-control-feedback-message"
                        ng-if="vm.invalid('contextPath')"
                      >
                        {{ vm.validationHints('contextPath') }}
                      </c8y-message>
                    </c8y-messages>
                  </div>
                </div>

                <div class="row">
                  <div
                    class="col-sm-4 m-b-16 flex-auto"
                    ng-if="vm.application.manifest.version"
                  >
                    <label translate>Version</label>
                    <p class="form-control-static">
                      {{ vm.application.manifest.version }}
                    </p>
                  </div>
                  <div
                    class="col-sm-4 m-b-16 flex-auto"
                    ng-if="vm.application.manifest.isolation"
                  >
                    <label translate>Isolation</label>
                    <p class="form-control-static">
                      <span ng-show="vm.singleTenant">
                        <i
                          class="c8y-icon-duocolor icon-32"
                          c8y-icon="c8y-enterprise"
                        ></i>
                        {{ 'Single tenant' | translate }}
                      </span>
                      <span ng-show="!vm.singleTenant">
                        <i
                          class="c8y-icon-duocolor icon-32"
                          c8y-icon="c8y-sub-tenants"
                        ></i>
                        {{ 'Multi tenant' | translate }}
                      </span>
                    </p>
                  </div>
                  <div
                    class="col-sm-4 m-b-16 flex-auto"
                    ng-if="vm.application.manifest.isolation"
                  >
                    <label translate>Billing mode</label>
                    <p class="form-control-static">
                      <span
                        uib-tooltip="{{ 'Resources usage assigned to: Owner' | translate }}"
                        tooltip-placement="right"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                        ng-show="vm.subscription"
                      >
                        {{ 'Subscription' | translate }}
                      </span>
                      <span
                        uib-tooltip="{{ 'Resources usage assigned to: Subscriber | translate' }}"
                        tooltip-placement="right"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                        ng-show="!vm.subscription && vm.singleTenant"
                      >
                        {{ 'Resources' | translate }}
                      </span>
                      <span
                        uib-tooltip="{{ 'Resources usage assigned to: Owner' | translate }}"
                        tooltip-placement="right"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                        ng-show="!vm.subscription && !vm.singleTenant"
                      >
                        {{ 'Resources' | translate }}
                      </span>
                    </p>
                  </div>
                </div>

                <div
                  class="legend form-block m-t-40"
                  ng-if="vm.application.manifest.provider"
                >
                  {{ 'Provider' | translate }}
                </div>
                <div class="list-inline">
                  <div ng-if="vm.application.manifest.provider.name">
                    <div class="col-sm-4 m-b-16">
                      <label translate>Name</label>
                      <p class="form-control-static">
                        {{ vm.application.manifest.provider.name }}
                      </p>
                    </div>
                  </div>
                  <div ng-if="vm.application.manifest.provider.domain">
                    <div class="col-sm-4 m-b-16">
                      <label translate>Domain</label>
                      <p class="form-control-static">
                        {{ vm.application.manifest.provider.domain }}
                      </p>
                    </div>
                  </div>
                  <div ng-if="vm.application.manifest.provider.support">
                    <div class="col-sm-4 m-b-16">
                      <label translate>Support</label>
                      <p class="form-control-static">
                        {{ vm.application.manifest.provider.support }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div ng-switch-when="EXTERNAL">
                <div
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('externalUrl') }"
                >
                  <label>{{ 'External URL' | translate }}</label>
                  <input
                    class="form-control"
                    placeholder="{{ 'e.g.' | translate }} http://www.example.com/"
                    name="externalUrl"
                    type="url"
                    required
                    ng-pattern="/^(?!javascript:).+/"
                    ng-model="vm.application.externalUrl"
                    ng-disabled="vm.isPlatformApplicationBasePath()"
                  />
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('externalUrl')"
                    >
                      {{ vm.validationHints('externalUrl') }}
                    </c8y-message>
                  </c8y-messages>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="card-footer separator"
          ng-show="vm.application && !vm.isPlatformApplicationBasePath()"
        >
          <button
            class="btn btn-default"
            title="{{ 'Cancel' | translate }}"
            type="button"
            ng-click="vm.cancel()"
          >
            {{ 'Cancel' | translate }}
          </button>
          <button
            class="btn btn-primary btn-form"
            title="{{ 'Save' | translate }}"
            type="submit"
            ng-click="vm.save(vm.application)"
            ng-disabled="!vm.application.type || vm.applicationForm.$invalid || vm.applicationForm.$pristine"
          >
            {{ 'Save' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
