<div class="container">
    <div class="row">
      <div class="col-12">
          <ul class="list-unstyled titileLi-w">
            <li class="headingText-w">خدمه التدريب</li>
            <li class="headingText-w activeLi-w" style="margin-right:5px">إستعراض بيانات المتدربين</li>
          </ul>
      </div>
    </div>
  
    <div class="containerContent-w">

      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
          <div class="form-group" style="float:right;">
            <span class="spanSelect-w">
              <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
              </select>
              من العناصر يتم عرضها
            </span>
          </div>

          <div class="form-group" style="float:right; margin:0 10px;">
            <span class="spanSelect-w">
              <select [ngModel]="defaultValueFiltter" class="form-control selectButton-w" (input)="onFiltterChosen($event)" style="width:200px;">
                <option value="all">الكل</option>
                <option value="asked_for_opinion">طلبات مطلوب الرأي بها</option>
                <option value="is_confirmed ">الطلبات المقبوله</option>
                <option value="stopped">الطلبات الموقوفه</option>
                <option value="ended">الطلبات المنتهيه</option>
              </select>
              حاله الطلب
            </span>
          </div>

        </div>

        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
          <div class="form-group">
            <input type="text" placeholder="البحث ( رقم الهويه أو الإيميل أو الجوال )" class="form-control inputSearchTable-w" style="margin:0" (input)="filtterFunc($event)"/>
            <hr>
          </div>
        </div>

      </div>

      <div class="row" *ngIf='dataList.length == 0'>
        <div class="col-12">
          <h2>لا يوجد بيانات لعرضها </h2>
        </div>
      </div>

      <div class="row" *ngIf='dataList.length > 0'>
        <div class="col-12">
          <table class="table table-bordered">
              <thead class="headBackground-w">
                <tr>
                  <th> إسم المتدرب</th>
                  <th>إسم التخصص</th>
                  <th>إسم التخصص الدقيق</th>
                  <th>الحاله</th>
                  <th> الجامعه</th>
                  <th *ngIf="authSer.showEditBtn">تفاصيل المتدرب</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
                  <td>{{data.trainee_name}}</td>
                  <td> {{data.specialization_name}}</td>
                  <td>{{data.specific_specialization}}</td>
                  <td>{{data.trainee_status == 'in_training' ? 'تحت التدريب' : 'لا يوجد'}}</td>
                  <td>{{data.university}}</td>
                  <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
                </tr>
              </tbody>
            </table>
      
            <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
        
        </div>
      </div>

    </div>
  
  
  </div>
  
