@page "/servers"
@using ServerManagement.Components.Controls

<h3>Servers</h3>
<br/>
<br/>

<div class="container-fluid text-center">
  <div class="row">
    @foreach(var city in cities)
    {
    <div class="col">

      <div class="card">
        <img src="@($"/images/{city}.png")" class="card-img-top" alt="@city")">
        <div class="card-body">
          <button class="btn btn-primary">@city</button>
        </div>
      </div>
    </div>
    }
  </div>
</div>

<br/>
<a href="@($"/servers/add")" class="btn btn-primary">Add</a>
<br/>
<ul>
  @foreach(var server in servers)
  {
    <li>
      @server.Name in @server.City is
      <span style="color:@(server.IsOnline ? "green" : "red")">
        @(server.IsOnline ? "online" : "offline")
      </span>;
      &nbsp;
      <a href="@($"/servers/{server.Id}")" class="btn btn-primary">Edit</a>
    </li>
  }
</ul>

@code {
  private List<string> cities = ServersRepository.GetCities();
  private List<Server> servers = ServersRepository.GetServersByCity("Eindhoven");
}