<main class="static-page page-container" [attr.dir]="dir()">
  @if (loading()) {
    <section class="static-page__state" role="status" aria-live="polite" aria-busy="true">
      <app-skeleton shape="text" width="40%" height="28px" />
      <app-skeleton shape="text" height="16px" />
      <app-skeleton shape="text" height="16px" />
      <app-skeleton shape="text" width="70%" height="16px" />
    </section>
  } @else if (error()) {
    <section class="static-page__state">
      <app-empty-state [title]="'common.errorTitle' | translate" [description]="'common.errorDescription' | translate">
        <div slot="actions">
          <app-button variant="primary" [routerLink]="homeRoute()">{{ 'staticPages.backHome' | translate }}</app-button>
        </div>
      </app-empty-state>
    </section>
  } @else if (notFound()) {
    <section class="static-page__state">
      <app-empty-state title="404" [description]="'staticPages.notFound' | translate">
        <div slot="actions">
          <app-button variant="primary" [routerLink]="homeRoute()">{{ 'staticPages.backHome' | translate }}</app-button>
        </div>
      </app-empty-state>
    </section>
  } @else {
    <article class="static-page__content">
      @if (title()) {
        <h1>{{ title() }}</h1>
      }
      <div class="static-page__html" [innerHTML]="safeHtml()"></div>
    </article>
  }
</main>
