<div
  class="panel-default"
  uib-accordion-group
  is-open="vm.isOpen"
  ng-class="{ expanded: vm.isOpen }"
  template-url=":::PLUGIN_PATH:::/tenantPolicyDetail/accordion.html"
>
  <uib-accordion-heading>
    <div class="col-sm-4 col-xs-12">
      <span uib-tooltip="{{ 'Category' | translate }}">
        {{ vm.option.category }}
      </span>
    </div>
    <div class="col-sm-3 col-xs-12">
      <span
        uib-tooltip="{{ 'Key' | translate }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      >
        {{ vm.option.key }}
      </span>
    </div>
    <div class="col-sm-3 col-xs-12">
      <span
        uib-tooltip="{{ 'Value' | translate }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      >
        {{ vm.option.value }}
      </span>
    </div>

    <div class="col-sm-2 text-right panel-actions">
      <button
        class="showOnHover btn btn-link text-16"
        type="button"
        ng-click="$event.stopPropagation();vm.onRemove({option: vm.option})"
        aria-label="{{ 'Remove' | translate }}"
        uib-tooltip="{{ 'Remove' | translate }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      >
        <i c8y-icon="minus-circle" class="text-danger"></i>
      </button>
      <div class="btn btn-link">
        <i c8y-icon="chevron-down"></i>
      </div>
    </div>
  </uib-accordion-heading>

  <form name="systemOptionsForm" novalidate>
    <c8y-edit-system-option option="vm.option"></c8y-edit-system-option>

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