<section class="event_promotion_area">
  <div class="container">
      <div class="hosting_title security_title text-center">
          <h2 class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">{{event?.title}}</h2>
          <h3 class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;"><span>By {{event?.person[0]?.name}}</span></h3>

        </div>
      <div class="event_promotion_inner">
          <div class="event_img" >
              <img src="https://res.cloudinary.com/mentornations/image/upload/c_scale,w_1170/v1572795112/TechThruAppDevs/65149319_1981866298584938_1410676643957047296_o.jpg" style="border-radius: 6px;" alt="">
          </div>
          <div class="row event_promotion_info align-items-center">
              <div class="col-md-6">
                  <div class="e_promo_text wow fadeInDown" style="visibility: visible; animation-name: fadeInDown;">
                      <div class="d-flex">
                          <a href="#" class="promo_tag">{{event?.price}}</a>
                          <a href="#" class="date">{{event?.datebegin | date: 'EEEE, MMMM d, h:mm a'}}</a>
                      </div>
                      <!-- <h3 *ngIf="event?.laptop ; else elseBlock">Bring Your Laptop</h3>
                      <h4>Only {{event?.table.length}} Tables Available</h4> -->
                      <h4><a title="location" href="http://maps.google.com/maps?q=+{{event?.location[0].lng}}+,+{{event?.location[0].lat}}"> {{event?.location[0].place}} </a></h4>
                      <a class="event_btn event_btn_two btn_hover" (click)="JoinEvent(event)" > <span style="color: white;"  *ngIf="event?.available">Buy Ticket</span></a>
                  </div>
              </div>
              <div class="col-md-6">
                  <p>{{event?.description}}</p>
              </div>
          </div>
      </div>
  </div>
</section>


<section class="event_schedule_area sec_pad" *ngIf="event?.type === 'hack' && hackathon != null">
    <div class="container">
        <div class="hosting_title security_title text-center">
            <h2 class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;"><span>Schedule</span>Hackathon Schedule</h2>
        </div>
        <div class="event_schedule_inner">
            <ul class="nav nav-tabs event_tab" role="tablist">
                <li *ngFor="let item of hackathon?.days; let i = index" class="nav-item wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
                    <a [class]=" i == 0 ? 'nav-link active show' : 'nav-link' " id="{{ i }}-tab" data-toggle="tab" href="#{{i}}" role="tab" [attr.aria-controls]="i" [attr.aria-selected]="i == 0 ? true : false" (click)="changeSelected(i)">
                        <h5>Day {{i+1}}<span>{{ item?.dayDate }}</span></h5>
                    </a>
                </li>
            </ul>
            <div class="tab-content event_tab_content">
                <div *ngFor="let day of hackathon?.days; let j = index" [class]=" j == tabselected ? 'tab-pane fade active show' : 'tab-pane fade'" id="{{j}}" role="tabpanel" [attr.aria-labelledby]="j">
                    <div *ngFor="let item of day.day" class="media" >
                        <div class="media-left">
                            <img src="img/home-event/conference.jpg" alt="">
                            <a href="#"><i class="icon_clock_alt"></i>{{ item?.time}}</a>
                            <a href="#"><i class="icon_pin_alt"></i>{{item?.room}}</a>
                        </div>
                        <div class="media-body">
                            <h3 class="h_head">{{ item?.name}}</h3>
                            <span>by <a href="#">{{ item?.instructor }}</a></span>
                            <p>{{ item?.description }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>