<section class="container">
  <div class="details-cmd">
    <ngx-datatable
      class="material ngx-datatable fixed-header selectable checkbox-selection width-100"
      [columnMode]="'standard'"
      [rows]="rows"
      [headerHeight]="50"
      [sortType]="'multi'"
      [rowHeight]="'auto'"
      [messages]="messages"
      [columns]="columns">

      <ng-template  #eventName let-column="event"  class='name'  let-row = 'row'>
        <div style="text-align: left;padding-left: 20px;">
        <b>{{ row.name}}<br><i  class="TitilliumWeb-Regular">{{ row.start_date|datefrench1}}</i></b>
        </div>
      </ng-template>

      <ng-template  #eventParticipant  let-column="event"  let-row = 'row'>
        <div  style="text-align: center;margin-top: 13px" >
        <b>{{ row.tickets|participants}}</b>
        </div>
      </ng-template>

      <ng-template  #eventRecette let-column="event"  let-row = 'row'>
        <div  style="text-align: center;margin-top: 13px">
        <b >{{ row.tickets|recettes}}</b>
        </div>
      </ng-template>

      <ng-template  #eventStatut let-column="event"  let-row = 'row'>
        <div style="text-align: center;margin-top: 13px" [ngClass]="(row|statutPipe).cls">
            <b>{{ (row|statutPipe).name}} </b>
        </div>
      </ng-template>

      <ng-template #actionTpl let-column="column" let-row = 'row' class = 'button-container' >
        <button type="submit" class="btn-action" [routerLink]="['/manage/event/'+row.id+'/detail']">
          <i class="fa fa-ellipsis-h"></i>
        </button>
       <!-- <button type="submit" class="btn-action" [routerLink]="['/manage/event/'+row.id+'/edit']">
          <img src="assets/imgs/icon_edit_black.png" alt="..."/>
        </button>
        <button type="submit" class="btn-action" [routerLink]="['/manage/event/'+row.id+'/checkin']">
          <i class="fa fa-ticket"></i>
        </button>-->
      </ng-template>

    </ngx-datatable>
  </div>
<!--  <div class="details-cmd">
    <header class="flexible">
      <h5 class="inline-block">Mes événements</h5>
    </header>
 <div class="table-wrapper">
      <div class="width-100 table">
        <div class="table-header table-row width-100 flexible">
          <div class="flexible width-100 rmp">
            <div class="column flexible title text-left">Nom</div>
            <div class="column flexible has-datetime">Date et heure</div>
            <div class="column flexible has-location flexible">Lieu</div>
            <div class="column flexible has-actions apply-paddings">Actions</div>
          </div>
        </div>
        <div class="table-row flexible width-100" *ngFor="let event of events">
          <div class="flexible width-100">
            <div class="column flexible title text-left">{{event.name}}</div>
            <div class="column flexible has-datetime">Date et heure</div>
            <div class="column flexible has-location flexible">{{event.location_name}}</div>
            <div class="column flexible has-actions">
              <div class="btn-group">
                <button type="submit" class="fab-btn btn-info" [routerLink]="['/manage/event-detail/', event.id]"><i class="fa fa-ellipsis-h"></i></button>
                <button type="submit" class="fab-btn btn-primary" [routerLink]="['/manage/event-update/', event.id]"><i class="fa fa-pencil"></i></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>-->
</section>