<template>
  <div class="page" data-name="discover-view-event">
    <!-- Top Navbar -->
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
          </a>
        </div>
        <div class="middle">
          <div class="header-logo"><img src="assets/img/logo-dark.png" /></div>
        </div>
        <div class="right">
          
          <a href="#" class="link icon-only">
            <i class="icon f7-icons">bell</i>
          </a>
        </div>
      </div>
    </div>

    <!-- Page content-->
    <div class="page-content">
      <div class="loading-fullscreen">
        <div class="preloader preloader-central">
          <span class="preloader-inner"><span class="preloader-inner-line"></span><span
              class="preloader-inner-line"></span><span class="preloader-inner-line"></span><span
              class="preloader-inner-line"></span><span class="preloader-inner-line"></span><span
              class="preloader-inner-line"></span><span class="preloader-inner-line"></span><span
              class="preloader-inner-line"></span>
          </span>
        </div>
      </div>

      <div class="discover-view-event view-event">
        <div class="event-detail-img-box">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="swiper-image" style="background-color: gray;"></div>
              </div>
              <div class="swiper-slide">
                <div class="swiper-image" style="background-color: gray;"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="container">
          <div class="event-detail">
            <div class="event-detail-title"></div>
            <div class="event-time-address-wrap mt-3 mb-2">
              <div class="event-time-address">
                <i class="f7-icons">calendar</i>
                <span>
                  <div class="skeleton-block" style="width: 100px"></div>
                </span>
              </div>
              <div class="event-time-address">
                <i class="f7-icons">clock</i>
                <span>
                  <div class="skeleton-block" style="width: 100px"></div>
                </span>
              </div>
              <div class="event-time-address">
                <i class="f7-icons">placemark_fill</i>
                <span>
                  <div class="skeleton-block" style="width: 300px"></div>
                </span>
              </div>
            </div>
            <div class="event-list-btn mt-1">
              <div class="btn w-100 bg-dark"><i class="f7-icons">tickets</i> Buy tickets</div>
            </div>
            <div class="event-list-btn d-flex">
              <div class="btn btn-primary w-100" id="favourite_event" style="display: none;"><i
                  class="f7-icons">heart_fill</i> Favourite</div>
              <div class="btn btn-primary w-100 popup-open" data-popup=".share-listing-popup">
                <i class="f7-icons">paperplane_fill</i> Share
              </div>
            </div>
          </div>



          <div class="listing-tabs">
            <a href="#tab-about" class="tab-link tab-link-active">About</a>
            <a href="#tab-entry-details" class="tab-link">Entry & Tickets</a>
          </div>

          <swiper-container class="tabs">
            <swiper-slide id="tab-about" class="tab tab-active">
              <div class="swiper-inner-container">
                <div class="event-des-wrap">
                  <p>
                  <div class="skeleton-block" style="width: 95%;padding: .5rem; margin-bottom: 5px;"></div>
                  <div class="skeleton-block" style="width: 95%;padding: .5rem; margin-bottom: 5px;"></div>
                  <div class="skeleton-block" style="width: 95%;padding: .5rem; margin-bottom: 5px;"></div>
                  <div class="skeleton-block" style="width: 95%;padding: .5rem; margin-bottom: 5px;"></div>
                  </p>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide id="tab-entry-details" class="tab">
              <div class="swiper-inner-container">
                <div class="event-des-wrap entry-details">
                  <p>
                  <div class="skeleton-block" style="width: 200px"></div>
                  </p>
                </div>
              </div>
            </swiper-slide>
          </swiper-container>
        </div>
      </div>
    </div>
    <!-- Page content-->

    <!-- Share Slider -->
    <div class="popup share-listing-popup three-quarter-popup">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Share This</div>
              <div class="right">
                <!-- Link to close popup -->
                <a class="link popup-close"><i class="icon f7-icons">xmark</i></a>
              </div>
            </div>
          </div>
          <div class="page-content">

            <div class="block">
              <div class="list links-list list-outline-ios list-strong-ios list-dividers-ios">
                <ul>
                  <li><a href="#" target="_blank" id="copy-event-link"><i class="icon f7-icons">link</i> Copy Link</a>
                  </li>
                  <li><a href="#" target="_blank" id="share-email-event-link"><i class="icon f7-icons">envelope</i>
                      Share via Email</a></li>
                </ul>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- * Share Slider -->

  </div>
</template>

Array
(
    [div] => Array
        (
            [class] => Array
                (
                    [0] => page
                    [1] => navbar
                    [2] => navbar-bg
                    [3] => navbar-inner
                    [4] => left
                    [5] => middle
                    [6] => header-logo
                    [7] => right
                    [8] => page-content
                    [9] => loading-fullscreen
                    [10] => preloader preloader-central
                    [11] => discover-view-event view-event
                    [12] => event-detail-img-box
                    [13] => swiper-container
                    [14] => swiper-wrapper
                    [15] => swiper-slide
                    [16] => swiper-image
                    [17] => swiper-slide
                    [18] => swiper-image
                    [19] => container
                    [20] => event-detail
                    [21] => event-detail-title
                    [22] => event-time-address-wrap mt-3 mb-2
                    [23] => event-time-address
                    [24] => skeleton-block
                    [25] => event-time-address
                    [26] => skeleton-block
                    [27] => event-time-address
                    [28] => skeleton-block
                    [29] => event-list-btn mt-1
                    [30] => btn w-100 bg-dark
                    [31] => event-list-btn d-flex
                    [32] => btn btn-primary w-100
                    [33] => btn btn-primary w-100 popup-open
                    [34] => listing-tabs
                    [35] => swiper-inner-container
                    [36] => event-des-wrap
                    [37] => skeleton-block
                    [38] => skeleton-block
                    [39] => skeleton-block
                    [40] => skeleton-block
                    [41] => swiper-inner-container
                    [42] => event-des-wrap entry-details
                    [43] => skeleton-block
                    [44] => popup share-listing-popup three-quarter-popup
                    [45] => view
                    [46] => page
                    [47] => navbar
                    [48] => navbar-inner
                    [49] => title
                    [50] => right
                    [51] => page-content
                    [52] => block
                    [53] => list links-list list-outline-ios list-strong-ios list-dividers-ios
                )

            [data-name] => Array
                (
                    [0] => discover-view-event
                )

            [style] => Array
                (
                    [0] => background-color: gray;
                    [1] => background-color: gray;
                    [2] => width: 100px
                    [3] => width: 100px
                    [4] => width: 300px
                    [5] => display: none;
                    [6] => width: 95%;padding: .5rem; margin-bottom: 5px;
                    [7] => width: 95%;padding: .5rem; margin-bottom: 5px;
                    [8] => width: 95%;padding: .5rem; margin-bottom: 5px;
                    [9] => width: 95%;padding: .5rem; margin-bottom: 5px;
                    [10] => width: 200px
                )

            [id] => Array
                (
                    [0] => favourite_event
                )

            [data-popup] => Array
                (
                    [0] => .share-listing-popup
                )

        )

    [a] => Array
        (
            [class] => Array
                (
                    [0] => link back
                    [1] => link icon-only
                    [2] => tab-link tab-link-active
                    [3] => tab-link
                    [4] => link popup-close
                )

            [href] => Array
                (
                    [0] => #
                    [1] => #tab-about
                    [2] => #tab-entry-details
                    [3] => #
                    [4] => #
                )

            [target] => Array
                (
                    [0] => _blank
                    [1] => _blank
                )

            [id] => Array
                (
                    [0] => copy-event-link
                    [1] => share-email-event-link
                )

        )

)