<div class="code-block group">
<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>
<pre class="code-pre"><code class="code-content" [innerHTML]="highlightedCode()"></code></pre>
</div>