<h2>Students</h2>

<div style="border: 1px solid #ccc; padding: 15px; border-radius: 8px; background: #fdfdfd;">
  <h3>{{ selectedStudent ? 'Editing Student: ' + selectedStudent.id : 'Register New Student' }}</h3>

  <label>Firstname: <input #fName [value]="selectedStudent?.firstname || ''" /></label><br>
  <label>Lastname: <input #lName [value]="selectedStudent?.lastname || ''" /></label><br>
  <label>Email: <input #email [value]="selectedStudent?.email || ''" /></label><br>
  <label>Phone: <input #phone [value]="selectedStudent?.telephone || ''" /></label><br>

  <div style="background: #f0f4f8; padding: 10px; margin-top: 10px; border-radius: 5px;">
    <h4 style="margin: 0 0 10px 0;">Entity Relationships</h4>
    <label>Account:
      <input #accName [value]="selectedStudent?.account?.account_name || ''" placeholder="Username" />
    </label><br>
    <label>Group:
      <input #gName [value]="selectedStudent?.studyGroup?.name || ''" placeholder="Group Name" />
    </label><br>
    <label>City:
      <input #cityName [value]="selectedStudent?.address?.city || ''" placeholder="Location" />
    </label>
  </div>

  <br>

  @if (!selectedStudent) {
    <button (click)="add(fName.value, lName.value, email.value, phone.value, accName.value, gName.value, cityName.value);
                fName.value=''; lName.value=''; email.value=''; phone.value=''; accName.value=''; gName.value=''; cityName.value=''">
      Add New Student
    </button>
  } @else {
    <button (click)="update(fName.value, lName.value, email.value, phone.value, accName.value, gName.value, cityName.value)">
      Save All Changes
    </button>
    <button (click)="selectedStudent = null">Cancel</button>
  }
</div>

<hr>

@for (student of studentList(); track student.id; let isLast = $last) {
  <li style="margin-bottom: 25px; border-left: 4px solid #3498db; padding-left: 15px; list-style-type: none;">
    <strong>{{student.id}}</strong> {{ student.firstname }} {{ student.lastname }}
    <br>
    <small>{{ student.email }} | {{ student.telephone }}</small>

    <div style="font-size: 0.85em; margin-top: 8px; background: #fafafa; padding: 5px; border-radius: 4px;">
      @if (student.studyGroup) { <div style="color: #2c3e50;">📚 Group: {{ student.studyGroup.name }}</div> }
      @if (student.account) { <div style="color: #27ae60;">👤 Account: {{ student.account.account_name }}</div> }
      @if (student.address) { <div style="color: #27ae60;">📍 City: {{ student.address.city }}</div> }

      @if (student.teamList && student.teamList.length > 0) {
        <div style="color: #8e44ad; margin-top: 3px;">
          👥 Teams:
          @for (team of student.teamList; track team.id) {
            <span style="background: #ebdef0; padding: 1px 6px; border-radius: 10px; margin-right: 5px;">{{ team.teamName }}</span>
          }
        </div>
      }
    </div>

    <div style="margin-top: 12px;">
      <button (click)="delete(student)">Delete</button>
      <button (click)="selectForUpdate(student)">Edit</button>
    </div>
  </li>

  @if (isLast) {
    <hr>
    <button (click)="deleteAll()" style="background: #ffcccc; border: 1px solid #f5c6cb;">Delete All Students</button>
  }
} @empty {
  <p>The student collection is currently empty.</p>
}
