I was basically making a E-commerce project using spring boot, thymleaf, html, css. And I am getting and server error while parsing the thymeleaf template which is There was an unexpected error (type=Internal Server Error, status=500). An error happened during template parsing (template: "class path resource [templates/EditProduct.html]")

Here is my controller class:

@GetMapping("/edit")
    public String showEditPage(
            Model model,
            @RequestParam int id
            ) {
        
        try {
            
            Product product = repo.findById(id).get();
            model.addAttribute("product", product);
            
            ProductDto productDto = new ProductDto();
            productDto.setName(product.getName());
            productDto.setBrand(product.getBrand());
            productDto.setCategory(product.getCategory());
            productDto.setPrice(product.getPrice());
            productDto.setDescription(product.getDescription());
            
            model.addAttribute("productDto", productDto);
        }
        catch(Exception ex){
            System.out.println("Execption:  " + ex.getMessage());
            return "redirect:/products";
        }
        
        return "EditProduct";
    } 
    
}

Here is my Parsing template:

<form method="post" enctype="multipart/form-data" th:object="${productDto}">
 <div class="row mb-3">
 <label class="col-sm-4 col-form-label">ID</label>
 <div class="col-sm-8">
 <input readonly class="form-control-plaintext" th:field="${product.id}">
   </div>
   </div>
                                            
<div class="row mb-3">
<label class="col-sm-4 col-form-label">Name</label>
<div class="col-sm-8">
<input class="form-control" th:field="${productDto.name}">
<p th:if="${#fields.hasErrors('name')}" th:errorclass="text-danger th:errors="${productDto.name}"></p>             
</div>
</div>
                                                        
                                                        
<div class="row mb-3">
<label class="col-sm-4 col-form-label">Brand</label>
 <div class="col-sm-8">
 <input class="form-control" th:field="${productDto.brand}">
 <p th:if="${#fields.hasErrors('brand')}" th:errorclass="text-danger" th:errors="${productDto.brand}"></p>
  </div>
  </div>
                                
 <div class="row mb-3">
<label class="col-sm-4 col-form-label">Category</label>
<div class="col-sm-8">
<select class="form-select" th:field="${productDto.category}">
<option value='Motherboard'>Motherboard</option>
<option value='Ram'>Ram</option>
<option value='Graphics Card'>Graphics Card</option>
<option value='Storage'>Storage</option>
<option value='PowerSupplyUnit'>PowerSupplyUnit</option>
<option value='Cabinet'>Cabinet</option>
<option value='Monitor'>Monitor</option>
<option value='Keyboard'>Keyboard</option>
<option value='Mouse'>Mouse</option>
<option value='Gaming Headset'>Gaming Headset</option>
</select>

<p th:if="${#fields.hasErrors('category')}" th:errorclass="text-danger" th:errors="${productDto.category}"></p>
</div>
</div>
                                        
<div class="row mb-3">
<label class="col-sm-4 col-form-label">Price</label>
<div class="col-sm-8">
<input class="form-control" type="number" step="0.01" min="0" th:field="${productDto.price}">
<p th:if="${#fields.hasErrors('price')}" th:errorclass="text-danger" th:errors="${productDto.price}"></p>
</div>
</div>
                                
<div class="row mb-3">
<label class="col-sm-4 col-form-label">Description</label>
<div class="col-sm-8">
<textarea class="form-control" th:field="${productDto.description}"></textarea>
<p th:if="${#fields.hasErrors('description')}" th:errorclass="text-danger"
th:errors="${productDto.description}"></p>
</div>
</div>
                                                
<div class="row mb-3"> 
<div class="offset-sm-4 col-sm-8">
<img th:src="@{'/images/' + ${product.imageFilename}}"
alt="..." width="150">
</div>  
</div>
                                        
<div class="row mb-3">
<label class="col-sm-4 col-form-label">Image</label>
<div class="col-sm-8">
<input class="form-control" type="file"  th:field="${productDto.imageFile}">
<p th:if="${#fields.hasErrors('imageFile')}" th:errorclass="text-danger"
th:errors="${productDto.imageFile}"></p>
</div>
</div>
                                
<div class="row mb-3">
<label class="col-sm-4 col-form-label">Created At</label>
<div class="col-sm-8">
<input readonly class="form-control-plaintext" th:value="${product.createdAt}">     
</div>
</div>      
                                         
<div class="row">
<div class="offset-sm-4 col-sm-4 d-grid">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-sm-4 d-grid">
<a class="btn btn-outline-primary" href="/products" role="button">Cancel</a>
</div>
</div>
                                
</form>
</div>
</div>
                                
        </div>
    </div>  

Here is my html thymleaf template and I am getting the following error:

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Thu Jul 18 22:35:50 PDT 2024
There was an unexpected error (type=Internal Server Error, status=500).
An error happened during template parsing (template: "class path resource [templates/EditProduct.html]")
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/EditProduct.html]")