 <div class="hospitalContent-w">
    <div class="container">
      <div class="row">
          <div class="containerContent-w">
              <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
                <div class="row">
                    <div class="col-12 col-md-3">
                        <div class="recordsContent-w">
                            <div id="accordion">
                              <div class="card" *ngFor="let item of data; let i = index">
                                <div class="card-header" [attr.id]="'heading'+(i+1)">
                                    <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
                                      <h4 class="panel-title">{{item.name}}</h4>
                                    </button>
                                </div>
                            
                                <div *ngFor="let field of item['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
                                  <div class="card-body testBody-w">
                                      <ul class="list-unstyled">
                                        <li (click)="showDescriptionDetails(field)"  [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:right;margin-right:-23px">
                                            {{field.title}}
                                        </li>
                                      </ul>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-9">
                      <div class="information">
                        <h2>{{detailsField.title}}</h2>
                        <p [innerHTML]="detailsField.description"></p>
                      </div>
                    </div>
                </div>
              </ng-template>
  
              <ng-template #englishTemplate>
                <div class="container" style="direction:ltr">
                  <div class="row">
                      <div class="col-12 col-md-3">
                          <div class="recordsContent-w">
                              <div id="accordion">
                                  <div class="card" *ngFor="let item of data; let i = index">
                                      <div class="card-header" [attr.id]="'heading'+(i+1)">
                                      <h5 class="mb-0">
                                          <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
                                          <h4 class="panel-title">{{item.name_en}}</h4>
                                          </button>
                                      </h5>
                                      </div>
                                  
                                      <div *ngFor="let field of item['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
                                      <div class="card-body testBody-w">
                                          <ul class="list-unstyled nestedMenu">
                                              <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:left; margin-left:10px;">
                                                  {{field.title_en}}
                                              </li>
                                          </ul>
                                      </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="col-12 col-md-9">
                        <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
                          <h2>{{detailsField.title_en}}</h2>
                          <p [innerHTML]="detailsField.description_en"></p>
                        </div>
                      </div>
                  </div>
                </div>
              </ng-template>
  
          </div>
      </div>
    </div>
  </div>

 

<!-- <div class="container">
        <owl-carousel-o [options]="customOptions">
            <ng-template carouselSlide>Slide 1</ng-template>  
            <ng-template carouselSlide>Slide 2</ng-template>  
            <ng-template carouselSlide>Slide 3</ng-template>  
        </owl-carousel-o>
</div> -->