<section class="photos-page" lang="pt">
    <div class="container">
          <!-- Título -->
          <div class="titulo row ">
            <div class="d-none d-sm-block col-md-1"></div>

              <h2>Edição dos equipamentos:</h2>
              <div routerLink="/registro-equipamentos" class=" btn-list-el ">
                  <a>CADASTRAR EQUIPAMENTO</a>

              </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='{{machine.imagePath}}' alt="Avatar" class="img">

								 <h3> {{machine.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: 
															<div>
																<input [(ngModel)]="machine.date_last_maintenance.day" name="date_last_maintenance_day" type="text" class="date-style" size="2">
																/
																<input [(ngModel)]="machine.date_last_maintenance.month" name="date_last_maintenance_month" type="text" class="date-style" size="2">
																/
																<input [(ngModel)]="machine.date_last_maintenance.year" name="date_last_maintenance_year" type="text" class="date-style" size="4">
															</div>
														</label>
                            <label for="date_next_maintenance"> Data da próxima manutenção: 
															<div>
																<input [(ngModel)]="machine.date_next_maintenance.day" name="date_next_maintenance_day" type="text" class="date-style" size="2">
																/
																<input [(ngModel)]="machine.date_next_maintenance.month" name="date_next_maintenance_month" type="text" class="date-style" size="2">
																/
																<input [(ngModel)]="machine.date_next_maintenance.year" name="date_next_maintenance_year" type="text" class="date-style" size="4">
															</div>
														</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>

														<input type="file" name="image" class="options" (change) ="onFileSelect($event, i)"/>
                          </div>
                        </form>
												<!-- Botão "Remover máquina" -->
                        <div class="text-center">
													<button class="btn" style="margin-right: 15%;" (click)="removeMachine(i)"> Remover máquina </button>
                        <!-- Botão "salvar alteracoes" -->
                        	<button class="btn text-right" (click)="update(i)"> Salvar alterações </button>
												</div>
                  </span>
                </div>
            </div>

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