@if (serverConfig()) {
  <div class="feature-table">
    @if (serverConfig()) {
      <table>
        <caption i18n>Features found on this instance</caption>

        <tr>
          <th i18n class="t-label" scope="row">PeerTube version</th>
          <td class="value">{{ getServerVersionAndCommit() }}</td>
        </tr>

        <tr>
          <th class="t-label" scope="row">
            <div i18n>Default sensitive content policy</div>
            <span i18n class="fs-7 fw-normal fst-italic">can be redefined by the users</span>
          </th>
          <td class="value">{{ buildNSFWLabel() }}</td>
        </tr>

        <tr>
          <th i18n class="t-label" scope="row">User registration</th>
          <td class="value">{{ buildRegistrationLabel() }}</td>
        </tr>

        <tr>
          <th i18n class="t-label" colspan="2">Video uploads</th>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Transcoding in multiple resolutions</th>
          <td>
            <my-feature-boolean [value]="serverConfig().transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Automatic transcription</th>
          <td>
            <my-feature-boolean [value]="serverConfig().videoTranscription.enabled"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Video uploads</th>
          <td>
            @if (serverConfig().autoBlacklist.videos.ofUsers.enabled) {
              <span i18n>Requires manual validation by moderators</span>
            }
            @if (!serverConfig().autoBlacklist.videos.ofUsers.enabled) {
              <span i18n>Automatically published</span>
            }
          </td>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Video quota</th>

          <td class="value">
            @if (initialUserVideoQuota !== -1) {
              {{ initialUserVideoQuota | bytes: 0 }}

              @if (dailyUserVideoQuota !== -1) {
                <ng-container i18n>({{ dailyUserVideoQuota | bytes: 0 }} per day)</ng-container>
              }

              <my-help tooltipPlacement="auto" helpType="custom">
                <div [innerHTML]="quotaHelpIndication"></div>
              </my-help>
            } @else {
              <ng-container i18n>Unlimited</ng-container>

              @if (dailyUserVideoQuota !== -1) {
                <ng-container i18n>({{ dailyUserVideoQuota | bytes: 0 }} per day)</ng-container>
              }
            }
          </td>
        </tr>

        <tr>
          <th i18n class="t-label" colspan="2">Live streaming</th>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Live streaming enabled</th>
          <td>
            <my-feature-boolean [value]="serverConfig().live.enabled"></my-feature-boolean>
          </td>
        </tr>

        @if (serverConfig().live.enabled) {
          <tr>
            <th i18n class="t-sub-label" scope="row">Transcode live video in multiple resolutions</th>
            <td>
              <my-feature-boolean [value]="serverConfig().live.transcoding.enabled && serverConfig().live.transcoding.enabledResolutions.length > 1"></my-feature-boolean>
            </td>
          </tr>
        }

        @if (serverConfig().live.enabled) {
          <tr>
            <th i18n class="t-sub-label" scope="row">Max parallel lives</th>
            <td i18n>
            {{ maxUserLives }} per user / {{ maxInstanceLives }} per instance
          </td>
          </tr>
        }

        <tr>
          <th i18n class="t-label" colspan="2">Video Import</th>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">HTTP import (YouTube, Vimeo, direct URL...)</th>
          <td>
            <my-feature-boolean [value]="serverConfig().import.videos.http.enabled"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Torrent import</th>
          <td>
            <my-feature-boolean [value]="serverConfig().import.videos.torrent.enabled"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Channel synchronization with other platforms (YouTube, Vimeo, ...)</th>
          <td>
            <my-feature-boolean [value]="serverConfig().import.videoChannelSynchronization.enabled"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-label" colspan="2">User Import/Export</th>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Users can export their data</th>
          <td>
            <my-feature-boolean [value]="serverConfig().export.users.enabled"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Users can import their data</th>
          <td>
            <my-feature-boolean [value]="serverConfig().import.users.enabled"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-label" colspan="2">Search</th>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Users can resolve distant content</th>
          <td>
            <my-feature-boolean [value]="serverConfig().search.remoteUri.users"></my-feature-boolean>
          </td>
        </tr>

        <tr>
          <th i18n class="t-label" colspan="2">Plugins & Themes</th>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Available themes</th>
          <td>
            @for (theme of serverConfig().theme.registered; track theme) {
              <span class="theme">
                {{ theme.name }}
              </span>
            }
          </td>
        </tr>

        <tr>
          <th i18n class="t-sub-label" scope="row">Plugins enabled</th>
          <td>
            @for (plugin of serverConfig().plugin.registered; track plugin) {
              <span class="plugin">
                {{ plugin.name }}
              </span>
            }
          </td>
        </tr>
      </table>
    }
  </div>
}