<app-main-header></app-main-header>
<app-bulletin-details></app-bulletin-details>
<div class="mytraining" *ngIf="catlist" >
  <div class="training_in">
    <div class="training_left"> 
        <div class="his_topic">
            CATEGORY LIST
          </div>
      <div class="left_card">
        <div class="inner_load" *ngIf="loader">
          <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
              />
            </path>
          </svg>
          <p>Just a moment...</p>
        </div>
        <div>
        </div>
        <div class="tab-content" id="myTabContent" *ngIf="!loader">
          <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="cat_list.length>0">  
            <div class="box" *ngFor="let list of cat_list">
              <div class="list_div" (click)="onClickCategory(list)">
                <div class="card_img">
                  <img src="{{list.category_image}}" />
                </div>
                <div class="card_cont">
                  <h3> {{list.category_name}}</h3>
                </div> 
              </div>
            </div>
          </div> 
          <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="cat_list.length==0">  
             <p style="margin:0 auto;text-align: center;vertical-align:middle;font-weight:bold">No data found</p>
               
            </div>
          </div> 
        </div>
      </div>
      <!-- <div class="training_right">
          <div class="bottom_content">
              <div class="row align-items-center">
                <div class="col amt_box" >
                    <h3>₹ {{current_amount}}</h3>
                    <p>Available Balance</p>
                </div>
              </div>
          </div>
          <button class="btn primary clear" type="submit" (click)="onClickPurchase()" *ngIf="current_amount>0">PURCHASE NOW</button>
          <button class="btn primary clear" type="submit"  style="cursor:not-allowed" *ngIf="current_amount==0">PURCHASE NOW</button>
      </div> -->
    </div>
   
  </div>
 
  