@golstats/gsc-top-player 1.0.0

package/src/components/comparative/gsc-top.vue

@@ -0,0 +1,1517 @@
+<template>
+  <div :class="type == 0 ? 'gsc-top' : 'gsc-top-full'">
+    <div ref="myDivRef">
+      <template v-if="type == 0">
+        <template v-if="topData.length > 0">
+          <GSCCarousel
+            :items="topData"
+            :is-pagination-visible="carrousel"
+            :are-navigation-arrows-visible="carrousel"
+            @input="changeCarrousel"
+          >
+            <template #default="{ item: page }">
+              <div class="row-table-carrousel">
+                <template v-for="(player, index) in page" :key="index">
+                  <template v-if="player.top == 1">
+                    <GSCLeaders
+                      @mediadata="emitEventMedia($event, category, categoryName)"
+                      :type="typeTable"
+                      :type-data="typeData"
+                      :game="game"
+                      :arrow="arrow"
+                      :team-widget="teamWidget"
+                      :can-play-videos="canPlayVideos"
+                      :is-expanded="playerexpand == player.id && expand"
+                      ref="GSCLeaders"
+                      :data="
+                        typeTable == 0
+                          ? {
+                              top: '01',
+                              photo: player.img,
+                              logo:
+                                'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                                player.teamid +
+                                '.png',
+                              name: player.name,
+                              player_short: player.name_short,
+                              player_id: player.id,
+                              categoryId: category,
+                              total: player.total,
+                            }
+                          : {
+                              top: '01',
+                              logo: player.img,
+                              total: player.total,
+                              name_team: player.name,
+                              player_id: player.id,
+                            }
+                      "
+                      :category-name="categoryName"
+                      :buttonMaxWidth="
+                        typeTable != 0
+                          ? elementSize.width > 360
+                            ? '210px'
+                            : '130px'
+                          : elementSize.width > 360
+                            ? '180px'
+                            : '110px'
+                      "
+                      buttonFontSize="12px"
+                      iconSize="11px"
+                      @expand="clickexpand"
+                      @more="morestats"
+                    />
+                  </template>
+                  <template v-else>
+                    <GSCRowTable
+                      :type-data="typeData"
+                      :team-widget="teamWidget"
+                      :game="game"
+                      :type="typeTable"
+                      :type-view="type"
+                      :arrow="arrow"
+                      :is-expanded="playerexpand == player.id && expand"
+                      @mediadata="emitEventMedia($event, category, categoryName)"
+                      :data="
+                        typeTable == 0
+                          ? {
+                              position: player.top,
+                              player_name: player.name,
+                              player_short: player.name_short,
+                              player_photo: player.img,
+                              total: player.total,
+                              id: player.id,
+                              player_age: player.age,
+                              team_abrev: player.team,
+                              team_logo:
+                                'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                                player.teamid +
+                                '.png',
+                              player_position: player.position,
+                              player_country_flag:
+                                'https://golstatsimages.blob.core.windows.net/flags/' +
+                                player.country +
+                                '.jpg',
+                              player_games: player.minutes,
+                              player_min: player.games,
+                              league_name:
+                                '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Liga MX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
+                            }
+                          : {
+                              position: player.top,
+                              team_logo: player.img,
+                              team_abrev: player.name,
+                              frequency: player.frecuency,
+                              promthistournament: player.game_avg,
+                              promlasttournament: player.game_avg_last_season,
+                              teams_games: '-',
+                              category: category,
+                              total: player.total,
+                              id: player.id,
+                            }
+                      "
+                      height="71px"
+                      :can-play-videos="canPlayVideos"
+                      :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
+                      @expand="clickexpand"
+                    />
+                  </template>
+                  <template v-if="expand && playerexpand == player.id">
+                    <GSCExpandedInfo
+                      :type="typeTable"
+                      :is-live="game.is_live"
+                      :view-effectiveness="player.positionId === 1 ? false : true"
+                      :data="
+                        typeTable == 0
+                          ? {
+                              teams: player.teamname,
+                              age: player.age,
+                              dataofbirth: player.date,
+                              nationality: player.nationality,
+                              countryFlag: player.player_country_flag,
+                              position: player.position,
+                              games: player.games,
+                              min: player.minutes,
+                              goals: player.total,
+                              effectiveness: player.effectiveness,
+                              category: categoryName,
+                              id: player.id,
+                            }
+                          : {
+                              position: player.positiontable,
+                              goals: player.goals,
+                              goals_received: player.goalsrecived,
+                              games_played: player.games_played,
+                              category: categoryName,
+                              effectiveness: player.effectiveness,
+                              xg: player.xg,
+                              total: player.total,
+                              attendance: '-',
+                              id: player.id,
+                            }
+                      "
+                      @viewprofile="viewprofile($event, player.teamid)"
+                      :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
+                    />
+                  </template>
+                </template>
+              </div>
+            </template>
+          </GSCCarousel>
+        </template>
+        <template v-else>
+          <div class="container-no-search-result">
+            <template v-if="isloading">
+              <div class="overlay-loading-top">
+                <div class="overlay-loading-top__spinner">
+                  <img
+                    src="https://golstatsimages.blob.core.windows.net/images-library/balon_liga.png"
+                    alt=""
+                  />
+                </div>
+                <div class="overlay-loading-top__text">Loading...</div>
+              </div>
+            </template>
+            <template v-else>
+              <div class="container-no-search-result-title">No existen resultados</div>
+              <div class="container-no-search-result-subtitle">
+                No existen resultados para este tipo de<br />
+                jugada, considerando el torneo y otros<br />
+                filtros que has seleccionado.
+              </div>
+            </template>
+          </div>
+        </template>
+      </template>
+      <template v-else>
+        <GSCTableHeader background="#183143" :type="typeTable" />
+        <template v-for="(page, index2) in topData" :key="index2">
+          <template v-for="(player, index) in page" :key="index">
+            <GSCRowTable
+              :type-data="typeData"
+              :team-widget="teamWidget"
+              :game="game"
+              :arrow="arrow"
+              :type="typeTable"
+              :type-view="type"
+              :can-play-videos="canPlayVideos"
+              :is-expanded="playerexpand == player.id && expand"
+              @mediadata="emitEventMediaFullTable($event, category, categoryName)"
+              :data="
+                typeTable == 0
+                  ? {
+                      position: player.top,
+                      player_name: player.name,
+                      player_short: player.name_short,
+                      player_photo: player.img,
+                      total: player.total,
+                      id: player.id,
+                      player_age: player.age,
+                      team_abrev: player.team,
+                      team_logo:
+                        'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                        player.teamid +
+                        '.png',
+                      player_position: player.position,
+                      player_country_flag:
+                        'https://golstatsimages.blob.core.windows.net/flags/' +
+                        player.country +
+                        '.jpg',
+                      player_games: player.games,
+                      player_min: player.minutes,
+                      league_name:
+                        '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Liga MX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
+                    }
+                  : {
+                      position: player.positiontable,
+                      team_logo: player.img,
+                      team_abrev: player.name,
+                      frequency: player.frecuency,
+                      promthistournament: player.game_avg,
+                      promlasttournament: player.game_avg_last_season,
+                      category: category,
+                      team_games: player.games_played,
+                      total: player.total,
+                      id: player.id,
+                    }
+              "
+              height="71px"
+              :background="((index2 + 1) * 5 + index) % 2 === 0 ? backgroundOdd : backgroundEven"
+              @expand="clickexpand"
+            />
+            <template v-if="expand && playerexpand == player.id">
+              <GSCExpandedInfo
+                :type="typeTable"
+                :is-live="game.is_live"
+                :additionalClass="'fullTable'"
+                :view-effectiveness="player.positionId === 1 ? false : true"
+                :data="
+                  typeTable == 0
+                    ? {
+                        teams: player.teamname,
+                        age: player.age,
+                        dataofbirth: player.date,
+                        nationality: player.nationality,
+                        countryFlag: player.player_country_flag,
+                        position: player.positionfull,
+                        positionfull: player.positionfull,
+                        games: player.games,
+                        min: player.minutes,
+                        goals: player.total,
+                        effectiveness: player.effectiveness,
+                        category: getCategoryName(category),
+                        id: player.id,
+                      }
+                    : {
+                        position: player.positiontable,
+                        goals: player.goals,
+                        goals_received: player.goalsrecived,
+                        games_played: player.games_played,
+                        category: categoryName,
+                        effectiveness: player.effectiveness,
+                        xg: player.xg,
+                        total: player.total,
+                        category: getCategoryName(category),
+                        attendance: '-',
+                        id: player.id,
+                      }
+                "
+                @viewprofile="viewprofile($event, player.teamid)"
+                :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
+              />
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { ref } from 'vue'
+import useElementSize from './useElementSize'
+import GSCLeaders from './gsc-header-tops.vue'
+import GSCRowTable from './gsc-row.vue'
+import GSCTableHeader from './gsc-head-titles.vue'
+import GSCExpandedInfo from './gsc-expanded-info-player.vue'
+import { GSCCarousel } from '@golstats/gsc-carousel'
+import '@@/@golstats/gsc-carousel/dist/style.css'
+
+import nationalitiesCatalog from '@/components/comparative/nationalities-catalog.js'
+
+export default {
+  components: {
+    GSCCarousel,
+    GSCLeaders,
+    GSCRowTable,
+    GSCTableHeader,
+    GSCExpandedInfo,
+  },
+  props: {
+    isTeam: {
+      type: Boolean,
+      default: false,
+    },
+    typeTable: {
+      type: Number,
+      default: 0,
+    },
+    carrousel: {
+      type: Boolean,
+      default: false,
+    },
+    arrow: {
+      type: Boolean,
+      default: false,
+    },
+    typeData: {
+      type: Number,
+      default: 1,
+    },
+    gameId: {
+      type: Number,
+      default: 0,
+    },
+    filtersProp: {
+      type: [Object, String],
+      default: () => {},
+    },
+    game: {
+      type: Object,
+      default: () => ({}),
+    },
+    isWidget: {
+      type: Boolean,
+      default: false,
+    },
+    teamWidget: {
+      type: Number,
+      default: 0,
+    },
+    canPlayVideos: {
+      type: Boolean,
+      default: false,
+    },
+    filterTeam: {
+      type: Number,
+      default: 0,
+    },
+    timeLiveComparativeAvanced: {
+      type: Number,
+      default: 60000,
+    },
+    category: {
+      type: Number,
+      default: 1,
+    },
+    categoryName: {
+      type: String,
+      default: 'Goles',
+    },
+    seasonSelected: {
+      type: Object,
+      default: () => ({}),
+    },
+    season: {
+      type: Number,
+      default: 1772,
+    },
+    type: {
+      type: Number,
+      default: 0,
+    },
+    borderRadius: { type: String, default: '8px' },
+    borderWidth: { type: [String, Number], default: '2px' },
+    borderColor: { type: String, default: '#cfcfcf' },
+    backgroundOdd: { type: String, default: '#172531' },
+    backgroundEven: { type: String, default: '#0d1d29' },
+    numRows: { type: Number, default: 5 },
+  },
+  setup() {
+    const myDivRef = ref('myDivRef')
+    const { elementSize } = useElementSize(myDivRef)
+    return {
+      myDivRef,
+      elementSize,
+    }
+  },
+  watch: {
+    game: {
+      immediate: true,
+      deep: true,
+      async handler(newValue) {
+        if (!newValue) return
+        this.playersInfo = {}
+        this.teamInfo = {}
+        this.isloading = true
+        this.formatFilterStats = []
+        await this.getCategoryStats(this.season)
+        if (this.game.is_live) {
+          this.createIntervalTops()
+          this.$emit('intervalidtops', this.intervalIdtops)
+        }
+      },
+    },
+    typeData: {
+      immediate: true,
+      async handler(newValue) {
+        await this.getCategoryStats(this.season)
+        if (newValue === 1 && this.game.is_live) {
+          this.createIntervalTops()
+          this.$emit('intervalidtops', this.intervalIdtops)
+        } else {
+          clearInterval(this.intervalIdtops)
+        }
+      },
+    },
+    filtersProp: {
+      immediate: false,
+      deep: true,
+      async handler(newValue, oldValue) {
+        if (!newValue) return
+        if (
+          JSON.stringify(newValue) !== JSON.stringify(oldValue) ||
+          this.sonConjuntosDistintos(newValue.setNationalitiesIds, oldValue.setNationalitiesIds)
+        ) {
+          this.isloading = true
+          this.filterEmitAux = newValue
+          const categoryZone1 = [1, 23, 3, 4, 5, 7, 6, 9, 8, 11, 10, 12, 13, 15, 14, 17, 16, 22]
+          if (categoryZone1.includes(this.category)) {
+            this.filterEmitAux.typeZone = 1
+          } else {
+            this.filterEmitAux.typeZone = 2
+          }
+          this.formatFilterStats = await this.filterRecords(this.filterEmitAux)
+        }
+      },
+    },
+  },
+  computed: {
+    topData() {
+      this.changeStateLoading(true)
+      if (Object.entries(this.statsData).length > 0 && this.formatFilterStats.length > 0) {
+        var topTeam = {}
+        var topPlayer = {}
+        var sortTopTeam = []
+        var sortMinutes = []
+        var sortTopPlayer = []
+        var sortTopPlayerFilterTeam = []
+
+        this.formatFilterStats.map((play) => {
+          if (topTeam[play.team_id]) {
+            topTeam[play.team_id]['total'] = topTeam[play.team_id]['total'] + play.total
+          } else {
+            sortMinutes
+            topTeam[play.team_id] = {}
+            topTeam[play.team_id]['total'] = play.total
+            topTeam[play.team_id]['id'] = this.teamInfo[play.team_id].id
+            topTeam[play.team_id]['name'] = this.teamInfo[play.team_id].name.replace(' Femenil', '')
+            topTeam[play.team_id]['img'] =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + play.team_id + '.png'
+            topTeam[play.team_id]['effectiveness'] = this.teamInfo[play.team_id].effectiveness
+            topTeam[play.team_id]['frecuency'] = this.teamInfo[play.team_id].frecuency
+            topTeam[play.team_id]['game_avg'] = this.teamInfo[play.team_id].game_avg
+            topTeam[play.team_id]['game_avg_last_season'] =
+              this.teamInfo[play.team_id].game_avg_last_season
+            topTeam[play.team_id]['games_played_lastseason'] =
+              this.teamInfo[play.team_id].games_played_lastseason
+            topTeam[play.team_id]['games_played'] = this.teamInfo[play.team_id].games_played
+            topTeam[play.team_id]['positiontable'] = this.teamInfo[play.team_id].positiontable
+            topTeam[play.team_id]['goals'] = this.teamInfo[play.team_id].goals
+            topTeam[play.team_id]['goalsrecived'] = this.teamInfo[play.team_id].goalsrecived
+            topTeam[play.team_id]['xg'] = this.teamInfo[play.team_id].xg
+          }
+          if (topPlayer[play.player_id]) {
+            if (play.player_id != 0 && play.player_id != 62117) {
+              topPlayer[play.player_id]['total'] = topPlayer[play.player_id]['total'] + play.total
+            }
+          } else {
+            if (play.player_id != 0 && play.player_id != 62117) {
+              topPlayer[play.player_id] = {}
+              topPlayer[play.player_id]['total'] = play.total
+              if (play.player_id && this.playersInfo[play.player_id]) {
+                topPlayer[play.player_id]['name'] = this.playersInfo[play.player_id].name
+                topPlayer[play.player_id]['name_short'] = this.getnameshort(
+                  this.playersInfo[play.player_id].name,
+                )
+                topPlayer[play.player_id]['img'] = this.playersInfo[play.player_id].img
+                topPlayer[play.player_id]['id'] = this.playersInfo[play.player_id].id
+                topPlayer[play.player_id]['age'] = this.playersInfo[play.player_id].age
+                topPlayer[play.player_id]['team'] = this.playersInfo[play.player_id].team
+                topPlayer[play.player_id]['teamname'] = this.playersInfo[play.player_id].teamname
+                topPlayer[play.player_id]['teamid'] = this.playersInfo[play.player_id].teamid
+                topPlayer[play.player_id]['position'] = this.playersInfo[play.player_id].position
+                topPlayer[play.player_id]['positionId'] =
+                  this.playersInfo[play.player_id].positionId
+                topPlayer[play.player_id]['positionfull'] =
+                  this.playersInfo[play.player_id].positionfull
+                topPlayer[play.player_id]['country'] = this.playersInfo[play.player_id].country
+                topPlayer[play.player_id]['effectiveness'] =
+                  this.playersInfo[play.player_id].effectiveness
+                topPlayer[play.player_id]['minutes'] =
+                  this.playersInfo[play.player_id].minutes_played
+                topPlayer[play.player_id]['games'] = this.playersInfo[play.player_id].games_played
+                topPlayer[play.player_id]['date'] = this.playersInfo[play.player_id].date
+                topPlayer[play.player_id]['nationality'] =
+                  this.playersInfo[play.player_id].nationality
+                topPlayer[play.player_id]['player_country_flag'] =
+                  this.playersInfo[play.player_id].player_country_flag
+                topPlayer[play.player_id]['categoryName'] = this.categoryName
+              } else {
+                topPlayer[play.player_id]['id'] = play.player_id
+                topPlayer[play.player_id]['name'] = play.player_id
+                topPlayer[play.player_id]['img'] = 'SIN IMAGEN'
+                topPlayer[play.player_id]['age'] = ''
+                topPlayer[play.player_id]['teamname'] = ''
+                topPlayer[play.player_id]['team'] = ''
+                topPlayer[play.player_id]['teamid'] = 0
+                topPlayer[play.player_id]['position'] = ''
+                topPlayer[play.player_id]['positionId'] = 0
+                topPlayer[play.player_id]['positionfull'] = ''
+                topPlayer[play.player_id]['country'] = ''
+                topPlayer[play.player_id]['effectiveness'] = ''
+                topPlayer[play.player_id]['minutes'] = ''
+                topPlayer[play.player_id]['games'] = ''
+                topPlayer[play.player_id]['date'] = '00-00-0000'
+                topPlayer[play.player_id]['nationality'] = ''
+                topPlayer[play.player_id]['player_country_flag'] = ''
+                topPlayer[play.player_id]['categoryName'] = ''
+              }
+            }
+          }
+        })
+        sortTopTeam.push(...Object.values(topTeam))
+        sortTopPlayer.push(...Object.values(topPlayer))
+        sortTopTeam = this.sortAndSlice(Object.values(topTeam), 60)
+        //sortTopPlayer = this.sortAndSlice(Object.values(topPlayer), 60)
+        //sortTopPlayer.sort(this.compareObjects).reverse();
+        sortTopPlayer = sortTopPlayer.sort(this.compareObjectsMinutes).slice(0, 60)
+        sortTopPlayer = sortTopPlayer.map((player, index) => {
+          player.top = index < 9 ? '0' + (index + 1) : '' + (index + 1)
+          return player
+        })
+        sortTopTeam = sortTopTeam.map((team, index) => {
+          team.top = index < 9 ? '0' + (index + 1) : '' + (index + 1)
+          return team
+        })
+        if (this.filterTeam !== 0 && !this.isTeam) {
+          sortTopPlayerFilterTeam = sortTopPlayer.filter(
+            (player) => player.teamid === this.filterTeam,
+          )
+        }
+        this.changeStateLoading(false)
+        if (this.isTeam) {
+          return this.formatArrayPaginate(sortTopTeam)
+        } else {
+          if (this.filterTeam != 0) {
+            return this.formatArrayPaginate(sortTopPlayerFilterTeam)
+          } else {
+            return this.formatArrayPaginate(sortTopPlayer)
+          }
+        }
+      } else {
+        this.changeStateLoading(false)
+        return []
+      }
+    },
+  },
+  data: () => ({
+    url: 'https://8grl16o77j.execute-api.us-west-2.amazonaws.com/prod/live/tops',
+    urlPrematch:
+      'https://8grl16o77j.execute-api.us-west-2.amazonaws.com/prod/topsBySeasonAndCategory/',
+    data_headers: [
+      'team_id',
+      'player_id',
+      'playing_as',
+      'match_result',
+      'section',
+      'total',
+      'origen',
+      'destino',
+    ],
+    token:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MCwibmFtZSI6IlVzdWFyaW8gRnJlZSIsInVzZXJuYW1lIjoiZnJlZUBnb2xzdGF0cy5jb20iLCJlbWFpbCI6ImZyZWVAZ29sc3RhdHMuY29tIiwiaWF0IjoxNjA2NzU4Nzk1LCJleHAiOjE2MzgyOTQ3OTV9.kPNmP7yDtk38cAXrUyc7OHRh6J25VFqy-XUNzbK-4YE',
+    mapPlayers: new Map(),
+    setNationalityIds: new Set(),
+    arrayAgeRange: [0, 0],
+    arePlaysEmpty: false,
+    teamInfo: {},
+    formatFilterStats: [],
+    formatStats: [],
+    playersInfo: {},
+    isloading: true,
+    statsData: {},
+    updateSlider: 0,
+    intervalIdtops: null,
+    filterEmitAux: {},
+    filtersSelect: {
+      playingAs: [],
+      matchResult: [],
+      sections: [],
+      zone: [],
+      typeZone: [],
+    },
+    filtersValues: {
+      type: 1,
+      sections: [1, 2, 3, 4, 5, 6],
+      matchResult: [1, 2, 3],
+      playingAs: [1, 2],
+      zone: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      typeZone: 1,
+      arrayAgeRange: [1, 60],
+      setNationalitiesIds: [],
+      setPositionsIds: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+    },
+    expand: false,
+    playerexpand: 0,
+    positions: [
+      {
+        name: 'Portero',
+        fullname: 'POR',
+      },
+      {
+        name: 'Defensa central',
+        fullname: 'DFC',
+      },
+      {
+        name: 'Lateral por izquierda',
+        fullname: 'LI',
+      },
+      {
+        name: 'Lateral por derecha',
+        fullname: 'LD',
+      },
+      {
+        name: 'Volante por izquierda',
+        fullname: 'VI',
+      },
+      {
+        name: 'Volante por derecha',
+        fullname: 'VD',
+      },
+      {
+        name: 'Volante defensivo',
+        fullname: 'VDF',
+      },
+      {
+        name: 'Volante ofensivo',
+        fullname: 'VO',
+      },
+      {
+        name: 'Delantero',
+        fullname: 'DEL',
+      },
+      {
+        name: 'Desconocida',
+        fullname: 'Desc',
+      },
+    ],
+    categories: [
+      {
+        id: 1,
+        name: 'Goles',
+      },
+      /*{
+        id: 2,
+        name: 'Pases acertados'
+      },
+      {
+        id: 3,
+        name: 'Balones recuperados en disputa'
+      },
+      {
+        id: 4,
+        name: 'Asistencias'
+      },
+      {
+        id: 5,
+        name: 'Participaciones en gol'
+      },
+      {
+        id: 6,
+        name: 'Tiros a gol'
+      },
+      {
+        id: 7,
+        name: 'Tiros a gol que llegaron a la portería'
+      },
+      {
+        id: 8
+      },
+      {
+        id: 9,
+        name: 'Cabeceos en área propia'
+      },
+      {
+        id: 10,
+        name: 'Centros'
+      },
+      {
+        id: 11,
+        name: 'Centros acertados'
+      },
+      {
+        id: 12,
+        name: '1vs1 exitosos ofensivos'
+      },
+      {
+        id: 13,
+        name: '1vs1 exitosos ofensivos que terminaron en gol'
+      },
+      {
+        id: 14,
+        name: '1vs1 defensivos exitoso'
+      },
+      {
+        id: 15,
+        name: 'Rechaces'
+      },
+      {
+        id: 16,
+        name: 'Balones ganados en área propia'
+      },
+      {
+        id: 17,
+        name: 'Balones ganados en área rival'
+      },
+      {
+        id: 18,
+        name: 'Faltas cometidas'
+      },
+      {
+        id: 19,
+        name: 'Faltas recibidas'
+      },
+      {
+        id: 20,
+        name: 'Tarjetas amarillas'
+      },
+      {
+        id: 21,
+        name: 'Tarjetas rojas'
+      },
+      {
+        id: 22,
+        name: 'Atajadas'
+      },
+      {
+        id: 23,
+        name: 'Tiros de Esquina'
+      }*/
+    ],
+  }),
+  methods: {
+    changeStateLoading(value) {
+      this.isloading = value
+    },
+    compareObjectsMinutes(obj1, obj2) {
+      if (obj1.total > obj2.total) {
+        return -1
+      } else if (obj1.total < obj2.total) {
+        return 1
+      } else {
+        // En caso de empate en 'total', desempatar por 'minutes_played'
+        if (obj1.minutes < obj2.minutes) {
+          return -1
+        } else if (obj1.minutes > obj2.minutes) {
+          return 1
+        } else {
+          return 0
+        }
+      }
+    },
+
+    sonConjuntosDistintos(set1, set2) {
+      // Convertir sets a arrays
+      const array1 = Array.from(set1)
+      const array2 = Array.from(set2)
+
+      // Verificar si los arrays son iguales
+      if (array1.length !== array2.length) {
+        return true // Distintos si tienen diferentes longitudes
+      }
+
+      for (let i = 0; i < array1.length; i++) {
+        if (!set2.has(array1[i])) {
+          return true // Distintos si un elemento no está en el otro conjunto
+        }
+      }
+
+      return false // Son iguales
+    },
+    getnameshort(namePlayerShort) {
+      var NameArrayHomeBench = namePlayerShort.split(',')
+      var lastArrayNameBench = NameArrayHomeBench[0].split(' ')
+      var ArrayNameBench = NameArrayHomeBench[1].trim().split(' ')
+      var lastNameHomeBench = ''
+      if (lastArrayNameBench.length == 2 || lastArrayNameBench.length == 1) {
+        if (lastArrayNameBench[0].length < 4) {
+          lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+        } else {
+          lastNameHomeBench = lastArrayNameBench[0]
+        }
+      } else {
+        if (lastArrayNameBench.length == 3) {
+          lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+        } else {
+          if (lastArrayNameBench.length == 4) {
+            lastNameHomeBench =
+              lastArrayNameBench[1] + ' ' + lastArrayNameBench[2] + ' ' + lastArrayNameBench[3]
+          }
+        }
+      }
+      var nameHomeBench =
+        ArrayNameBench[ArrayNameBench.length - 1] != ''
+          ? ArrayNameBench[ArrayNameBench.length - 1].charAt(0)
+          : ArrayNameBench[ArrayNameBench.length - 2]
+            ? ArrayNameBench[ArrayNameBench.length - 2].charAt(0)
+            : ''
+      lastNameHomeBench = lastNameHomeBench.replace(',', '')
+      return nameHomeBench + '. ' + lastNameHomeBench
+    },
+    changeCarrousel() {
+      this.expand = false
+      this.playerexpand = 0
+    },
+    compareObjects(obj1, obj2) {
+      // Compare by 'name' first
+      if (obj1.total < obj2.total) return -1
+      if (obj1.total > obj2.total) return 1
+
+      // If names are equal, compare by 'age'
+      if (obj1.name < obj2.name) return -1
+      if (obj1.name > obj2.name) return 1
+
+      // If both 'name' and 'age' are equal, return 0
+      return 0
+    },
+    sortAndSlice(array, limit) {
+      return array
+        .sort((a, b) => (a.name < b.name ? 1 : -1) && (a.total < b.total ? 1 : -1))
+        .slice(0, limit)
+    },
+    getCategoryName(category) {
+      let ret = ''
+      for (let i = 0; i < this.categories.length; i++) {
+        if (category == this.categories[i].id) ret = this.categories[i].name
+      }
+      return ret
+    },
+    translateTopCategories(topCategoryId) {
+      const translator = {
+        1: [12, 55, '35_r', '54_r'],
+        2: [2, 20],
+        3: [485, 486, 487, 488],
+        4: [10, 324],
+        5: [27, 323],
+        6: [510],
+        7: [537, 540, 544, 547],
+        8: [328],
+        9: [231, 238, 280, 287, 294, 406],
+        10: [13, 25],
+        11: [98, 101, 104, 105, 109, 112, 115, 116],
+        12: [4],
+        13: [88],
+        14: [5],
+        15: [34],
+        16: [23],
+        17: [11],
+        18: [17, 50],
+        19: [18, 49],
+        20: [14, 52],
+        21: [15, 53],
+        22: [39],
+        23: [31, 32],
+      }
+      return translator[topCategoryId] || []
+    },
+
+    getCoordinatePointPerCategory(topCategoryId) {
+      const origin = 1
+      const middleOrigin = 2
+      const destiny = 3
+      const coordinatePoints = {
+        1: middleOrigin,
+        2: destiny,
+        3: origin,
+        4: middleOrigin,
+        5: origin,
+        6: middleOrigin,
+        7: middleOrigin,
+        8: origin,
+        9: origin,
+        10: middleOrigin,
+        11: middleOrigin,
+        12: origin,
+        13: origin,
+        14: origin,
+        15: origin,
+        16: origin,
+        17: origin,
+        18: destiny,
+        19: destiny,
+        20: destiny,
+        21: destiny,
+        22: origin,
+        23: origin,
+      }
+      return coordinatePoints[topCategoryId] || 0
+    },
+
+    emitEventMedia(data, category, categoryName) {
+      let matchResult = this.filtersValues.matchResult
+      let playingAs = this.filtersValues.playingAs
+      let sections = this.filtersValues.sections
+      let zone = this.filtersValues.zone
+      let categoryIds = this.translateTopCategories(category)
+
+      if (Object.keys(this.filterEmitAux).length > 0) {
+        matchResult = this.filterEmitAux.matchResult
+        playingAs = this.filterEmitAux.playingAs
+        sections = this.filterEmitAux.sections
+        zone = this.filterEmitAux.zone
+      }
+      const videoPlayerSection = 1
+      const playerType = 2
+      const teamType = 3
+      const playListType = this.isTeam ? teamType : playerType
+      const topLeaderId = data.player_id //for team id or player id
+      let playerIds = []
+      let teamId = this.isTeam ? data.id : this.filterTeam
+
+      if (topLeaderId) {
+        if (this.isTeam) {
+          teamId = topLeaderId
+        } else {
+          playerIds = [topLeaderId]
+          categoryIds = categoryIds.filter((id) => !id.toString().includes('_r'))
+        }
+      } else if (this.isTeam) {
+        teamId = data.id
+      } else {
+        playerIds = [data.id]
+        categoryIds = categoryIds.filter((id) => !id.toString().includes('_r'))
+      }
+      const jsonConfig = {
+        auxwidget:
+          this.canPlayVideos ||
+          (this.game.awayTeam.team_id == this.teamWidget && this.typeData != 1)
+            ? true
+            : false,
+        seasonId: this.game.is_live == 1 ? this.season : this.game.regularSeasonId,
+        isFeaturedPlayers: false,
+        mainSectionType: videoPlayerSection,
+        playListType: playListType,
+        gameIds: null,
+        playerIds: playerIds,
+        goalkeeperIds: [],
+        categoryIds: this.translateTopCategories(category),
+        teamId: teamId || 0,
+        matchResult: matchResult,
+        categorySingleName: '',
+        isRivalSubject: false,
+        avoidCategorySingleName: false,
+        currentPlayIndex: 0,
+        playData: null,
+        lastClashedGameId: null,
+        tournamentsLastClashes: null,
+        advancedFilter: {
+          playListTitle: categoryName,
+          playingAs: playingAs,
+          timeSections: sections,
+          fieldSections: zone,
+          coordinatePoint: this.getCoordinatePointPerCategory(category),
+        },
+      }
+      this.$emit('setopenmedia', jsonConfig)
+    },
+
+    emitEventMediaFullTable(data, category, categoryName) {
+      let matchResult = this.filtersValues.matchResult
+      let playingAs = this.filtersValues.playingAs
+      let sections = this.filtersValues.sections
+      let zone = this.filtersValues.zone
+      let categoryIds = this.translateTopCategories(category)
+
+      if (Object.keys(this.filterEmitAux).length > 0) {
+        matchResult = this.filterEmitAux.matchResult
+        playingAs = this.filterEmitAux.playingAs
+        sections = this.filterEmitAux.sections
+        zone = this.filterEmitAux.zone
+      }
+      const videoPlayerSection = 1
+      const playerType = 2
+      const teamType = 3
+      const playListType = this.isTeam ? teamType : playerType
+      let playerIds = []
+      let teamId = this.isTeam ? data.id : this.filterTeam
+      if (this.isTeam) {
+        teamId = data.id
+      } else {
+        playerIds = [data.id]
+        categoryIds = categoryIds.filter((id) => !id.toString().includes('_r'))
+      }
+
+      const jsonConfig = {
+        seasonId: this.season,
+        isFeaturedPlayers: false,
+        mainSectionType: videoPlayerSection,
+        playListType: playListType,
+        gameIds: null,
+        playerIds: playerIds,
+        goalkeeperIds: [],
+        categoryIds,
+        teamId: teamId || 0,
+        matchResult: matchResult,
+        categorySingleName: '',
+        isRivalSubject: false,
+        avoidCategorySingleName: false,
+        currentPlayIndex: 0,
+        playData: null,
+        lastClashedGameId: null,
+        tournamentsLastClashes: null,
+        advancedFilter: {
+          playListTitle: categoryName,
+          playingAs: playingAs,
+          timeSections: sections,
+          fieldSections: zone,
+          coordinatePoint: this.getCoordinatePointPerCategory(category),
+        },
+      }
+      this.$emit('setopenmedia', jsonConfig)
+    },
+
+    replaceImgPlayer(img) {
+      const imgNew = img.replace(
+        'https://golstatsimages.blob.core.windows.net/players-profile/',
+        'https://golstatsimages.blob.core.windows.net/players-profile-no-bg/',
+      )
+      return imgNew
+    },
+    abrevName(name) {
+      var NameArrayHome = name.split(',')
+      var lastArrayName = NameArrayHome[0].split(' ')
+      var ArrayName = NameArrayHome[1].trim().split(' ')
+      var lastNameHome = ''
+      if (lastArrayName.length == 2 || lastArrayName.length == 1) {
+        if (lastArrayName[0].length < 4) {
+          lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+        } else {
+          lastNameHome = lastArrayName[0]
+        }
+      } else {
+        if (lastArrayName.length == 3) {
+          lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+        } else {
+          if (lastArrayName.length == 4) {
+            lastNameHome = lastArrayName[1] + ' ' + lastArrayName[2] + ' ' + lastArrayName[3]
+          }
+        }
+      }
+      var nameHome =
+        ArrayName[ArrayName.length - 1] != ''
+          ? ArrayName[ArrayName.length - 1].charAt(0)
+          : ArrayName[ArrayName.length - 2]
+            ? ArrayName[ArrayName.length - 2].charAt(0)
+            : ''
+      lastNameHome = lastNameHome.replace(',', '')
+      var abrevNamePlayerHome = nameHome + '. ' + lastNameHome
+      return abrevNamePlayerHome
+    },
+    clickMore(category) {
+      this.$emit('more', { category: category, categoryName: this.categoryName })
+    },
+    morestats() {
+      this.$emit('more', this.category)
+    },
+    viewprofile(id, teamId) {
+      this.$emit('clickprofile', { id, teamId, isTeam: this.isTeam })
+    },
+    clickexpand(expandobject) {
+      this.expand = expandobject.expand
+      this.playerexpand = expandobject.id
+    },
+    async getCategoryStats(season) {
+      this.mapPlayers = new Map()
+      try {
+        if (!season) return
+        let catPlays = []
+        let teamData = {}
+        let playersData = {}
+        let seasonGet = this.season
+        if (this.seasonSelected?.related_seasons?.some((s) => s.id === this.season)) {
+          seasonGet = this.seasonSelected.id
+        }
+        this.arePlaysEmpty = false
+        const axiosInstance = axios.create({
+          headers: {
+            Authorization: `${this.token}`,
+          },
+        })
+        this.isloading = true
+        let data = {}
+        if (this.typeData == 1) {
+          if (this.isWidget && this.teamWidget != 0) {
+            data = await axiosInstance.get(
+              this.url + '/' + this.gameId + '/' + this.category + '?t=' + this.teamWidget,
+            )
+          } else {
+            data = await axiosInstance.get(this.url + '/' + this.gameId + '/' + this.category)
+          }
+        } else {
+          if (this.game.game_status === 1) {
+            if (this.isWidget && this.teamWidget != 0) {
+              data = await axiosInstance.get(
+                this.url + '/' + this.gameId + '/' + this.category + '?acc=1&t=' + this.teamWidget,
+              )
+            } else {
+              data = await axiosInstance.get(
+                this.url + '/' + this.gameId + '/' + this.category + '?acc=1',
+              )
+            }
+          } else {
+            if (this.isWidget && this.teamWidget != 0) {
+              data = await axiosInstance.get(
+                this.urlPrematch + seasonGet + '/' + this.category + '?t=' + this.teamWidget,
+              )
+            } else {
+              data = await axiosInstance.get(
+                this.urlPrematch +
+                  seasonGet +
+                  '/' +
+                  this.category +
+                  '?t=' +
+                  this.game.homeTeam.team_id +
+                  '&t=' +
+                  this.game.awayTeam.team_id,
+              )
+            }
+          }
+        }
+        if (data && data.data && data.data.data && data.data.data.length > 0) {
+          catPlays = data.data.data.map((play) => {
+            return this.formatStatsData(play)
+          })
+          data.data.teams.forEach((data) => {
+            teamData[data[0]] = {}
+            teamData[data[0]]['id'] = data[0]
+            teamData[data[0]]['name'] = data[1]
+            teamData[data[0]]['abrv'] = data[2]
+            teamData[data[0]]['img'] = data[3]
+            teamData[data[0]]['effectiveness'] = data[4]
+            teamData[data[0]]['games_played'] = data[5]
+            teamData[data[0]]['games_played_lastseason'] = data[6]
+            teamData[data[0]]['positiontable'] = data[7]
+            teamData[data[0]]['goals'] = data[8]
+            teamData[data[0]]['goalsrecived'] = data[9]
+            teamData[data[0]]['xg'] = data[10]
+            teamData[data[0]]['frecuency'] = data[11]
+            teamData[data[0]]['game_avg'] = data[12]
+            teamData[data[0]]['game_avg_last_season'] = data[13]
+          })
+          const setNationalityIds = new Set()
+          data.data.players.forEach((data) => {
+            const objectPlayer = this.getObjectPlayer(data)
+            this.mapPlayers.set(objectPlayer.numberId, objectPlayer)
+            const numberPlayerAge = objectPlayer.numberAge
+            const team = objectPlayer.teamName.length > 0 ? objectPlayer.teamName[0].acronym : ''
+            const teamname =
+              objectPlayer.teamName.length > 0
+                ? teamData[objectPlayer.teamName[0].team_id].name
+                : ''
+            const team_id = objectPlayer.teamName.length > 0 ? objectPlayer.teamName[0].team_id : ''
+            const positionname = this.positions[objectPlayer.numberPositionId - 1].fullname
+            const positionnamefull = this.positions[objectPlayer.numberPositionId - 1].name
+            const country =
+              objectPlayer.countryId.length > 0 ? objectPlayer.countryId[0].nationality_id : ''
+            const effectiveness = objectPlayer.effectiveness
+            const minutes = objectPlayer.min
+            const games_played = objectPlayer.games
+            const dateOfBirth = objectPlayer.date
+            objectPlayer.arrayNationalities.forEach((objectNationality) => {
+              setNationalityIds.add(objectNationality.numberId)
+            })
+            playersData[data[0]] = {
+              id: data[0],
+              name: data[1],
+              img: data[2],
+              age: numberPlayerAge,
+              team: team,
+              teamname: teamname,
+              teamid: team_id,
+              position: positionname,
+              positionfull: positionnamefull,
+              effectiveness: effectiveness,
+              country: country,
+              games_played: games_played,
+              minutes_played: minutes,
+              date: dateOfBirth,
+              nationality: objectPlayer.stringNationalityName,
+              player_country_flag: objectPlayer.player_country_flag,
+              positionId: objectPlayer.numberPositionId,
+            }
+          })
+          this.setNationalityIds = setNationalityIds
+          this.arrayAgeRange = [data.data.min_age, data.data.max_age]
+        } else {
+          this.arePlaysEmpty = true
+        }
+        this.teamInfo = teamData
+        this.playersInfo = playersData
+        this.formatStats = catPlays
+        this.formatFilterStats = this.filterRecords(this.filtersSelect)
+        this.statsData = data
+      } catch (e) {
+        return Promise.reject(e)
+      }
+    },
+    filterRecords(filtersEmit) {
+      if (this.formatStats.length > 0) {
+        return this.formatStats.filter((play) => {
+          const playingAs = filtersEmit.playingAs.includes(play.playing_as)
+          const matchResult = filtersEmit.matchResult.includes(play.match_result)
+          const matchLapse = filtersEmit.sections.includes(play.section)
+          const matchZone =
+            (filtersEmit.typeZone === 1 && filtersEmit.zone.includes(play.origen)) ||
+            (filtersEmit.typeZone === 2 && filtersEmit.zone.includes(play.destino))
+          if (
+            filtersEmit.setPositionsIds &&
+            filtersEmit.setNationalitiesIds &&
+            filtersEmit.arrayAgeRange &&
+            filtersEmit.setYear &&
+            !this.isTeam
+          ) {
+            const objectPlayer = this.mapPlayers.get(play.player_id)
+            if (!objectPlayer) {
+              return false
+            }
+            if (filtersEmit.booleanAreNationalTeamsVisible) {
+              // national team validation
+              if (filtersEmit.setAvailableNationalTeamsPlayersIds.size > 0) {
+                if (!filtersEmit.setAvailableNationalTeamsPlayersIds.has(play.player_id)) {
+                  return false
+                }
+              }
+            } else {
+              // nationality validation
+              let booleanHasNationality = false
+              for (const numberNationalityId of objectPlayer.arrayNationalitiesIds) {
+                if (filtersEmit.setNationalitiesIds.has(numberNationalityId)) {
+                  booleanHasNationality = true
+                  break
+                }
+              }
+              if (!booleanHasNationality) {
+                return false
+              }
+            }
+            if (
+              objectPlayer.numberAge < filtersEmit.arrayAgeRange[0] ||
+              objectPlayer.numberAge > filtersEmit.arrayAgeRange[1]
+            ) {
+              return false
+            }
+            if (objectPlayer.date < filtersEmit.setYear) {
+              return false
+            }
+            if (!filtersEmit.setPositionsIds.includes(objectPlayer.numberPositionId)) {
+              return false
+            }
+          }
+
+          //this.isloading = true
+          return (
+            (filtersEmit.playingAs.length === 0 || playingAs) &&
+            (filtersEmit.matchResult.length === 0 || matchResult) &&
+            (filtersEmit.sections.length === 0 || matchLapse) &&
+            (filtersEmit.zone.length === 0 || matchZone)
+          )
+        })
+      } else {
+        return []
+      }
+    },
+    updateSliderF() {
+      this.updateSlider += 1
+    },
+    formatStatsData(play) {
+      const formattedPlay = {}
+
+      // Switch values for play[2]
+      if (play[1] === 0 && (play[2] === 1 || play[2] === 2)) {
+        play[2] = 3 - play[2]
+      }
+
+      // Switch values for play[3]
+      if (play[1] === 0 && (play[3] === 1 || play[3] === 2)) {
+        play[3] = 3 - play[3]
+      }
+
+      this.data_headers.forEach((header, index) => {
+        formattedPlay[header] = play[index]
+      })
+
+      return formattedPlay
+    },
+    getObjectPlayer(arrayPlayerData) {
+      const arrayNationalitiesIds = []
+      const arrayNationalities = arrayPlayerData[7].map((objectNationality) => {
+        arrayNationalitiesIds.push(objectNationality.nationality_id)
+        return {
+          stringName: objectNationality.nationality,
+          numberId: objectNationality.nationality_id,
+        }
+      })
+      const arrayPlayerDateOfBirth = arrayPlayerData[9].split('-')
+      return {
+        numberId: arrayPlayerData[0] !== undefined ? arrayPlayerData[0] : '',
+        stringFullName: arrayPlayerData[1] !== undefined ? arrayPlayerData[1] : '',
+        stringImageUrl: arrayPlayerData[2] !== undefined ? arrayPlayerData[2] : '',
+        numberTeamId: arrayPlayerData[3] !== undefined ? arrayPlayerData[3] : '',
+        player_country_flag:
+          'https://golstatsimages.blob.core.windows.net/flags/' + arrayPlayerData[3] + '.jpg',
+        stringNationalityName: nationalitiesCatalog[arrayPlayerData[3]],
+        numberAge: arrayPlayerData[5] !== undefined ? arrayPlayerData[5] : '',
+        numberPositionId: arrayPlayerData[6] !== undefined ? arrayPlayerData[6] : '',
+        countryId: arrayPlayerData[7] !== undefined ? arrayPlayerData[7] : '',
+        teamName: arrayPlayerData[10] !== undefined ? arrayPlayerData[10] : '',
+        effectiveness: arrayPlayerData[11] !== undefined ? arrayPlayerData[11] : '',
+        min: arrayPlayerData[13] !== undefined ? arrayPlayerData[13] : '',
+        games: arrayPlayerData[12] !== undefined ? arrayPlayerData[12] : '',
+        date: arrayPlayerDateOfBirth.length > 0 ? Number(arrayPlayerDateOfBirth[0]) : 0,
+        arrayNationalities,
+        category: this.categoryName,
+        arrayNationalitiesIds,
+      }
+    },
+    formatArrayPaginate(arrayData) {
+      const num = Math.ceil(arrayData.length / this.numRows)
+
+      return Array.from({ length: num }, (_, index) => {
+        const start = index * this.numRows
+        const end = start + this.numRows
+        return arrayData.slice(start, end)
+      })
+    },
+    createIntervalTops() {
+      this.intervalIdtops = setInterval(async () => {
+        await this.getCategoryStats(this.season)
+      }, this.timeLiveComparativeAvanced) //300000
+    },
+    clearTopsInterval() {
+      if (this.intervalIdtops) {
+        clearInterval(this.intervalIdtops)
+        this.intervalIdtops = null
+      }
+    },
+  },
+  beforeUnmount() {
+    this.clearTopsInterval()
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import '/css/fonts.css';
+.overlay-loading-top {
+  position: absolute; /* Sit on top of the page content */
+  display: flex; /* Hidden by default */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+
+  &__spinner {
+    height: 70px;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+
+    & > img {
+      height: 70px;
+      object-fit: contain;
+    }
+  }
+
+  &__text {
+    font-size: 1.4rem;
+    margin-top: 0.8em;
+    color: white;
+    font-family: 'Poppins-Regular';
+  }
+}
+.groupsLeague {
+  position: relative;
+  line-height: 20px;
+  font-weight: 500;
+  font-family: 'Poppins-Regular';
+  font-size: 12px;
+  color: '#FFFFFF';
+  max-width: 182px;
+  line-height: 14px;
+  text-align: left;
+}
+
+@media screen and (max-width: 1125px) {
+  .groupsLeague {
+    max-width: 150px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .groupsLeague {
+    max-width: 160px;
+  }
+}
+@media screen and (max-width: 380px) {
+  .groupsLeague {
+    font-size: 11px;
+    max-width: 140px;
+  }
+}
+.text {
+  display: flex;
+  flex-direction: row;
+  padding: 0px 16px;
+  align-items: center;
+  justify-content: center;
+}
+.btnViewFullList {
+  margin: 0 !important;
+
+  position: absolute;
+  right: 8px;
+  width: fit-content;
+  border-bottom: 1px solid rgb(203, 238, 107);
+
+  padding: 0px 0px 2px;
+  align-items: center;
+  justify-content: flex-end;
+  z-index: 1;
+  text-align: center;
+  font-size: 13px;
+  font-family: Montserrat-SemiBold;
+  height: 33px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.hidden {
+  display: none;
+}
+.gsc-top {
+  width: 100%;
+  position: relative;
+  height: auto;
+  min-height: 460px;
+  margin: 0 auto;
+  padding-bottom: 30px;
+  border-radius: v-bind(borderRadius);
+  border-style: solid;
+  border-width: v-bind(borderWidth);
+  border-color: v-bind(borderColor);
+}
+
+.gsc-top-full {
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+  background: rgb(13, 29, 41);
+  margin-top: 20px;
+}
+
+.row-table-carrousel {
+  width: 100%;
+  height: auto;
+  /*  min-height: 480px; */
+  display: inline-block;
+  margin-top: 45px;
+}
+.container-no-search-result {
+  width: 100%;
+  height: 480px;
+  margin-top: 5px;
+  border: 1px solid rgba(149, 149, 149, 0.4);
+  position: relative;
+}
+.container-no-search-result-subtitle {
+  font-family: 'Poppins-Regular';
+  font-size: 14px;
+  color: rgb(172, 172, 172);
+  text-align: center;
+  line-height: 18px;
+  margin-top: 10px;
+}
+.container-no-search-result-title {
+  font-family: 'Poppins-SemiBold';
+  font-size: 17px;
+  color: rgb(225, 225, 225);
+  text-align: center;
+  margin-top: 170px;
+}
+</style>