<div
  class="panel-default"
  ng-class="{ expanded: vm.isOpen }"
  uib-accordion-group
  is-open="vm.isOpen"
  template-url=":::PLUGIN_PATH:::/tenantPolicyDetail/accordion.html"
>
  <uib-accordion-heading>
    <div class="d-flex flex-grow flex-wrap p-t-4 p-b-4 min-width-0">
      <div class="col-sm-2 col-xs-6 p-b-xs-8">
        <div class="text-label-small">{{ 'Data type' | translate }}</div>
        <div class="text-truncate">
          <i c8y-icon="{{ vm.dataTypes[vm.rule.dataType].icon }}"></i>
          <span title="{{ vm.dataTypes[vm.rule.dataType].label | translate }}">
            {{ vm.dataTypes[vm.rule.dataType].label | translate }}
          </span>
        </div>
      </div>
      <div class="col-sm-4 col-xs-6 p-b-xs-8">
        <div class="text-label-small">
          {{ 'Fragment type' | translate }}
        </div>
        <div
          class="text-truncate"
          title="{{ vm.rule.fragmentType }}"
        >
          {{ vm.rule.fragmentType }}
        </div>
      </div>
      <div class="col-sm-3 col-xs-6 p-b-xs-8">
        <div class="text-label-small">
          {{ 'Type' | translate }}
        </div>
        <div
          class="text-truncate"
          title="{{ vm.rule.type }}"
        >
          {{ vm.rule.type }}
        </div>
      </div>
      <div class="col-sm-3 col-xs-6 p-b-xs-8">
        <div class="text-label-small">
          {{ 'Maximum age' | translate }}
        </div>
        <div class="icon-flex">
          <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>
    </div>

    <div class="col-md-2 col-xs-4 flex-no-shrink text-right p-t-4 p-b-4">
      <button
        class="showOnHover btn btn-dot btn-dot--danger"
        ng-class="{ open: popoverIsOpen }"
        aria-label="{{ 'Remove' | translate }}"
        type="button"
        data-cy="c8yRetentionRuleRow--remove-button"
        uib-popover-template="'confirmDeleteRetentionRule.html'"
        popover-trigger="'focus'"
        popover-placement="left"
        popover-is-open="popoverIsOpen"
        ng-click="$event.stopPropagation();"
      >
        <i c8y-icon="minus-circle"></i>
      </button>
      <button
        class="collapse-btn btn-dot"
        title="{{ 'Expand' | translate }}"
        type="button"
      >
        <i c8y-icon="chevron-down"></i>
      </button>
    </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>
