<h3 class="kuiTextTitle kuiVerticalRhythm">
  Scripted fields
</h3>

<p class="kuiText kuiVerticalRhythm">
  These scripted fields are computed on the fly from your data. They can be used in visualizations and displayed in your documents, however they can not be searched. You can manage them here and add new ones as you see fit, but be careful, scripts can be tricky!
</p>

<div class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm" ng-if="getDeprecatedLanguagesInUse().length !== 0">
  <div class="kuiInfoPanelHeader">
    <span
      class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"
      aria-label="Warning"
      role="img"
    ></span>
    <span class="kuiInfoPanelHeader__title">
      Deprecation Warning
    </span>
  </div>

  <div class="kuiInfoPanelBody">
    <div class="kuiInfoPanelBody__message">
      We've detected that the following deprecated languages are in use: {{ getDeprecatedLanguagesInUse().join(', ') }}.
      Support for these languages will be removed in the next major version of Kibana and Elasticsearch.
      We recommend converting your scripted fields to
      <a class="kuiLink" ng-href="{{docLinks.painless}}">Painless</a>.
    </div>
  </div>
</div>

<div class="kuiInfoPanel kuiInfoPanel--error kuiVerticalRhythm" ng-if="getUnsupportedLanguagesInUse().length !== 0">
  <div class="kuiInfoPanelHeader">
    <span
      class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"
      aria-label="Error"
      role="img"
    ></span>
    <span class="kuiInfoPanelHeader__title">
      Unsupported Languages
    </span>
  </div>

  <div class="kuiInfoPanelBody">
    <div class="kuiInfoPanelBody__message">
      We've detected that the following unsupported languages are in use: {{ getUnsupportedLanguagesInUse().join(', ') }}.
      All scripted fields should be converted to <a class="kuiLink" ng-href="{{docLinks.painless}}">Painless</a>.
    </div>
  </div>
</div>

<a
  data-test-subj="addScriptedFieldLink"
  ng-href="{{ kbnUrl.getRouteHref(indexPattern, 'addField') }}"
  class="kuiButton kuiButton--primary kuiButton--iconText kuiVerticalRhythm"
>
  <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
  <span>Add Scripted Field</span>
</a>

<div class="kuiVerticalRhythm">
  <paginated-table
    columns="columns"
    rows="rows"
    per-page="perPage"
    link-to-top="true"
    show-blank-rows="false"
  ></paginated-table>
</div>

<div
  class="kuiInfoPanel kuiInfoPanel--info kuiVerticalRhythm"
  ng-if="rows.length === 0"
>
  <div class="kuiInfoPanelHeader">
    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--info fa-info"></span>
    <span class="kuiInfoPanelHeader__title">
      No scripted fields found.
    </span>
  </div>
</div>
