<section *ngIf="isMenuActive('overview') &amp;&amp; dataService.UserSteamId != undefined &amp;&amp; dataService.hasFeatureAccess('home', 'myprofile') &amp;&amp; dataService.hasFeatureAccess('pages', 'player', dataService.UserSteamId)" class="w3-container">
  <h3 class="theme-text-d1">My Profile</h3>
  <div class="w3-card-4 w3-margin-bottom">
    <header class="w3-container theme-d1">
      <h3>Hello, {{dataService.Servers.User.Name}}</h3>
    </header>
    <div class="w3-container theme-l1">
      <p>
        Find your tames, view base stats and keep track of their food status. Get notified of pending imprints, the amount of fertilizer and gasoline remaining in your crops and generators. This and much more is available in your profile.
      </p>
      <p><a [routerLink]="'/player/' + dataService.UserSteamId" class="" style="text-decoration: none;">View my profile&nbsp;❯</a></p>
    </div>
  </div>
</section>
<section *ngIf="isMenuActive('overview') &amp;&amp; dataService.Servers != undefined &amp;&amp; serverCount > 0 &amp;&amp; dataService.hasFeatureAccess('home', 'serverlist')" class="w3-container">
  <h3 class="theme-text-d1">Servers</h3>
  <div *ngFor="let server of dataService.Servers.Servers" class="w3-card-4 w3-margin-bottom">
    <header class="w3-container theme-d1">
      <h3><a *ngIf="dataService.hasFeatureAccess('pages', 'server'); else server_no_link" [routerLink]="'/server/' + server.Key" style="text-decoration: none;"><ng-container *ngIf="server.MapName">{{server.MapName}} - </ng-container>{{server.Key}}</a><ng-template #server_no_link><ng-container *ngIf="server.MapName">{{server.MapName}} - </ng-container>{{server.Key}}</ng-template></h3>
    </header>
    <div class="w3-container theme-l1">
      <p class="w3-small">
        Last Update {{server.LastUpdate}}, Next Update {{server.NextUpdate || '-'}}
      </p>
      <p *ngIf="dataService.hasFeatureAccess('pages', 'server')"><a [routerLink]="'/server/' + server.Key" class="" style="text-decoration: none;">View server ❯</a></p>
      <p *ngIf="dataService.hasFeatureAccess('pages', 'admin-server')"><a [routerLink]="'/admin/' + server.Key" class="" style="text-decoration: none;">Admin ❯</a></p>
    </div>
  </div>
</section>
<section *ngIf="isMenuActive('overview') &amp;&amp; dataService.Servers != undefined &amp;&amp; dataService.hasFeatureAccess('home', 'online')" class="w3-container">
  <h3 class="theme-text-d1">Online <span class="w3-tag w3-large theme-d1">{{onlinePlayerCount}}</span></h3>
  <div *ngIf="onlinePlayerCount == 0; else online_players_list">There are no players online...</div>
  <ng-template #online_players_list>
    <div class="w3-card-4 w3-responsive">
      <table class="w3-table w3-striped w3-bordered border-theme">
          <tr class="theme-d1">
              <th>Steam Name</th>
              <th>Character Name</th>
              <th>Tribe Name</th>
              <th>Discord Tag</th>
              <th>Server</th>
              <th>Time Online</th>
          </tr>
          <ng-container *ngFor="let server of dataService.Servers.Servers">
            <tr *ngFor="let player of server.OnlinePlayers">
              <td>{{player.SteamName}}</td>
              <td>{{player.CharacterName}}</td>
              <td>{{player.TribeName}}</td>
              <td>{{player.DiscordName}}</td>
              <td>{{server.Key}}</td>
              <td>{{player.TimeOnline}}</td>
            </tr>
          </ng-container>
      </table>
    </div>
  </ng-template>
</section>
<ng-container *ngFor="let server of dataService.Servers?.Servers">
  <section *ngIf="isMenuActive(server.Key) &amp;&amp; dataService.Servers != undefined &amp;&amp; dataService.hasFeatureAccess('home', 'serverdetails')" class="w3-container">
    <div class="w3-card-4 w3-responsive w3-margin-bottom">
      <header class="w3-container theme-d1">
        <h3><a *ngIf="dataService.hasFeatureAccess('pages', 'server'); else serverdetails_no_link" [routerLink]="'/server/' + server.Key" style="text-decoration: none;">{{server.Name}}</a><ng-template #serverdetails_no_link>{{server.Name}}</ng-template></h3>
      </header>
      <div class="w3-container theme-l1">
        <table class="w3-table w3-bordered w3-small border-theme serverdetails">
            <tr>
              <th class="theme-text-d1">Address</th>
              <td style="width: max-content;">{{server.Address}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Version</th>
              <td>{{server.Version}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Player Slots</th>
              <td>{{server.OnlinePlayerMax}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Map</th>
              <td>{{server.MapName}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">In-Game Day</th>
              <td>{{server.InGameTime}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Tamed Creatures</th>
              <td>{{server.TamedCreatureCount | number}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Cloud Creatures</th>
              <td>{{server.CloudCreatureCount | number}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Wild Creatures</th>
              <td>{{server.WildCreatureCount | number}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Structures</th>
              <td>{{server.StructureCount | number}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Players</th>
              <td>{{server.PlayerCount | number}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Tribes</th>
              <td>{{server.TribeCount | number}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Last Update</th>
              <td>{{server.LastUpdate}}</td>
            </tr>
            <tr>
              <th class="theme-text-d1">Next Update</th>
              <td>{{server.NextUpdate}}</td>
            </tr>
            <tr style="border-bottom: none;">
              <th class="theme-text-d1">Uptime</th>
              <td>{{server.ServerStarted ? dataService.toRelativeDate(server.ServerStarted) : '-'}}</td>
            </tr>
          </table>
      </div>
    </div>

    <!--<h3 class="theme-text-d1"><a *ngIf="dataService.hasFeatureAccess('pages', 'server'); else serverdetails_no_link" [routerLink]="'/server/' + server.Key" style="text-decoration: none;">{{server.Name}}</a><ng-template #serverdetails_no_link>{{server.Name}}</ng-template></h3>
    <div class="w3-responsive w3-margin-bottom">
      <table class="w3-table w3-bordered w3-small border-theme serverdetails">
        <tr>
          <th class="theme-text-d1">Address</th>
          <td style="width: max-content;">{{server.Address}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Version</th>
          <td>{{server.Version}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Player Slots</th>
          <td>{{server.OnlinePlayerMax}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Map</th>
          <td>{{server.MapName}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">In-Game Time</th>
          <td>{{server.InGameTime}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Tamed Creatures</th>
          <td>{{server.TamedCreatureCount | number}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Cloud Creatures</th>
          <td>{{server.CloudCreatureCount | number}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Wild Creatures</th>
          <td>{{server.WildCreatureCount | number}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Structures</th>
          <td>{{server.StructureCount | number}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Players</th>
          <td>{{server.PlayerCount | number}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Tribes</th>
          <td>{{server.TribeCount | number}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Last Update</th>
          <td>{{server.LastUpdate}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Next Update</th>
          <td>{{server.NextUpdate}}</td>
        </tr>
        <tr>
          <th class="theme-text-d1">Uptime</th>
          <td>{{server.ServerStarted ? dataService.toRelativeDate(server.ServerStarted) : '-'}}</td>
        </tr>
      </table>
    </div>-->
    <ng-container *ngIf="dataService.hasFeatureAccess('home', 'online')">
      <h3 class="theme-text-d1">Online <span class="w3-tag w3-large theme-d1">{{server.OnlinePlayerCount}}</span></h3>
      <div *ngIf="server.OnlinePlayerCount == 0; else server_online_players_list">There are no players online...</div>
      <ng-template #server_online_players_list>
        <div class="w3-card-4 w3-responsive w3-margin-bottom">
          <table *ngIf="isMenuActive(server.Key)" class="w3-table w3-striped w3-bordered border-theme">
              <tr class="theme-d1">
                  <th>Steam Name</th>
                  <th>Character Name</th>
                  <th>Tribe Name</th>
                  <th>Discord Tag</th>
                  <th>Time Online</th>
              </tr>
              <tr *ngFor="let player of server.OnlinePlayers">
                <td>{{player.SteamName}}</td>
                <td>{{player.CharacterName}}</td>
                <td>{{player.TribeName}}</td>
                <td>{{player.DiscordName}}</td>
                <td>{{player.TimeOnline}}</td>
              </tr>
          </table>
        </div>
      </ng-template>
    </ng-container>
  </section>
</ng-container>
<section *ngIf="isMenuActive('overview') &amp;&amp; dataService.hasFeatureAccess('home', 'externalresources')" class="w3-container margin-top">
  <h3 class="theme-text-d1">External Resources</h3>
  <div class="w3-card-4 w3-margin-bottom">
    <header class="w3-container theme-d1">
      <h3>Wiki</h3>
    </header>
    <div class="w3-container theme-l1">
      <p><a href="http://ark.gamepedia.com/" style="text-decoration: none;">Official ARK Survival Evolved Wiki&nbsp;❯</a></p>
    </div>
  </div>
  <div class="w3-card-4 w3-margin-bottom">
    <header class="w3-container theme-d1">
      <h3>Taming Calculators</h3>
    </header>
    <div class="w3-container theme-l1">
      <ul class="w3-ul" style="margin: 7px 0px;">
        <li style="padding-left: 0px;"><a href="http://www.survive-ark.com/taming-calculator/" style="text-decoration: none;">Survive ARK: Taming Calculator&nbsp;❯</a></li>
        <li style="padding-left: 0px;"><a href="http://www.dododex.com/" style="text-decoration: none;">Dododex: Taming Calculator&nbsp;❯</a></li>
      </ul>
    </div>
  </div>
  <div class="w3-card-4 w3-margin-bottom">
    <header class="w3-container theme-d1">
      <h3>Creature Library and Breeding Suggestions</h3>
    </header>
    <div class="w3-container theme-l1">
      <p><a href="https://github.com/cadon/ARKStatsExtractor" style="text-decoration: none;">ARK Smart Breeding&nbsp;❯</a></p>
    </div>
  </div>
</section>