@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 @((city == selectedCity) ? "border-primary" : "")">
        <img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
        <div class="card-body @((city == selectedCity) ? "active" : "")">
          <button class="btn btn-primary" @onclick="@(() => { SelectCity(city); })">@city</button>
        </div>
      </div>
    </div>
    }
  </div>
</div>

<br/>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search servers"
    @bind-value="serverFilter"
    @bind-value:event="oninput" />
  <button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
</div>
<br/>
<a href="@($"/servers/add")" class="btn btn-primary">Add</a>
<br/>

<ServerListComponent></ServerListComponent>

@code {
  private List<string> cities = ServersRepository.GetCities();
  private string selectedCity = "Eindhoven";
  private string _serverFilter = "";
  private string serverFilter {
    get => _serverFilter;
    set
    {
      _serverFilter = value;
      //this.servers = ServersRepository.SearchServers(_serverFilter);
      this.selectedCity = string.Empty;
    }
  }

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

  private void HandleSearch()
  {
    //this.servers = ServersRepository.SearchServers(serverFilter);
    this.selectedCity = string.Empty;
  }
}