<div>
  <web-editor-form
    identifier="application-details-yaml"
    value="$ctrl.data"
    yml="true"
    placeholder="# Define or paste the content of your manifest here"
    read-only="true"
    hide-title="true"
  >
  </web-editor-form>
  <div class="py-5">
    <span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()">
      <pr-icon class="vertical-center" icon="'copy'"></pr-icon>
      Copy to clipboard
    </span>
    <span class="btn btn-light btn-sm space-left !ml-0" ng-click="$ctrl.toggleYAMLInspectorExpansion()">
      <pr-icon class="vertical-center" icon="'minus'" size="'sm'" ng-if="$ctrl.expanded"></pr-icon>
      <pr-icon class="vertical-center" icon="'plus'" size="'sm'" ng-if="!$ctrl.expanded"></pr-icon>
      {{ $ctrl.expanded ? 'Collapse' : 'Expand' }}
    </span>
    <span id="copyNotificationYAML" style="display: none" class="small vertical-center ml-1">
      <pr-icon class="vertical-center" icon="'check'" size="'md'" mode="'success'"></pr-icon> copied
    </span>

    <be-teaser-button
      class="float-right"
      feature-id="$ctrl.limitedFeature"
      message="'Applies any changes that you make in the YAML editor by calling the Kubernetes API to patch the relevant resources. Any resource removals or unexpected resource additions that you make in the YAML will be ignored. Note that editing is disabled for resources in namespaces marked as system.'"
      heading="'Apply YAML changes'"
      button-text="'Apply changes'"
    ></be-teaser-button>
  </div>
</div>
