<div
  class="panel-default"
  uib-accordion-group
  is-open="vm.isOpen"
  template-url=":::PLUGIN_PATH:::/tenantPolicyDetail/accordion.html"
>
  <uib-accordion-heading class="row tight-grid">
    <div class="col-sm-1 p-l-8">
      <i
        c8y-icon="{{ vm.dataTypes[vm.rule.dataType].icon }}"
        uib-tooltip="{{ vm.dataTypes[vm.rule.dataType].label | translate }}"
        tooltip-placement="right"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      ></i>
    </div>
    <div
      class="col-sm-3"
      uib-tooltip="{{ 'Fragment type' | translate }}"
      tooltip-placement="left"
      tooltip-popup-delay="500"
      tooltip-append-to-body="true"
    >
      {{ vm.rule.fragmentType }}
    </div>
    <div
      class="col-sm-3"
      uib-tooltip="{{ 'Type' | translate }}"
      tooltip-placement="left"
      tooltip-popup-delay="500"
      tooltip-append-to-body="true"
    >
      {{ vm.rule.type }}
    </div>
    <div
      class="col-sm-3"
      uib-tooltip="{{ 'Maximum age' | translate }}"
      tooltip-placement="left"
      tooltip-popup-delay="500"
      tooltip-append-to-body="true"
    >
      <i c8y-icon="calendar"></i>
      <span
        ng-show="vm.rule.maximumAge !== undefined"
        translate
        translate-n="vm.rule.maximumAge"
        translate-plural="{{ $count }} days"
      >
        1 day
      </span>
      <span ng-show="vm.rule.maximumAge === undefined">---</span>
    </div>
    <div class="col-sm-2 text-right">
      <button
        class="showOnHover text-16"
        ng-class="{ open: popoverIsOpen }"
        type="button"
        style="line-height: 14px"
        aria-label="{{ 'Remove' | translate }}"
        uib-tooltip="{{ 'Remove' | translate }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
        ng-click="$event.stopPropagation();vm.onRemove({rule: vm.rule})"
      >
        <i class="text-muted" c8y-icon="minus-circle"></i>
      </button>
      <i c8y-icon="chevron-down" ng-hide="vm.isOpen"></i>
      <i c8y-icon="chevron-up" ng-show="vm.isOpen"></i>
    </div>
  </uib-accordion-heading>

  <form name="retentionForm" novalidate>
    <c8y-edit-retention-rule hide-source="true" ng-model="vm.rule"></c8y-edit-retention-rule>

    <div class="form-horizontal">
      <div class="form-group" ng-show="vm.canDisableEdit">
        <div class="col-sm-12">
          <label
            class="c8y-checkbox"
            title="{{ 'Allow subtenants to edit this retention rule' | translate }}"
          >
            <input
              type="checkbox"
              ng-checked="vm.rule.editable"
              ng-click="vm.rule.editable=!vm.rule.editable"
            />
            <span></span>
            <span>
              {{ 'Allow subtenants to edit this retention rule' | translate }}
            </span>
          </label>
        </div>
      </div>
    </div>
  </form>
</div>
