<app-main-header></app-main-header>
<app-bulletin-details></app-bulletin-details>
<div class="mytraining">
  <div class="training_in">
    <div class="training_left" [style.width.%]="user_role==15 || !show_dashboard_dse ?'100':'calc(100% - 380px)'"> 
      <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 class="tab-content" id="myTabContent" *ngIf="!loader">
          <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="bullet_in.length>0">  
            <div class="  box" *ngFor="let list of bullet_in">
              <div (click)="onSelect(list)" class="ptr list_div">
                <div class="card_img">
                  <img src="{{list.image_url}}" />
                </div>
                <div class="card_cont">
                  <h3>{{list.bulletin_title}}</h3>
                  <p>{{list.bulletin_sdesc}}</p>
                  <div class="note">Published On: {{list.published_date | date: 'dd-MMM-yyy'}}</div>
                </div> 
                <!-- <div class="trophy border"> 
                    <div class="note">Published On: {{list.publisheddate | date: 'dd-MMM-yyy'}}</div>
                </div> -->
              </div>
            </div>
          </div> 
          <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="bullet_in.length==0">  
             <p style="margin:0 auto;text-align: center;vertical-align:middle;font-weight:bold">No Circular Found</p>
               
            </div>
          </div> 
        </div>
      </div>
      <!-- <div class="training_right" *ngIf="user_role!=15">
        <app-dashboard-dse-details  ></app-dashboard-dse-details>
      </div> -->
      <div class="training_right" *ngIf="show_dashboard_dse">
          <app-dashboard-dse-details></app-dashboard-dse-details>
      </div>
    </div>
  </div>

  <!-- *ngIf="user_role==1 || user_role==2 || user_role==8 || user_role==9 || user_role==10 || user_role==11|| user_role==12 || user_role==13|| user_role=15 || user_role==16" -->