<app-navbar></app-navbar>
<body>
<div class="title">
  <h1 class="title">Buscar Unidades</h1>
</div>
<div class="subtitle">Te ajudaremos a encontrar a unidade mais próxima de você</div>

<div class="busca">
  <div class="input-row">
    <div class="input">
      <label for="estado">Selecione seu estado: </label>
      <select id="estado" [(ngModel)]="selectedEstadoId" (change)="onEstadoChange()">
        <option value="" disabled selected>Selecione um estado</option>
        <option *ngFor="let estado of estados" [value]="estado.id">{{ estado.nome }}</option>
      </select>
    </div>
    
    <div class="input-cidade" *ngIf="cidades.length > 0">
      <label for="cidade">Selecione a sua cidade: </label>
      <select id="cidade">
        <option value="" disabled selected></option>
        <option *ngFor="let cidade of cidades" [value]="cidade.id">{{ cidade.nome }}</option>
      </select>
    </div>
  </div>
  
  <div class="botao-busca">
    <button (click)="listarUnidades()" class="listButton">Buscar Unidades</button>
  </div>
</div>

<div class="main-card">
  <div class="container">
    <div *ngFor="let unidade of unidades" class="card">
      <div class="box">
        <div class="content">
          <div>
            <h3>{{ unidade.title }}</h3>
            <p>{{ unidade.description }}</p>
          </div>
          <img src="../../../assets/buscar-unidade/unidSaude.svg" alt="logo">
        </div>
      </div>
    </div>
  </div>
</div>
</body>