<h1>Student Management System</h1>

<!-- Add Student Form -->
<form>
  <label>ID</label>
  <input type="text" #id placeholder="Enter Student ID">

  <label>Name</label>
  <input type="text" #name placeholder="Enter Student Name">

  <label>Branch</label>
  <input type="text" #branch placeholder="Enter Student Branch">

  <button type="button" (click)="addStudent(id, name, branch)">Add Student</button>
</form>

<!-- Student Table -->
<table class="table table-bordered">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Branch</th>
    <th colspan="2">Actions</th>
  </tr>

  <tr *ngFor="let student of students">
    <td>{{ student.id }}</td>
    <td>{{ student.name }}</td>
    <td>{{ student.branch }}</td>
    <td>
      <button class="btn btn-primary" (click)="editStudent(student)">Edit</button>
      <button class="btn btn-danger" (click)="deleteStudent(student.id)">Delete</button>
    </td>
  </tr>
</table>

<!-- Edit Student Form (Displayed Only If a Student Is Selected) -->
<div *ngIf="selectedStudent">
  <h3>Edit Student</h3>
  <form>
    <label>ID</label>
    <input type="text" [(ngModel)]="selectedStudent.id" disabled>

    <label>Name</label>
    <input type="text" [(ngModel)]="selectedStudent.name">

    <label>Branch</label>
    <input type="text" [(ngModel)]="selectedStudent.branch">

    <button type="button" (click)="updateStudent()">Update</button>
  </form>
</div>