import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import randomId from '../-private/random-id.js';
import EuiFlexGroup from './eui-flex-group.js';
import EuiFlexItem from './eui-flex-item.js';

const EuiHeaderAlert = setComponentTemplate(precompileTemplate(`
    {{#let (randomId) as |ariaId|}}
      <article
        aria-labelledby="{{ariaId}}-title"
        class="euiHeaderAlert"
        ...attributes
      >
        <EuiFlexGroup @justifyContent="spaceBetween">
          <EuiFlexItem>
            <div class="euiHeaderAlert__date">{{yield to="date"}}</div>
          </EuiFlexItem>
          {{#if (has-block "badge")}}
            <EuiFlexItem @grow={{false}}>{{yield to="badge"}}</EuiFlexItem>
          {{/if}}

        </EuiFlexGroup>

        <h3 id="{{ariaId}}-title" class="euiHeaderAlert__title">
          {{yield to="title"}}
        </h3>
        <div class="euiHeaderAlert__text">{{yield to="text"}}</div>
        {{#if (has-block "action")}}
          <div class="euiHeaderAlert__action euiLink">{{yield
              to="action"
            }}</div>
        {{/if}}
      </article>
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    randomId,
    EuiFlexGroup,
    EuiFlexItem
  })
}), templateOnly("eui-header-alert", "EuiHeaderAlert"));

export { EuiHeaderAlert as default };
//# sourceMappingURL=eui-header-alert.js.map
