ClassCrud: HTML Page

<div class="content">
  <h3>Classes</h3>
  <div class="toolbar">
    <div id="search-wrapper">
      <i class="search-icon fas fa-search"></i>
      <input
        type="text"
        id="search"
        placeholder="Search..."
        [(ngModel)]="searchTerm"
      />
    </div>
    <div class="content-container">
      <div class="button-container">
        <button class="addBtn" (click)="openModal()">Create Class</button>
      </div>
    </div>
  </div>

  <div class="table-responsive">
    <table class="styled-table">
      <thead>
        <tr>
          <th>Class Name</th>
          <th>Class Description</th>
          <th>Assign Teacher</th>
          <th>Action Controls</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let class of filteredClasses">
          <td>{{ class.className }}</td>
          <td>{{ class.classDescription }}</td>
          <td>{{ getEmployeeName(class.employeeId) }}</td>
          <td>
            <button class="edit-btn" (click)="openEditModal(class)">
              Edit
            </button>
            <button class="delete-btn" (click)="openDeleteModal(class.classId)">
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div
    id="myModal"
    class="modal"
    [style.display]="showModal ? 'block' : 'none'"
  >
    <div class="modal-content">
      <span class="close" (click)="closeModal()">&times;</span>
      <div class="modal-body">
        <h3>Add Class</h3>
        <form (submit)="addClass()">
          <div class="form-group">
            <label for="className">Class Name:</label>
            <input
              type="text"
              id="className"
              name="className"
              [(ngModel)]="model.className"
              placeholder="Enter class name"
              required
            />
            <br />
            <small class="hint" style="color: red"
              >*Please enter the name of the class.</small
            >
          </div>
          <br />
          <div class="form-group">
            <label for="classDescription">Class Description:</label>
            <input
              type="text"
              id="classDescription"
              name="classDescription"
              [(ngModel)]="model.classDescription"
              placeholder="Enter merit description"
              required
            />
            <br />
            <small class="hint" style="color: red"
              >*Please enter the name of the class.</small
            >
            <br />
          </div>
          <div class="form-group">
            <label for="assignTeacherToClass">Assign Teacher to Class:</label>
            <select
              id="assignTeacherToClass"
              [(ngModel)]="model.employeeId"
              name="assignTeacherToClass"
              required>
              <option
                *ngFor="let employee of employees"
                [value]="employee.employeeId">
                {{ employee.firstName }} {{ employee.lastName }}
              </option>
            </select>
          </div>
          <div class="form-buttons">
            <button type="submit" class="btn add-btn">Add</button>
            <button type="button" class="btn cancel-btn" (click)="closeModal()">
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Edit Modal -->
  <div
    id="classModal"
    class="modal"
    [style.display]="showEditModal ? 'block' : 'none'"
  >
    <div class="modal-content">
      <span class="close" (click)="closeEditModal()">&times;</span>
      <div class="modal-body">
        <h3>Edit Class</h3>
        <form (submit)="updateClass()">
          <div class="form-group">
            <label for="editClassName">Class Name:</label>
            <input
              type="text"
              id="editClassName"
              name="className"
              [(ngModel)]="model.className"
              placeholder="Enter class name"
              required
            />
            <br />
            <small class="hint" style="color: red"
              >*Please enter updated name of the class.</small
            >
          </div>
          <div class="form-group">
            <label for="editClassDescription">Class Description:</label>
            <input
              type="text"
              id="editClassDescription"
              name="classDescription"
              [(ngModel)]="model.classDescription"
              placeholder="Enter class description"
              required
            />
            <br />
            <small class="hint" style="color: red"
              >*Please enter updated description of the class.</small
            >
          </div>
          <div class="form-group">
            <label for="assignTeacherToClass">Assign Teacher to Class:</label>
            <select
              id="assignTeacherToClass"
              [(ngModel)]="model.employeeId"
              name="assignTeacherToClass"
              required
            >
              <option
                *ngFor="let employee of employees"
                [value]="employee.employeeId"
              >
                {{ employee.firstName }} {{ employee.lastName }}
              </option>
            </select>
          </div>
          <div class="form-buttons">
            <button type="submit" class="btn add-btn">Update</button>
            <button
              type="button"
              class="btn cancel-btn"
              (click)="closeEditModal()"
            >
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- delete Modal -->
  <div
    id="deleteModal"
    class="modal"
    [style.display]="showDeleteModal ? 'block' : 'none'"
  >
    <div class="modal-content">
      <span class="close" (click)="closeDeleteModal()">&times;</span>
      <h3>Delete Class</h3>
      <p>Are you sure you want to delete this class.</p>
      <div class="form-buttons">
        <button class="btn add-btn" (click)="DeleteClass(currentClassId)">
          OK
        </button>
        <button
          type="button"
          class="btn cancel-btn"
          (click)="closeDeleteModal()"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>

  <!-- Success Modal -->
  <div
    id="successModal"
    class="modal"
    [style.display]="showSuccessModal ? 'block' : 'none'"
  >
    <div class="modal-content">
      <span class="close" (click)="closeSuccessModal()">&times;</span>
      <h3>Success!</h3>
      <p>Your class has been successfully created.</p>
      <div class="form-buttons">
        <button class="btn add-btn" (click)="closeSuccessModal()">OK</button>
      </div>
    </div>
  </div>

  <!-- Error Modal -->
  <div
    id="errorModal"
    class="modal"
    [style.display]="showErrorModal ? 'block' : 'none'"
  >
    <div class="modal-content">
      <span class="close" (click)="closeErrorModal()">&times;</span>
      <h3>Error!</h3>
      <p>There was a problem creating your class. Please try again.</p>
      <button class="ok-btn" (click)="closeErrorModal()">OK</button>
    </div>
  </div>
</div>