<div class="code-block group">
  <!-- Header bar -->
  <div class="code-header">
    @if (filename()) {
      <span class="filename">{{ filename() }}</span>
    }
    <div class="header-actions">
      @if (language()) {
        <span class="language-badge">{{ language() }}</span>
      }
      <button
        (click)="copyCode()"
        class="copy-button"
        [class.copied]="copied()"
        [title]="copied() ? 'Copied!' : 'Copy code'"
      >
        @if (copied()) {
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
          </svg>
        } @else {
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
          </svg>
        }
      </button>
    </div>
  </div>

  <!-- Code content -->
  <pre class="code-pre"><code class="code-content" [innerHTML]="highlightedCode()"></code></pre>
</div>
