<ng-container *transloco="let t; prefix: 'manage-system'">
  @if (serverInfo) {
    <div class="mb-3">
      <h3>{{t('title')}}</h3>

      <div class="row">
        <div class="col-4">
          <div>{{t('version-title')}}</div>
          <div>{{serverInfo.kavitaVersion}}</div>
        </div>

        <div class="col-4">
          <div>{{t('installId-title')}}</div>
          <div>{{serverInfo.installId}}</div>
        </div>
      </div>

      <div class="row">
        <div class="col-4">
          <div>{{t('first-install-version-title')}}</div>
          <div>{{serverInfo.firstInstallVersion}}</div>
        </div>

        <div class="col-4">
          <div>{{t('first-install-date-title')}}</div>
          <div>{{serverInfo.firstInstallDate | date:'shortDate'}}</div>
        </div>
      </div>
    </div>

    <div class="setting-section-break"></div>
  }

  <div class="mb-3">
    <h3>{{t('more-info-title')}}</h3>
    <div class="row">
      <div class="col-4">{{t('home-page-title')}}</div>
      <div class="col"><a href="https://www.kavitareader.com" target="_blank" rel="noopener noreferrer">kavitareader.com</a></div>
    </div>
    <div class="row">
      <div class="col-4">{{t('wiki-title')}}</div>
      <div class="col"><a href="https://wiki.kavitareader.com" target="_blank" rel="noopener noreferrer">wiki.kavitareader.com</a></div>
    </div>
    <div class="row">
      <div class="col-4">{{t('discord-title')}}</div>
      <div class="col"><a href="https://discord.gg/b52wT37kt7" target="_blank" rel="noopener noreferrer">discord.gg/b52wT37kt7</a></div>
    </div>
    <div class="row">
      <div class="col-4">{{t('donations-title')}}</div>
      <div class="col"><a href="https://opencollective.com/kavita" target="_blank" rel="noopener noreferrer">opencollective.com/kavita</a></div>
    </div>
    <div class="row">
      <div class="col-4">{{t('source-title')}}</div>
      <div class="col"><a href="https://github.com/Kareadita/Kavita" target="_blank" rel="noopener noreferrer">github.com/Kareadita/Kavita</a></div>
    </div>
    <div class="row">
      <div class="col-4">{{t('localization-title')}}</div>
      <div class="col"><a href="https://hosted.weblate.org/engage/kavita/" target="_blank" rel="noopener noreferrer">Weblate</a><br/></div>
    </div>
    <div class="row">
      <div class="col-4">{{t('feature-request-title')}}</div>
      <div class="col"><a href="https://github.com/Kareadita/Kavita/discussions/2529" target="_blank" rel="noopener noreferrer">https://github.com/Kareadita/Kavita/discussions/</a><br/></div>
    </div>
  </div>

  <div class="setting-section-break"></div>

  <div class="mb-3">
    <h3>{{t('updates-title')}}</h3>
    <app-changelog />
  </div>
</ng-container>
