<template>
  <div class="page" data-name="profile">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="icon f7-icons">bars</i>
          </a>
        </div>
        <div class="middle">
          <div class="header-logo"><img src="assets/img/logo-dark.png" /></div>
        </div>
        <div class="right">
         
          <a href="/notifications/" class="link icon-only">
            <div class="notification-count"></div>
            <i class="icon f7-icons">bell</i>
          </a>
        </div>
      </div>
    </div>

    <div
      class="page-content no-swipeback profile-landing-page infinite-scroll-content my-profile ptr-content ptr-watch-scrollable"
      data-infinite-distance="50" data-ptr-distance="120">
      <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="profile-background" style="background-color: gray;"></div>
      <div class="profile-head">
        <div class="profile-image" style="background-color: gray;"></div>
        <h3 class="name profile-username">@</h3>
        <h5 class="subtext profile-name"></h5>
      </div>

      <div class="profile-links">
        <div class="profile-links-edit d-flex">
          <!-- <a class="profile-link popup-open" data-popup=".edit-profile-popup">Edit Profile</a> -->
          <a class="profile-link" href="/profile-edit/">Edit Profile</a>
          <a class="profile-link" href="/post-add/">Add Post</a>
          <a class="profile-link" href="/waste-add/">Add Waste</a>
        </div>

        <div class="profile-links-external d-flex">
          <a class="profile-link social-link link external " id="instagram" target="_blank"
            href="https://www.instagram.com/"><img src="assets/img/icon-instagram.svg" /> <span>Instagram</span></a>
          <a class="profile-link social-link link external " id="facebook" target="_blank"
            href="https://www.facebook.com"><img src="assets/img/icon-facebook.svg" /> <span>Facebook</span></a>
          <a class="profile-link social-link link external " id="tiktok" target="_blank"
            href="https://www.tiktok.com"><img src="assets/img/icon-tiktok.svg" /> <span>Tiktok</span></a>
          <a class="profile-link social-link link external " id="youtube" target="_blank"
            href="https://www.youtube.com"><img src="assets/img/icon-youtube.svg" /> <span>YouTube</span></a>
          <a class="profile-link social-link popup-open" style="display: none;" data-popup=".links-popup"><img
              src="assets/img/icon-link.svg?v=1.4" />
            <span>More</span></a>
        </div>
      </div>

      <div class="profile-lower">
        <div class="profile-tabs">
          <a href="#profile-garage-tab" display="none" style="display: none;" class="tab-link tab-link-active" id="my-garage">Garage</a>
          <a href="#profile-posts-tab" class="tab-link" id="my-posts">Posts</a>
          <a href="#profile-wastes-tab" class="tab-link" id="my-wastes">Wastes</a>
        </div>

        <swiper-container class="tabs">

          <swiper-slide id="profile-posts-tab" class="tab tab-active">
            <div class="swiper-inner-container">
              <div class="profile-grid" id="profile-grid-posts">
                <!-- Content generates here -->
              </div>

              <!-- Preloader for infinite scroll -->
              <div class="infinite-scroll-preloader posts-tab">
                <div class="preloader"></div>
              </div>
            </div>
          </swiper-slide>

          <swiper-slide id="profile-garage-tab" display="none" style="display: none;" class="tab">
            <div display="none" style="display: none;" class="swiper-inner-container">
              <div class="listview-title garage-sub-title">Current Vehicles</div>

              <ul class="listview image-listview media transparent flush pt-1 current-vehicles-list">
                <!-- Content generates here -->
              </ul>

              <div class="listview-title garage-sub-title mt-2">Past Vehicles</div>
              <ul class="listview image-listview media transparent flush pt-1 past-vehicles-list">
                <!-- Content generates here -->
              </ul>

            </div>
          </swiper-slide>


          <swiper-slide id="profile-wastes-tab" class="tab">
            <div class="swiper-inner-container">
              <div class="profile-grid" id="profile-grid-wastes">
                <!-- Content generates here -->
              </div>

              <!-- Preloader for infinite scroll -->
              <div class="infinite-scroll-preloader wastes-tab">
                <div class="preloader"></div>
              </div>
            </div>
          </swiper-slide>
        </swiper-container>
      </div>
    </div>

    <div class="popup links-popup three-quarter-popup">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">More Links</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 profile-external-links">
              <div class="list links-list list-outline-ios list-strong-ios list-dividers-ios">
                <ul>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Profile Slider -->
    <div class="popup edit-profile-popup three-quarter-popup">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Edit Profile</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="/profile-edit-images/">Edit Profile Images</a></li>
                  <li><a href="/profile-edit-socials/">Manage Social Links</a></li>
                  <li><a href="/profile-edit-mydetails/">My Details</a></li>
                  <li><a href="/profile-edit-username/">Username</a></li>
                </ul>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- * Edit Profile 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] => notification-count
                    [9] => page-content no-swipeback profile-landing-page infinite-scroll-content my-profile ptr-content ptr-watch-scrollable
                    [10] => ptr-preloader
                    [11] => preloader
                    [12] => ptr-arrow
                    [13] => profile-background
                    [14] => profile-head
                    [15] => profile-image
                    [16] => profile-links
                    [17] => profile-links-edit d-flex
                    [18] => profile-links-external d-flex
                    [19] => profile-lower
                    [20] => profile-tabs
                    [21] => swiper-inner-container
                    [22] => profile-grid
                    [23] => infinite-scroll-preloader posts-tab
                    [24] => preloader
                    [25] => swiper-inner-container
                    [26] => listview-title garage-sub-title
                    [27] => listview-title garage-sub-title mt-2
                    [28] => swiper-inner-container
                    [29] => profile-grid
                    [30] => infinite-scroll-preloader wastes-tab
                    [31] => preloader
                    [32] => popup links-popup three-quarter-popup
                    [33] => view
                    [34] => page
                    [35] => navbar
                    [36] => navbar-inner
                    [37] => title
                    [38] => right
                    [39] => page-content
                    [40] => block profile-external-links
                    [41] => list links-list list-outline-ios list-strong-ios list-dividers-ios
                    [42] => popup edit-profile-popup three-quarter-popup
                    [43] => view
                    [44] => page
                    [45] => navbar
                    [46] => navbar-inner
                    [47] => title
                    [48] => right
                    [49] => page-content
                    [50] => block
                    [51] => list links-list list-outline-ios list-strong-ios list-dividers-ios
                )

            [data-name] => Array
                (
                    [0] => profile
                )

            [data-infinite-distance] => Array
                (
                    [0] => 50
                )

            [data-ptr-distance] => Array
                (
                    [0] => 120
                )

            [style] => Array
                (
                    [0] => background-color: gray;
                    [1] => background-color: gray;
                    [2] => display: none;
                )

            [id] => Array
                (
                    [0] => profile-grid-posts
                    [1] => profile-grid-wastes
                )

            [display] => Array
                (
                    [0] => none
                )

        )

    [a] => Array
        (
            [href] => Array
                (
                    [0] => #
                    [1] => /notifications/
                    [2] => /profile-edit/
                    [3] => /post-add/
                    [4] => /waste-add/
                    [5] => https://www.instagram.com/
                    [6] => https://www.facebook.com
                    [7] => https://www.tiktok.com
                    [8] => https://www.youtube.com
                    [9] => #profile-garage-tab
                    [10] => #profile-posts-tab
                    [11] => #profile-wastes-tab
                    [12] => /profile-edit-images/
                    [13] => /profile-edit-socials/
                    [14] => /profile-edit-mydetails/
                    [15] => /profile-edit-username/
                )

            [class] => Array
                (
                    [0] => link icon-only panel-open
                    [1] => link icon-only
                    [2] => profile-link
                    [3] => profile-link
                    [4] => profile-link
                    [5] => profile-link social-link link external
                    [6] => profile-link social-link link external
                    [7] => profile-link social-link link external
                    [8] => profile-link social-link link external
                    [9] => profile-link social-link popup-open
                    [10] => tab-link tab-link-active
                    [11] => tab-link
                    [12] => tab-link
                    [13] => link popup-close
                    [14] => link popup-close
                )

            [data-panel] => Array
                (
                    [0] => left
                )

            [id] => Array
                (
                    [0] => instagram
                    [1] => facebook
                    [2] => tiktok
                    [3] => youtube
                    [4] => my-garage
                    [5] => my-posts
                    [6] => my-wastes
                )

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

            [style] => Array
                (
                    [0] => display: none;
                    [1] => display: none;
                )

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

            [display] => Array
                (
                    [0] => none
                )

        )

)