<header>
  <!-- Navbar -->
    <nav class="section__container nav__container">
        <div class="nav__logo">
            <img class="img" src="../../../assets/image/logoHealMap.png" alt="logo-healmap">
            Heal<span [routerLink]="['/homePrivada']">Map</span></div>
          <ul class="nav__links">
            <li class="link"><a href="/homePrivada">Home</a></li>
            <li class="link"><a href="/sobre">Sobre nós</a></li>
            <li class="link"><a href="perfil">Perfil</a></li> 
          </ul>
    </nav>
  </header>

  <!-- Estrutura da listagem -->
  <main> 
    <form (submit)="onSearchSubmit($event)">
      <input type="text" required [(ngModel)]="searchQuery" name="searchQuery"  placeholder="Pesquisar pacientes pelo nome"/>
      <input type="submit" name="search-paciente" value="Pesquisar">
      </form>

  <main> 
      <div class="container">
          <div class="user-box" *ngFor="let paciente of pacientes">
              <h2>INFORMAÇÕES DO PACIENTE</h2>
              <img src="../../../assets/list-pacientes/pencil.svg" class="edit-user" alt="edit-user" [routerLink]="['/attPaciente', paciente.id]">
              <img src="../../../assets/list-pacientes/user.svg" class="user-pic" alt="user-pic">
              <p class="user-name">{{ paciente.nome }}</p>
              <button mat-raised-button class="btn-cid" (click)="openDialog()">Adicionar CID</button>             
              <div class="user-bottom">
                  <p>CPF: {{ paciente.cpf}}</p>
                  <p>Gênero: {{ paciente.genero }}</p>
                  <p>Data de Nascimento: {{ paciente.dataNasci }}</p>
                  <p>Cidade: {{ paciente.cidade }}</p>
                  <p>UF: {{ paciente.uf }}</p>
              </div>
          </div>
      </div>
  </main>
