- var page_Title = 'Social Dashboard'
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var apex                  = true;
- var page_vector_map1      = true;
- var counter               = true;
- var dashboard_5           = true;
- var select_dt             = true;
- var datatable             = true;
- var page_datatable        = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Social
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Dashboard
                    li.breadcrumb-item.active Social
          // Container-fluid starts
          .container.dashboard-5
            .grid.grid-cols-12.card-gap
              div(class="col-span-12 od-xl-1") 
                .grid.grid-cols-12.card-gap 
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/1.png", alt="facebook icon")
                            span Facebook
                          span.font-success.social-card-box +22.9%
                        .social-content
                          div 
                            h5.mb-1.counter(data-target='12098') 0
                            span.f-light Likes
                          .social-chart
                            #radial-facebook
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/2.png", alt="instagram icon")
                            span Instagram
                          span.font-danger.social-card-box -27.4%
                        .social-content
                          div 
                            h5.mb-1.counter(data-target='15080') 0
                            span.f-light Followers
                          .social-chart
                            #radial-instagram
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/3.png", alt="twitter icon")
                            span X (Twitter)
                          span.font-success.social-card-box +76.10%
                        .social-content
                          div 
                            h5.mb-1.counter(data-target='12564') 0
                            span.f-light Followers
                          .social-chart
                            #radial-twitter
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/4.png", alt="twitter icon")
                            span Youtube
                          span.font-success.social-card-box +62.08%
                        .social-content
                          div 
                            h5.mb-1.counter(data-target='85967') 0
                            span.f-light Followers
                          .social-chart
                            #radial-youtube
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/5.png", alt="twitter icon")
                            span LinkedIn
                          span.font-danger.social-card-box -14.09%
                        .social-content
                          div 
                            h5.mb-1.counter(data-target='15005') 0
                            span.f-light Followers
                          .social-chart
                            #radial-linkedin
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/6.png", alt="twitter icon")
                            span Pinterest
                          span.font-success.social-card-box +95.10%
                        .social-content
                          div 
                            h5.mb-1.counter(data-target='20015') 0
                            span.f-light Followers
                          .social-chart
                            #radial-pinterest
              div(class="col-span-3 xxl:col-span-4 xl:col-span-5 md:col-span-12 od-xl-2 box-col-4")
                .card.mobile-app-card.social-empower
                  .card-header.card-no-border(class="!pb-0")
                    h4.mb-1 
                      | Empowering Growth:  
                    h6.c-o-light.font-normal.mb-4 Social Insights for Achievement
                    a(href="social-app.html").purchase-btn.btn.btn-primary.btn-hover-effect.text-white.font-medium Try Now    
                  .card-body.text-end(class="!p-0")
                    img.wavy(src="../assets/images/dashboard-5/wave.png", alt="")
                    img(src="../assets/images/dashboard-5/mobile-img.png", alt="")
              div(class="col-span-6 xxl:col-span-4 xl:col-span-12 od-xl-4 box-col-4")
                .card 
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Instagram Subscribers
                        span.f-14.font-medium.ms-1.f-light
                          | (75% activity growth)
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#subscribeButton.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='subscribeButton')
                            a.dropdown-item(href='#!') Today
                            a.dropdown-item(href='#!') Maximum
                            a.dropdown-item(href='#!') Today
                            a.dropdown-item(href='#!') 30 Days
                            a.dropdown-item(href='#!') Yesterday 
                            a.dropdown-item(href='#!') Last month
                  .card-body.pt-0
                    .subscriber-chart-container
                      #subscriber-chart 
              div(class="col-span-3 xxl:col-span-4 xl:col-span-7 md:col-span-12 od-xl-3 box-col-4")
                .card.follower-wrap
                  .card-header.card-no-border.pb-2
                    h5.mb-1 Facebook Campaign
                    div.d-inline-block.badge.badge-light-success.rounded-full.inline-block Active
                  .card-body.pt-0.papernote-wrap
                    span.c-o-light Here's a brief overview of the data typically associated with a Facebook campaign.
                    ul.campaign-list 
                      li 
                        .campaign-box 
                          h5.mb-1.counter(data-target='1897') 0
                          span.f-light Followers today
                      li 
                        .campaign-box 
                          h5.mb-1.counter(data-target='50000') 0
                          span.f-light Followers goals
                    .customers
                      ul.flex 
                        li.d-inline-block
                          img.img-40.rounded-full(src="../assets/images/dashboard/user/1.jpg", alt="user")
                        li.d-inline-block
                          img.img-40.rounded-full(src="../assets/images/dashboard/user/6.jpg", alt="user")
                        li.d-inline-block
                          img.img-40.rounded-full(src="../assets/images/dashboard/user/7.jpg", alt="user")
                        li.d-inline-block
                          img.img-40.rounded-full(src="../assets/images/dashboard/user/3.jpg", alt="user")
                        li.d-inline-block
                          img.img-40.rounded-full(src="../assets/images/dashboard/user/8.jpg", alt="user")
                        li.d-inline-block
                          .light-card
                            span.font-medium +5
              div(class="col-span-8 xxl:col-span-7 xl:col-span-12 od-xl-5 box-col-7")
                .card.heading-space 
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 All Campaigns
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#campaignDropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='campaignDropdown')
                            a.dropdown-item(href='#!') Today
                            a.dropdown-item(href='#!') Yesterday 
                            a.dropdown-item(href='#!') Last month
                  .card-body.pt-0.px-0.campaign-table
                    .recent-table.overflow-x-auto.currency-table.custom-scrollbar 
                      table.table#campaigns-table 
                        thead 
                          tr 
                            th AD Platform
                            th Campaign
                            th GEO
                            th Profitability
                            th Impressions
                            th Status
                            th Create
                        tbody 
                          tr 
                            td.border-icon.facebook
                              div
                                .social-circle
                                  i.fa-brands.fa-facebook-f
                            td Jane Cooper
                            td UK
                            td
                              .change-currency.flex
                                i.font-success.me-1(data-feather="trending-up")
                                | 45.6%
                            td $9,786
                            td 
                              button.btn.badge-light-primary Active
                            td
                              button.plus-btn + 
                          tr 
                            td.border-icon.instagram
                              div
                                .social-circle
                                  i.fa-brands.fa-instagram
                            td Floyd Miles
                            td DE
                            td
                              .change-currency.flex
                                i.font-danger.me-1(data-feather="trending-down")
                                | 12.3%
                            td $19,7098
                            td 
                              button.btn.badge-light-primary Active
                            td
                              button.plus-btn + 
                          tr 
                            td.border-icon.pinterest
                              div
                                .social-circle
                                  i.fa-brands.fa-pinterest
                            td Guy Hawkins
                            td ES
                            td
                              .change-currency.flex
                                i.font-success.me-1(data-feather="trending-up")
                                | 65.6%
                            td $90,986
                            td 
                              button.btn.badge-light-primary Active
                            td
                              button.plus-btn + 
                          tr 
                            td.border-icon.twitter
                              div
                                .social-circle
                                  i.fa-brands.fa-x-twitter
                            td 	Travis Wright
                            td ES
                            td
                              .change-currency.flex
                                i.font-danger.me-1(data-feather="trending-down")
                                | 35.6%
                            td $23,654
                            td 
                              button.btn.badge-light-light.disabled Inactive
                            td
                              button.plus-btn + 
                          tr 
                            td.border-icon.you-tube
                              div
                                .social-circle
                                  i.fa-brands.fa-youtube
                            td Mark Green
                            td UK
                            td
                              .change-currency.flex
                                i.font-success.me-1(data-feather="trending-up")
                                | 45.6%
                            td $12,796
                            td 
                              button(type="button").btn.badge-light-light.disabled Inactive
                            td
                              button(type="button").plus-btn +
                          tr 
                            td.border-icon.linked-in
                              div
                                .social-circle
                                  i.fa-brands.fa-linkedin-in
                            td Eleanor Pena
                            td UK
                            td
                              .change-currency.flex
                                i.font-success.me-1(data-feather="trending-up")
                                | 48.6%
                            td $12,796
                            td 
                              button(type="button").btn.badge-light-light.disabled Inactive
                            td
                              button(type="button").plus-btn +


                          tr 
                            td.border-icon.facebook
                              div
                                .social-circle
                                  i.fa-brands.fa-facebook-f
                            td Caryl Kauth
                            td DE
                            td
                              .change-currency.flex
                                i.font-success.me-1(data-feather="trending-up")
                                | 25.4%
                            td $22,458
                            td 
                              button.btn.badge-light-primary Active
                            td
                              button.plus-btn + 
                          tr 
                            td.border-icon.instagram
                              div
                                .social-circle
                                  i.fa-brands.fa-instagram
                            td Chloe Wilson
                            td ES
                            td
                              .change-currency.flex
                                i.font-danger.me-1(data-feather="trending-down")
                                | 26.8%
                            td $29,4567
                            td 
                              button.btn.badge-light-primary Active
                            td
                              button.plus-btn + 
                          tr 
                            td.border-icon.pinterest
                              div
                                .social-circle
                                  i.fa-brands.fa-pinterest
                            td Olivia Gor
                            td UK
                            td
                              .change-currency.flex
                                i.font-danger.me-1(data-feather="trending-down")
                                | 09.8%
                            td $18,1814
                            td 
                              button.btn.badge-light-primary Active
                            td
                              button.plus-btn + 
                          tr 
                            td.border-icon.twitter
                              div
                                .social-circle
                                  i.fa-brands.fa-x-twitter
                            td 	Robert Fox
                            td ES
                            td
                              .change-currency.flex
                                i.font-success.me-1(data-feather="trending-up")
                                | 22.6%
                            td $24,333
                            td 
                              button.btn.badge-light-primary Active
                            td
                              button.plus-btn + 
              div(class="col-span-4 xxl:col-span-5 xl:col-span-12 od-xl-6 box-col-5")
                .grid.grid-cols-12.card-gap.social-clicks 
                  div(class="col-span-6 sm:col-span-12")
                    .card.overflow-hidden.analytics-tread-card.widget-hover
                      .card-header.card-no-border
                        .header-top
                          h2
                            span.counter(data-target='76') 0
                            | %
                          .card-header-right-icon
                            .dropdown.icon-dropdown
                              button#clickDropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                                i.icon-more-alt
                              .dropdown-menu.dropdown-menu-end(aria-labelledby='clickDropdown')
                                a.dropdown-item(href='#') This Month
                                a.dropdown-item(href='#') Previous Month
                                a.dropdown-item(href='#') Last 3 Months
                                a.dropdown-item(href='#') Last 6 Months
                        .common-align.justify-start
                          span.me-1 Photo Clicks
                          span.common-align.gap-1.justify-start
                            i.txt-danger.i.icon-arrow-down.fw-bold
                            span.txt-danger.font-medium.f-12 -2.7%
                      .card-body.pt-0.px-0 
                          .photo-click-wrapper
                              #photo-click1
                  div(class="col-span-6 sm:col-span-12")
                    .card.overflow-hidden.analytics-tread-card.widget-hover
                      .card-header.card-no-border
                        .header-top
                          h2
                            span.counter(data-target='86') 0
                            | %
                          .card-header-right-icon
                            .dropdown.icon-dropdown
                              button#clickDropdown1.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                                i.icon-more-alt
                              .dropdown-menu.dropdown-menu-end(aria-labelledby='clickDropdown1')
                                a.dropdown-item(href='#') This Month
                                a.dropdown-item(href='#') Previous Month
                                a.dropdown-item(href='#') Last 3 Months
                                a.dropdown-item(href='#') Last 6 Months
                        .common-align.justify-start
                          span.me-1 Link Clicks
                          span.common-align.gap-1.justify-start
                            i.txt-success.i.icon-arrow-up.fw-bold
                            span.txt-success.font-medium.f-12 +9.4%
                      .card-body.pt-0.px-0 
                          .photo-click-wrapper
                              #link-click1
                  div(class="col-span-6 sm:col-span-12")
                    .card.overflow-hidden.analytics-tread-card.widget-hover
                      .card-header.card-no-border
                        .header-top
                          h2
                            span.counter(data-target='95') 0
                            | %
                          .card-header-right-icon
                            .dropdown.icon-dropdown
                              button#followerDropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                                i.icon-more-alt
                              .dropdown-menu.dropdown-menu-end(aria-labelledby='followerDropdown')
                                a.dropdown-item(href='#') This Month
                                a.dropdown-item(href='#') Previous Month
                                a.dropdown-item(href='#') Last 3 Months
                                a.dropdown-item(href='#') Last 6 Months
                        .common-align.justify-start
                          span.me-1 Followers
                          span.common-align.gap-1.justify-start
                            i.txt-success.i.icon-arrow-up.fw-bold
                            span.txt-success.font-medium.f-12 +6.8%
                      .card-body.pt-0.px-0 
                          .photo-click-wrapper
                              #follower-click
                  div(class="col-span-6 sm:col-span-12")
                    .card.overflow-hidden.analytics-tread-card.widget-hover
                      .card-header.card-no-border
                        .header-top
                          h2
                            span.counter(data-target='82') 0
                            | %
                          .card-header-right-icon
                            .dropdown.icon-dropdown
                              button#engagementDropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                                i.icon-more-alt
                              .dropdown-menu.dropdown-menu-end(aria-labelledby='engagementDropdown')
                                a.dropdown-item(href='#') This Month
                                a.dropdown-item(href='#') Previous Month
                                a.dropdown-item(href='#') Last 3 Months
                                a.dropdown-item(href='#') Last 6 Months
                        .common-align.justify-start
                          span.me-(class="!line-clamp-[1]") Link Engagements
                          span.common-align.gap-1.justify-start
                            i.txt-danger.i.icon-arrow-down.fw-bold
                            span.txt-danger.font-medium.f-12 -3.2%
                      .card-body.pt-0.px-0 
                          .photo-click-wrapper
                              #engagement-link
              div(class="col-span-7 md:col-span-12 od-xl-7")
                .card.sales-report
                  .card-header.card-no-border
                    .header-top 
                      h5 Social Analytics
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#salesButton.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='salesButton')
                            a.dropdown-item(href='#!') Today
                            a.dropdown-item(href='#!') Tomorrow
                            a.dropdown-item(href='#!') Yesterday
                  .card-body.analytics-data(class="pt-0 !pb-0")
                    ul.balance-data 
                      li
                        span.circle.bg-primary
                        span.c-light.ms-1 Followers
                      li
                        span.circle.bg-secondary 
                        span.c-light.ms-1 Comments
                      li
                        span.circle.bg-success
                        span.c-light.ms-1 Likes
                    .social-tabs.tabs
                      .tab-links.custom-scrollbar.flex.flex-wrap
                        a(href ="#!" data-tabfilter="1").active.tab-link.social-box.bg-7-danger
                          .frame-image
                            .outline-10-danger
                              .bg-10-danger
                                i.fa-brands.fa-youtube.youtube-color.m-0.f-14
                          span Youtube
                        a(href="#!" data-tabfilter="2").tab-link.social-box.bg-7-primary
                          .frame-image
                            .outline-10-primary
                              .bg-10-primary
                                i.fa-brands.fa-facebook-f.bg-primary.text-light.m-0
                          span Facebook
                        a(href="#!" data-tabfilter="3").tab-link.social-box.bg-7-warning
                          .frame-image
                            .outline-10-warning
                              .bg-10-warning
                                i.fa-brands.fa-instagram.m-0.text-white.instagram-color
                          span Instagram  
                        a(href="#!" data-tabfilter="4").tab-link.social-box.bg-7-info
                          .frame-image
                            .outline-10-info
                              .bg-10-info
                                i.fa-brands.fa-linkedin-in.bg-info.text-white.m-0
                          span Linkedin
                        a(href="#!" data-tabfilter="5").tab-link.social-box.bg-7-secondary
                          .frame-image
                            .outline-10-secondary
                              .bg-10-secondary
                                i.fa-brands.fa-x-twitter.bg-dark.text-light.m-0
                          span X (Twitter)
                      .tab-content
                        div.tab-pan.fade.show.active(data-tabcontent="1")
                          div
                            #youtube-analysis
                        div.tab-pan.fade(data-tabcontent="2")
                          div
                            #facebook-analysis
                        div.tab-pan.fade(data-tabcontent="3")
                          div
                            #instagram-analysis
                        div.tab-pan.fade(data-tabcontent="4")
                          div
                            #linked-analysis
                        div.tab-pan.fade(data-tabcontent="5")
                          div
                            #twitter-analysis
              div(class="col-span-5 md:col-span-12 od-xl-8")
                .card 
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Top Followers By Country
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#countryDropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='countryDropdown')
                            a.dropdown-item(href='#!') Today
                            a.dropdown-item(href='#!') Maximum
                            a.dropdown-item(href='#!') Today
                            a.dropdown-item(href='#!') 30 Days
                            a.dropdown-item(href='#!') Yesterday 
                            a.dropdown-item(href='#!') Last month
                  .card-body.pt-0
                    .follower-country.mt-1
                      #countryMap(class="[@media(max-width:1833px)]:!h-[338px]")
                    .grid.grid-cols-12.gap-8.top-country(class="xxl:gap-5") 
                      div(class="col-span-6 sm:col-span-12")
                        .common-space
                          div
                            img(src="../assets/images/dashboard-5/flags/1.png", alt="flag")
                            p.mb-0.font-medium Germany
                          span.c-o-light.counter(data-target='865') 0
                        .progress
                          .progress-bar.bg-primary.rounded-full(role='progressbar', style='width: 40%', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100') 
                      div(class="col-span-6 sm:col-span-12")
                        .common-space
                          div
                            img(src="../assets/images/dashboard-5/flags/2.png", alt="flag")
                            p.mb-0.font-medium USA
                          span.c-o-light.counter(data-target='542') 0
                        .progress
                          .progress-bar.bg-primary.rounded-full(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100')  
                      div(class="col-span-6 sm:col-span-12")
                        .common-space
                          div
                            img(src="../assets/images/dashboard-5/flags/3.png", alt="flag")
                            p.mb-0.font-medium India
                          span.c-o-light.counter(data-target='951') 0
                        .progress
                          .progress-bar.bg-primary.rounded-full(role='progressbar', style='width: 60%', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100') 
                      div(class="col-span-6 sm:col-span-12")
                        .common-space
                          div
                            img(src="../assets/images/dashboard-5/flags/4.png", alt="flag")
                            p.mb-0.font-medium Australia
                          span.c-o-light.counter(data-target='751') 0
                        .progress
                          .progress-bar.bg-primary.rounded-full(role='progressbar', style='width: 20%', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100') 
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
