<div class="container">
  <header-i18n showLangText="false" class="langs"></header-i18n>
  <div class="wrap" style="display: flex; flex-direction: column">
    <div class="top">
      <div class="head">
        <img class="logo" src="./assets/brand.svg" alt="" />
      </div>
      <div class="desc">{{ 'app.passport.desc' | i18n }}</div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 10, offset: 2 }">
        <div class="mobile-hide passport-left-content">
          <div class="passport-intro">{{ 'app.passport.intro-1' | i18n }}<br />{{ 'app.passport.intro-2' | i18n }}</div>
          <nz-divider></nz-divider>
          <div class="passport-points">
            <div class="point-item">
              <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
              <span>{{ 'about.point.1' | i18n }}</span>
            </div>
            <div class="point-item">
              <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
              <span>{{ 'about.point.2' | i18n }}</span>
            </div>
            <div class="point-item">
              <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
              <span>{{ 'about.point.3' | i18n }}</span>
            </div>
            <div class="point-item">
              <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
              <span>{{ 'about.point.4' | i18n }}</span>
            </div>
            <div class="point-item">
              <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
              <span>{{ 'about.point.5' | i18n }}</span>
            </div>
            <div class="point-item">
              <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
              <span>{{ 'about.point.6' | i18n }}</span>
            </div>
          </div>
          <nz-divider></nz-divider>
        </div>
      </div>
      <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12 }">
        <router-outlet></router-outlet>
      </div>
    </div>
    <global-footer style="border-top: 1px solid #d692e3; margin-top: auto">
      <div style="margin-top: 16px">
        Apache HertzBeat™ {{ version }}<br />
        Copyright &copy; {{ currentYear }}
        <a href="https://hertzbeat.apache.org" target="_blank">Apache HertzBeat™</a>
        <br />
        Licensed under the Apache License, Version 2.0
      </div>
    </global-footer>
  </div>
</div>
