@if (!devMode) {
  <main class="diagnostics-page">
    <section class="diagnostics-card">
      <h1>{{ 'diagnostics.disabledTitle' | translate }}</h1>
      <p>{{ 'diagnostics.disabledDescription' | translate }}</p>
    </section>
  </main>
} @else {
  <main class="diagnostics-page">
    @if (report$ | async; as report) {
      <section class="diagnostics-hero diagnostics-card">
        <div>
          <h1>{{ 'diagnostics.title' | translate }}</h1>
          <p>{{ 'diagnostics.generatedAt' | translate:{ value: report.generatedAt } }}</p>
        </div>
        <div class="health-score">
          <strong>{{ report.summary.score }}%</strong>
          <span>{{ 'diagnostics.healthScore' | translate }}</span>
        </div>
      </section>

      <section class="diagnostics-grid">
        <article class="diagnostics-card summary-card">
          <h2>{{ 'diagnostics.summary' | translate }}</h2>
          <ul>
            <li>{{ 'diagnostics.passedChecks' | translate:{ count: report.summary.passedChecks } }}</li>
            <li>{{ 'diagnostics.warnings' | translate:{ count: report.summary.warningCount } }}</li>
            <li>{{ 'diagnostics.errors' | translate:{ count: report.summary.errorCount } }}</li>
            <li>{{ 'diagnostics.critical' | translate:{ count: report.summary.criticalCount } }}</li>
          </ul>
        </article>

        <article class="diagnostics-card">
          <h2>{{ 'diagnostics.healthChecks' | translate }}</h2>
          <ul class="check-list">
            @for (check of report.checks; track check.key) {
              <li [class.failed]="!check.passed">
                <strong>{{ ('diagnostics.checks.' + check.key) | translate }}</strong>
                <span>{{ check.passed ? ('diagnostics.ok' | translate) : ('diagnostics.failed' | translate) }}</span>
              </li>
            }
          </ul>
        </article>
      </section>

      <section class="diagnostics-card">
        <h2>{{ 'diagnostics.results' | translate }}</h2>
        @if (report.entries.length === 0) {
          <p>{{ 'diagnostics.noIssues' | translate }}</p>
        } @else {
          <div class="entries">
            @for (entry of report.entries; track entry.code + entry.affectedComponent + entry.description) {
              <article class="entry" [attr.data-severity]="entry.severity">
                <div class="entry-head">
                  <span class="severity">{{ ('diagnostics.severity.' + entry.severity) | translate }}</span>
                  <code>{{ entry.code }}</code>
                </div>
                <h3>{{ tDiagnostic(entry.title) }}</h3>
                <p>{{ tDiagnostic(entry.description) }}</p>
                <p><strong>{{ 'diagnostics.affectedComponent' | translate }}:</strong> {{ entry.affectedComponent }}</p>
                <p><strong>{{ 'diagnostics.suggestedResolution' | translate }}:</strong> {{ tDiagnostic(entry.suggestedResolution) }}</p>
              </article>
            }
          </div>
        }
      </section>
    }
  </main>
}