employeeService/src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html

<div class="d-flex flex-row">
  <app-navigation-bar [route]="'skill'" class="row" style="height: 100vh;"></app-navigation-bar>
  <div class="container">
    <div class="header">
      <div class="dropdown position-absolute top-0 end-0 m-3">
        <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
          aria-expanded="false">
          <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
        </button>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
          <li><a class="dropdown-item" href="/logout">Log out</a></li>
        </ul>
      </div>
      <h1>Qualifications</h1>
    </div>

    <div class="d-flex flex-column">
      <div class="row header-actions">
        <form [formGroup]="searchForm">
          <div class="search-bar">
            <input type="text" placeholder="Search employee" formControlName="search">
            <button (click)="submit()">Search</button>
          </div>
          <p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. Name</p>
        </form>
        <div class="d-flex">
          <button (click)="createSkill()" class="add-button me-auto">Add qualification</button>
        </div>
      </div>

      @if (errorDeletingSkill) {
      <div class="row">
        <p class="alert alert-danger">This Qualification can not be deleted because it still has employees.</p>
      </div>
      }
    </div>

    <table class="employee-table">
      <thead>
        <tr>
          <th><span class="sortable">Name</span></th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @if (skills) {
        @for (skill of skills; track skill) {
        <tr>
          <td>{{ skill.skill }}</td>
          <td>
            <button class="btn btn-primary me-2" (click)="editSkill(skill.id)">Edit</button>
            <button class="btn btn-danger" (click)="deleteSkill(skill.id)">Delete</button>
          </td>
        </tr>
        }
        }
      </tbody>
    </table>
  </div>
</div>