<c8y-ui-title-set title="::vm.editingPolicy.name"></c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-tenant-policies"
    path="#tenantpolicies"
    label="{{ 'Tenant policies' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-layers"
    label="{{ 'Tenants' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<form
  name="vm.policyForm"
  novalidate
>
  <div class="row">
    <div class="col-lg-9 col-xs-12">
      <div class="card card--fullpage">
        <div class="card-header separator">
          <div class="card-title">
            {{ 'Tenant policy' | translate }}
          </div>
        </div>
        <div class="inner-scroll">
          <div class="card-block">
            <div class="form-group">
              <label
                for="name"
                translate
              >
                Name
              </label>
              <input
                class="form-control"
                id="name"
                placeholder="{{ 'e.g. My tenant policy' | translate }}"
                name="name"
                type="text"
                required
                ng-model="vm.editingPolicy.name"
              />
              <c8y-error-feedback field="vm.policyForm.name"></c8y-error-feedback>
            </div>
            <div class="form-group">
              <label
                for="description"
                translate
              >
                Description
              </label>
              <textarea
                class="form-control"
                id="description"
                name="description"
                rows="4"
                ng-maxlength="1000"
                ng-model="vm.editingPolicy.description"
              ></textarea>
              <c8y-error-feedback field="vm.policyForm.description"></c8y-error-feedback>
            </div>

            <fieldset>
              <div class="legend form-block">
                {{ 'Retention rules' | translate }}
                <button
                  class="btn-help btn-help--sm"
                  aria-label="{{ 'Help' | translate }}"
                  type="button"
                  uib-popover="{{ 'Use * to allow any values.' | translate }}"
                  popover-trigger="'focus'"
                  popover-placement="right"
                  popover-append-to-body="true"
                ></button>
              </div>

              <div
                class="c8y-empty-state bg-level-1 p-l-8"
                ng-if="vm.editingPolicy.retentions.length === 0"
              >
                <i
                  class="c8y-icon-duocolor"
                  c8y-icon="c8y-tenant-policies icon-32"
                ></i>
                <div>
                  <p
                    class="text-medium"
                    translate
                  >
                    No retention rules defined.
                  </p>
                  <span translate>You must add at least one retention rule.</span>
                </div>
              </div>
              <script
                id="confirmDeleteRetentionRule.html"
                type="text/ng-template"
              >
                <div class="text-pre-normal">
                  <h4 class="popover-title m-b-8 p-0">
                    <i
                      class="text-danger m-r-4"
                      c8y-icon="exclamation-circle"></i>
                    {{ 'Remove retention rule' | translate}}
                  </h4>
                  <p
                    class="m-b-16"
                    translate>
                    Do you want to remove this retention rule? This operation is irreversible.
                  </p>
                  <div class="d-flex">
                    <button
                      class="btn btn-default btn-sm m-r-4"
                      type="button"
                      title="{{ 'Cancel' | translate }}"
                      ng-click="popoverIsOpen = !popoverIsOpen; $event.stopPropagation();">
                      {{'Cancel' | translate}}
                    </button>
                    <button
                      class="btn btn-danger btn-sm"
                      type="button"
                      title="{{ 'Remove' | translate }}"
                      ng-click="vm.onRemove({rule: vm.rule})">
                      {{'Remove' | translate}}
                    </button>
                  </div>
                </div>
              </script>
              <uib-accordion close-others="false">
                <c8y-retention-rule-row
                  ng-repeat="rule in vm.editingPolicy.retentions"
                  rule="rule"
                  on-remove="vm.onRemoveRetentionRule(rule); vm.policyForm.$setDirty()"
                ></c8y-retention-rule-row>
              </uib-accordion>
            </fieldset>

            <button
              class="btn btn-default"
              title="{{ 'Add retention rule' | translate }}"
              type="button"
              ng-click="vm.addRetentionRule(); vm.policyForm.$setDirty()"
            >
              <i c8y-icon="plus-circle"></i>
              {{ 'Add retention rule' | translate }}
            </button>

            <fieldset>
              <div
                class="legend form-block"
                translate
              >
                Tenant options
              </div>
              <div
                class="c8y-empty-state bg-level-1 p-l-8"
                ng-if="vm.editingPolicy.options.length === 0"
              >
                <i
                  class="c8y-icon-duocolor icon-32"
                  c8y-icon="c8y-tenant-policies"
                ></i>
                <div>
                  <p
                    class="text-medium"
                    translate
                  >
                    No options defined.
                  </p>
                  <span translate>Add an option below.</span>
                </div>
              </div>

              <uib-accordion close-others="false">
                <script
                  id="confirmDelete.html"
                  type="text/ng-template"
                >
                  <div class="text-pre-normal">
                    <h4 class="popover-title m-b-8 p-0">
                      <i
                        class="text-danger m-r-4"
                        c8y-icon="exclamation-circle"></i>
                      {{ 'Remove tenant option' | translate}}
                    </h4>
                    <p
                      class="m-b-16"
                      translate>
                      Do you want to remove this tenant option? This operation is irreversible.
                    </p>
                    <div class="d-flex">
                      <button
                        class="btn btn-default btn-sm m-r-4"
                        type="button"
                        title="{{'Cancel' | translate}}"
                        ng-click="popoverIsOpen = !popoverIsOpen; $event.stopPropagation();">
                        {{'Cancel' | translate}}
                      </button>
                      <button
                        class="btn btn-danger btn-sm"
                        type="button"
                        title="{{'Remove' | translate}}"
                        ng-click="vm.onRemove({option: vm.option})">
                        {{'Remove' | translate}}
                      </button>
                    </div>
                  </div>
                </script>
                <c8y-tenant-options-row
                  ng-repeat="option in vm.editingPolicy.options"
                  option="option"
                  on-remove="vm.onRemoveTenantOption(option); vm.policyForm.$setDirty()"
                ></c8y-tenant-options-row>
              </uib-accordion>
            </fieldset>

            <button
              class="btn btn-default"
              title="{{ 'Add tenant option definition' | translate }}"
              type="button"
              ng-click="vm.addTenantOption(); vm.policyForm.$setDirty()"
            >
              <i c8y-icon="plus-circle"></i>
              {{ 'Add tenant option definition' | translate }}
            </button>
          </div>
        </div>
        <div class="card-footer separator">
          <div
            class="row"
            changed="vm.policyForm.$dirty"
          >
            <div class="col-md-8">
              <button
                class="btn btn-default"
                title="{{ 'Cancel' | translate }}"
                type="button"
                ng-click="vm.cancel()"
              >
                {{ 'Cancel' | translate }}
              </button>
              <button
                class="btn btn-danger"
                title="{{ 'Remove' | translate }}"
                type="button"
                ng-if="vm.editingPolicy.id"
                ng-click="vm.remove()"
              >
                {{ 'Remove' | translate }}
              </button>
              <button
                class="btn btn-primary"
                title="{{ 'Save' | translate }}"
                type="submit"
                ng-disabled="!vm.editingPolicy.retentions.length || vm.policyForm.$invalid || vm.policyForm.$pristine"
                ng-click="vm.save()"
              >
                {{ 'Save' | translate }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
