@if (categories.length !== 0 || languages.length !== 0 || config.instance.isNSFW) {
  <div class="block specifics">
    <h4 i18n>Specifics</h4>

    @if (languages.length !== 0) {
      <div class="d-inline-block me-2">
        <span class="text-content top-1px me-1" i18n>Language: </span>

        @for (language of languages; track language) {
          <span class="pt-badge badge-primary me-1">{{ language }}</span>
        }
      </div>
    }

    @if (categories.length !== 0) {
      <div class="d-inline-block mt-2">
        <span class="text-content top-1px me-1" i18n>Categories: </span>

        @for (category of categories; track category) {
          <span class="pt-badge badge-secondary me-1">{{ category }}</span>
        }
      </div>
    }

    @if (config.instance.isNSFW) {
      <div i18n class="fw-bold text-content mt-3">{{ config.instance.name }} is dedicated to sensitive content.</div>
    }
  </div>
}

@if (descriptionElement) {
  <div class="block description">
    <h4 i18n>Description</h4>

    <my-custom-markup-container class="text-content" [content]="descriptionElement"></my-custom-markup-container>
  </div>
}

@if (aboutHTML.terms) {
  <div class="block terms">
    <h4 i18n class="section-title">Terms</h4>

    <div class="text-content" [innerHTML]="aboutHTML.terms"></div>
  </div>
}

<my-support-modal #supportModal [name]="config.instance.name" [content]="config.instance.support.text"></my-support-modal>