<section class="photos-page" lang="pt">
    <div class="container">
          <!-- Título -->
          <div class="btn-list justify-">
            <div class="row ">
              <h2> Visualização dos aceleradores </h2>
            <div routerLink="/registro-equipamentos" class=" btn-list-el ">
                <a>CADASTRAR EQUIPAMENTO</a>

            </div>
            </div>
          </div>
      <!-- Row  -->
      <div class="row justify-content-center">
            <div class="col-sm-5 col-md-5 pt-4" *ngFor="let machine of machines; let i = index">
                <div class="container photos-btn">
                  <img src='../assets/images/logo.png' alt="Avatar" class="img">

                 <h3> {{serial_number}} </h3>
                 <button class="btn"(click)="changeButton(i)">Mais Informações</button>
                  <span class="more_text">

                        <!-- Formulario  -->
                        <form>
                          <div class="form-group">
                            <h4>Informações Gerais</h4>
                            <label for="serial_number">Número de Série: <input [(ngModel)]="machine.serial_number" name="serial_number" type="text" class="form-style"></label>
                            <label for="room"> Sala: <input [(ngModel)]="machine.room" name="room" type="text" class="form-style"></label>
                            <label for="date_last_maintenance"> Data da última manutenção: <input [(ngModel)]="machine.date_last_maintenance" name="date_last_maintenance" type="text" class="form-style"></label>
                            <label for="date_next_maintenance"> Data da próxima manutenção: <input [(ngModel)]="machine.date_next_maintenance" name="date_next_maintenance" type="text" class="form-style"></label>
                            <label for="Status">Estado: <input [(ngModel)]="machine.Status" name="Status" type="text" class="form-style"></label>

                            <h4>Endereço</h4>
                            <label for="address">Rua: <input [(ngModel)]="machine.address" name="address" type="text" class="form-style"></label>
                            <label for="address_number">Número: <input [(ngModel)]="machine.address_number" name="address_number" type="text" class="form-style"></label>
                            <label for="district">Bairro: <input [(ngModel)]="machine.district" name="district" type="text" class="form-style"></label>
                            <label for="city">Cidade: <input [(ngModel)]="machine.city" name="city" type="text" class="form-style"></label>
                            <label for="state">Estado: <input [(ngModel)]="machine.state" name="state" type="text" class="form-style"></label>

                          </div>
                        </form>
                        <!-- Botao "salvar alteracoes" -->
                        <div class="text-right"> <button class="btn text-right" (click)="update(i)"> Salvar alterações </button></div>

                  </span>
                </div>
            </div>

        </div>
    </div>
  </section>