@page "/customers"
@using Server.Data
@using Server.Model
@rendermode InteractiveServer

<h3>Kunden</h3>

@if (EditFormShow && EditFormObject != null)
{
  <div class="mb-3">
    <label class="form-label">Name</label>
    <InputText DisplayName="Name" class="form-control" @bind-Value="@EditFormObject.Name"></InputText>
  </div>
  
  <div class="mb-3">
    <label class="form-label">Name2</label>
    <InputText DisplayName="Name2" class="form-control" @bind-Value="@EditFormObject.Name2"></InputText>
  </div>
  
  <div class="mb-3">
    <label class="form-label">Street</label>
    <InputText DisplayName="Street" class="form-control" @bind-Value="@EditFormObject.Street"></InputText>
  </div>
  
  <div class="mb-3">
    <label class="form-label">Zip</label>
    <InputText DisplayName="Zip" class="form-control" @bind-Value="@EditFormObject.Zip"></InputText>
  </div>
  
  <div class="mb-3">
    <label class="form-label">City</label>
    <InputText DisplayName="City" class="form-control" @bind-Value="@EditFormObject.City"></InputText>
  </div>
  
  <div class="mb-3">
    <label class="form-label">Phone</label>
    <InputText DisplayName="Phone" class="form-control" @bind-Value="@EditFormObject.Phone"></InputText>
  </div>
  
  <button type="button" class="btn btn-sm btn-primary" @onclick="SaveCustomerAsync"><i class="fas fa-save"></i> Speichern</button>
  <button type="button" class="btn btn-sm btn-secondary" @onclick="HideEditFormAsync">Abbrechen</button>
}
else
{
  <button type="button" class="btn btn-primary" @onclick="ShowCreateAsync">Neuer Kunde</button>
}

<hr />
<div class="row">
@foreach (var customer in CustomerData.Instance.Customers.Where(x => x.State != RecordState.Deleted))
{
  <div class="col-md-auto pt-3">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">@customer.Name</h5>
        <p class="card-text">
          @customer.Name2<br>
          @customer.Street<br>
          @customer.Zip - @customer.City<br>
          @customer.Phone<br>
        </p>
        <button type="button" class="btn btn-sm btn-primary" @onclick="() => EditCustomerAsync(customer)">Bearbeiten</button>
        <button type="button" class="btn btn-sm btn-danger" @onclick="() => DeleteCustomerAsync(customer)">Löschen</button>
      </div>
    </div>
  </div>
}
</div>