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

@inject NavigationManager NavigationManager

<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" @onclick="@(() => { SelectCity(city); })">@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>
      &nbsp;
      <EditForm
        Model="server"
        FormName="@($"formDeleteServer{server.Id}")"
        OnValidSubmit="@(() => { DeleteServer(server.Id); })">
        <button type="submit" class="btn btn-danger">Delete</button>
      </EditForm>
    </li>
  }
</ul>

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

  private void DeleteServer(int serverId)
  {
    if (serverId > 0)
    {
      ServersRepository.DeleteServer(serverId);
      NavigationManager.Refresh();
    }
  }

  private void SelectCity(string cityName)
  {
    this.selectedCity = cityName;
    this.servers = ServersRepository.GetServersByCity(this.selectedCity);
  }
}