<div class="sam-text-header">
  <div class="header-buttons">
    <button class="header-btn" title="Lock" (click)="onClickLock()">
      <span class="emoji">🔒</span>
    </button>
    @if (devMode) {
      <button class="header-btn" title="Test Permission Prompt" (click)="onTestPrompt()">
        <span class="emoji">✨</span>
      </button>
    }
  </div>
  <span>Logs</span>
  <div class="logs-actions">
    <button class="btn btn-sm btn-secondary" title="Refresh logs" (click)="onRefresh()">Refresh</button>
    <button class="btn btn-sm btn-secondary" title="Clear logs" (click)="onClear()">Clear</button>
  </div>
</div>

<div class="logs-container">
  @if (logs.length === 0) {
    <div class="logs-empty">No activity logged yet</div>
  }
  @for (log of logs; track log.timestamp) {
    <div class="log-entry" [class]="getLevelClass(log.level)">
      <span class="log-icon emoji">{{ log.icon }}</span>
      <span class="log-time">{{ log.timestamp | date:'HH:mm:ss' }}</span>
      <span class="log-message">{{ log.message }}</span>
    </div>
  }
</div>
