@if (config) {
  <div #container class="code-block">
    @if (header) {
      <div class="code-block__header">
        <span class="code-block__header__title">{{ title }}</span>
        @if (showCopyButton) {
          <button
            type="button"
            class="code-block__header__action"
            (click)="copyToClipboard()"
            [attr.aria-label]="copied ? copiedLabel : copyLabel"
          >
            <span class="code-block__header__action-content" [class.is-copied]="copied">
              @if (copied) {
                <span class="code-block__header__action-label">{{ copiedLabel }}</span>
              } @else {
                <span class="fa-regular fa-copy" aria-hidden="true"></span>
              }
            </span>
          </button>
        }
      </div>
    }

    @if (body) {
      <div class="code-block__body">
        @switch (type) {
          @case ('text') {
            <pre
              #codeElement
              class="language-{{ language || 'typescript' }}"
              [attr.data-line]="highlightLines"
            >
              <code [textContent]="content"></code>
            </pre>
          }
          @case ('component') {
            @if (component) {
              <ng-template
                addComponent
                [component]="component"
                [inputComponent]="inputs"
              ></ng-template>
            }
          }
        }
      </div>
    }
    @if (config.footer?.text) {
      <div class="code-block__footer">
        {{ config.footer?.text }}
      </div>
    }
  </div>
}