<div class="eventTable-w">
  <div class="container">
    <div class="containerContent-w">
      <div class="row">
        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
          <div class="col-12">
            <table class="table table-bordered">
              <thead class="headBackground-w">
                <tr>
                  <th>الحدث</th>
                  <th>التاريخ</th>
                  <th>تفاصيل الحدث</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let event of eventsData | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index">
                  <td>{{event.name}}</td>
                  <td>{{event.event_time}}</td>
                  <td>
                    <button type="button" class="btn" (click)="detailEvent(event)" data-toggle="modal" data-target="#exampleModalCenter">
                      <i class="fas fa-plus"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <br><br>
                    <h5 class="modal-title titleModal" id="exampleModalLongTitle">تفاصيل الحدث</h5>
                  </div>
                  <div class="modal-body">
                      <h2>{{eventDetail.title}}</h2>
                      <p [innerHTML]="eventDetail.description"></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ng-template>

        <ng-template #englishTemplate>
          <div class="col-12" style="direction:rtl">
              <table class="table table-bordered">
                <thead class="headBackground-w">
                  <tr>
                    <th>Event</th>
                    <th>Date</th>
                    <th>Detail Event</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let event of eventsData | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index">
                    <td>{{event.name_en}}</td>
                    <td>{{event.event_time}}</td>
                    <td>
                      <button type="button" class="btn" (click)="detailEvent(event)" data-toggle="modal" data-target="#exampleModalCenter">
                        <i class="fas fa-plus"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
              <pagination-controls nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)"></pagination-controls>
              <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float:left">
                        <span aria-hidden="true">&times;</span>
                      </button>
                      <br><br>
                      <h5 class="modal-title titleModal" id="exampleModalLongTitle" style="text-align:left;">Event Details</h5>
                    </div>
                    <div class="modal-body">
                      <h2 style="text-align:left;">{{eventDetail.title_en}}</h2>
                      <p style="text-align:left;" [innerHTML]="eventDetail.description_en"></p>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </ng-template>

      </div>
    </div>
  </div>
</div>




