@golstats/gsc-reports 1.0.2 → 1.0.3

package/src/components/thumbnails-reports/AnalisisPostMatchType2.vue

@@ -1,743 +1,743 @@
-<template>
-  <div class="prematch-bg">
-    <!-- Escudos de fondo -->
-    <div class="background-shields">
-      <div class="shield-left">
-        <img
-          :src="
-            'https://golstatsimages.blob.core.windows.net/teams-150/' +
-            report.game.home_team +
-            '.png'
-          "
-          alt="Escudo local"
-        />
-      </div>
-      <div class="shield-right">
-        <img
-          :src="
-            'https://golstatsimages.blob.core.windows.net/teams-150/' +
-            report.game.visiting_team +
-            '.png'
-          "
-          alt="Escudo visitante"
-        />
-      </div>
-    </div>
-
-    <div class="title">Análisis <span class="highlight">Postmatch</span></div>
-    <div class="subtitle">
-      <span class="jornada">Jornada {{ traducirJornada(report.game.matchday_name) }}</span>
-      <span class="fecha"> - {{ formatDate(report.game.date_time_utc) }}</span>
-    </div>
-    <div class="teams-grid">
-      <div class="row row-top">
-        <div class="team team-local">
-          <span class="escudo-svg">
-            <img
-              width="55px"
-              :src="
-                'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                report.game.home_team +
-                '.png'
-              "
-            />
-          </span>
-          <span class="team-name">{{ report.game.home_team_acronym }}</span>
-        </div>
-        <div class="score">
-          <span class="score-text">{{ report.game.score[0] }}:{{ report.game.score[1] }}</span>
-        </div>
-        <div class="team team-visitor">
-          <span class="team-name">{{ report.game.visiting_team_acronym }}</span>
-          <span class="escudo-svg">
-            <img
-              width="55px"
-              :src="
-                'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                report.game.visiting_team +
-                '.png'
-              "
-            />
-          </span>
-        </div>
-      </div>
-      <div class="row row-bottom">
-        <div class="team-stats">
-          <span class="stat ball">
-            <svg
-              width="19"
-              height="19"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M10.0456 4.54688V6.92693"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M13.2109 9.32248L15.1681 8.27344"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M11.9961 12.9609L13.2064 14.3086"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M8.08198 12.9609L6.87109 14.3099"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.91797 8.27344L6.87609 9.22818"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </span>
-          <span
-            class="stat time"
-            :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
-            v-if="homeGoalsMinutes !== null"
-            >{{ homeGoalsMinutes }}</span
-          >
-          <div
-            class="separator"
-            :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
-          ></div>
-          <span class="stat red">
-            <svg
-              width="12"
-              height="16"
-              viewBox="0 0 14 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
-            </svg>
-            <span class="stat-number">{{ homeRedCardsCount || 0 }}</span>
-          </span>
-          <span class="stat yellow">
-            <svg
-              width="12"
-              height="16"
-              viewBox="0 0 14 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
-            </svg>
-            <span class="stat-number">{{ homeYellowCardsCount || 0 }}</span>
-          </span>
-        </div>
-        <div class="empty"></div>
-        <div class="team-stats">
-          <span class="stat-number">{{ awayYellowCardsCount || 0 }}</span>
-          <span class="stat yellow">
-            <svg
-              width="12"
-              height="16"
-              viewBox="0 0 14 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
-            </svg>
-          </span>
-          <span class="stat-number">{{ awayRedCardsCount || 0 }}</span>
-          <span class="stat red">
-            <svg
-              width="12"
-              height="16"
-              viewBox="0 0 14 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
-            </svg>
-          </span>
-          <div
-            class="separator"
-            :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
-          ></div>
-          <span
-            class="stat time"
-            :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
-            v-if="visitingGoalsMinutes !== null"
-            >{{ visitingGoalsMinutes }}</span
-          >
-          <span class="stat ball">
-            <svg
-              width="19"
-              height="19"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M10.0456 4.54688V6.92693"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M13.2109 9.32248L15.1681 8.27344"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M11.9961 12.9609L13.2064 14.3086"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M8.08198 12.9609L6.87109 14.3099"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.91797 8.27344L6.87609 9.22818"
-                stroke="white"
-                stroke-width="1.36665"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { formatDate } from '../../utils/dateUtils.js'
-import { computed } from 'vue'
-
-function traducirJornada(jornada) {
-  if (!jornada) return ''
-  return jornada
-    .replace('Matchday', 'J')
-    .replace('de Final', '')
-    .replace('Playoffs 1', 'CFI')
-    .replace('Playoffs 2', 'CFV')
-    .replace('Playoffs 3', 'SI')
-    .replace('Playoffs 4', 'SV')
-    .replace('Playoffs 5', 'FI')
-    .replace('Playoffs 6', 'FV')
-}
-// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
-const props = defineProps({
-  report: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-
-// Función computada para extraer y concatenar solo los minutos de los goles
-const homeGoalsMinutes = computed(() => {
-  const goalsArray = props.report?.game?.minutes?.home_goals_minutes
-
-  if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
-    return null
-  }
-
-  // Extraer solo los minutos de cada string
-  const minutes = goalsArray
-    .map((goal) => {
-      // Buscar el patrón de minutos al final del string (números seguidos de ')
-      const match = goal.match(/(\d+)'$/)
-      return match ? match[1] + "'" : ''
-    })
-    .filter((minute) => minute !== '')
-
-  // Si hay más de 5 goles, dividir en 2 renglones
-  if (minutes.length > 5) {
-    const firstRow = minutes.slice(0, 5).join(', ')
-    const secondRow = minutes.slice(5).join(', ')
-    return `${firstRow}\n${secondRow}`
-  }
-
-  // Si hay 5 o menos goles, mostrar en un solo renglón
-  return minutes.join(', ')
-})
-
-// Función computada para extraer y concatenar solo los minutos de los goles del equipo visitante
-const visitingGoalsMinutes = computed(() => {
-  const goalsArray = props.report?.game?.minutes?.visiting_goals_minutes
-
-  if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
-    return null
-  }
-
-  // Extraer solo los minutos de cada string
-  const minutes = goalsArray
-    .map((goal) => {
-      // Buscar el patrón de minutos al final del string (números seguidos de ')
-      const match = goal.match(/(\d+)'$/)
-      return match ? match[1] + "'" : ''
-    })
-    .filter((minute) => minute !== '')
-
-  // Si hay más de 5 goles, dividir en 2 renglones
-  if (minutes.length > 5) {
-    const firstRow = minutes.slice(0, 5).join(', ')
-    const secondRow = minutes.slice(5).join(', ')
-    return `${firstRow}\n${secondRow}`
-  }
-
-  // Si hay 5 o menos goles, mostrar en un solo renglón
-  return minutes.join(', ')
-})
-
-// Funciones computadas para validar y obtener las tarjetas
-const homeRedCardsCount = computed(() => {
-  const redCardsArray = props.report?.game?.minutes?.home_red_cards_minutes
-  return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
-})
-
-const homeYellowCardsCount = computed(() => {
-  const yellowCardsArray = props.report?.game?.minutes?.home_yellow_cards_minutes
-  return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
-    ? yellowCardsArray.length
-    : null
-})
-
-const awayYellowCardsCount = computed(() => {
-  const yellowCardsArray = props.report?.game?.minutes?.away_yellow_cards_minutes
-  return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
-    ? yellowCardsArray.length
-    : null
-})
-
-const awayRedCardsCount = computed(() => {
-  const redCardsArray = props.report?.game?.minutes?.away_red_cards_minutes
-  return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
-})
-</script>
-
-<style scoped>
-.prematch-bg {
-  width: 100%;
-  height: 222px;
-  /* height: 100vh; */
-  background: url('/images/background-postmatch-template-02.jpg');
-  background-size: cover;
-  background-repeat: no-repeat;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.background-shields {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.shield-left {
-  position: absolute;
-  left: -80px;
-  top: 50%;
-  transform: translateY(-50%);
-  opacity: 0.09;
-}
-
-.shield-left img {
-  width: 170px;
-  object-fit: contain;
-}
-
-.shield-right {
-  position: absolute;
-  right: -80px;
-  top: 50%;
-  transform: translateY(-50%);
-  opacity: 0.09;
-}
-
-.shield-right img {
-  width: 170px;
-  object-fit: contain;
-}
-
-.header {
-  padding: 24px 32px;
-}
-
-.logo {
-  height: 40px;
-}
-
-.main-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* Elimina el margin-top para centrar verticalmente */
-}
-
-.title {
-  font-size: 0.8rem;
-  color: #fff;
-  margin-top: 13px;
-  font-family: Poppins-Regular;
-  position: relative;
-  z-index: 2;
-}
-
-.highlight {
-  font-family: Poppins-Bold;
-  color: #fff;
-}
-
-.subtitle {
-  font-family: Poppins-Regular;
-  margin-top: -8px;
-  font-size: 1.1rem;
-  color: #e0e0e0;
-  position: relative;
-  z-index: 2;
-}
-
-.jornada {
-  font-family: Poppins-Medium;
-  color: #fff;
-  font-size: 0.4rem;
-  line-height: 2.2;
-  letter-spacing: 0.2px;
-  opacity: 0.8;
-}
-
-.fecha {
-  font-family: Poppins-Regular;
-  color: #e0e0e0;
-  opacity: 0.8;
-  line-height: 2.2;
-  letter-spacing: 0.2px;
-  font-size: 0.4rem;
-}
-
-.teams-row {
-  display: none;
-}
-
-.teams-grid {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-top: 14px;
-  position: relative;
-  z-index: 2;
-}
-.row {
-  display: flex;
-  width: 100%;
-  gap: 20px;
-  justify-content: center;
-  align-items: center;
-}
-.row-top {
-  margin-bottom: 0px;
-}
-.row-bottom {
-  margin-top: 0;
-}
-.team {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.score {
-  margin: 0 24px;
-}
-.team-stats {
-  width: auto;
-  background: black;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1px;
-  padding: 0.5px 2px;
-  border-radius: 2px;
-  background-color: rgba(21, 34, 46, 0.18);
-}
-
-.team-stats .stat.ball svg {
-  width: 9px !important;
-  height: 9px !important;
-}
-
-.team-stats .stat.yellow svg,
-.team-stats .stat.red svg {
-  width: 7px !important;
-  height: 7px !important;
-}
-
-.stat-number,
-.stat.time {
-  font-size: 0.4rem;
-  margin-left: 0.5px;
-  font-family: Poppins-Medium;
-  color: #fff;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-  letter-spacing: -0.2px;
-  font-weight: 600;
-}
-
-.stat.yellow svg rect {
-  stroke: #ffd600;
-  filter: drop-shadow(0 1px 2px #bfa60055);
-}
-
-.stat.red svg rect {
-  stroke: #ff2222;
-  filter: drop-shadow(0 1px 2px #a8000055);
-}
-
-.empty {
-  width: 60px;
-}
-
-.team-local-block,
-.team-visitor-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.escudo-svg {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 55px;
-  height: 55px;
-}
-
-.team-name {
-  font-size: 0.8rem;
-  font-family: Poppins-bold;
-  font-weight: 700;
-  color: #fff;
-  letter-spacing: 2px;
-}
-
-.score {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 0px;
-}
-
-.score-text {
-  font-size: 3rem;
-  font-family: BebasNeue-Bold;
-  font-weight: 700;
-  color: #fff;
-  margin-top: 5px;
-  letter-spacing: 1px;
-}
-
-.team-stats {
-  display: flex;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.stat {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.5rem;
-  color: #fff;
-}
-
-.stat-number {
-  margin-left: 1px;
-  font-size: 0.5rem;
-  font-family: Poppins-Regular;
-  color: #fff;
-}
-
-.stat.yellow svg {
-  margin-right: 1px;
-}
-
-.stat.red svg {
-  margin-right: 1px;
-}
-
-.stat.time {
-  font-size: 0.5rem;
-  font-family: Poppins-Regular;
-  color: #fff;
-  margin: 0 2px;
-  white-space: pre-line;
-  text-align: center;
-  line-height: 1.2;
-}
-
-.stat.time.two-lines {
-  margin-top: 12px;
-  text-align: left;
-}
-
-.team-stats .stat-number {
-  font-size: 0.5rem;
-  font-family: Poppins-Regular;
-  color: #fff;
-  margin: 0 1px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-  letter-spacing: -0.2px;
-  font-weight: 600;
-}
-
-.stat.ball svg {
-  display: block;
-}
-
-.separator {
-  width: 1px;
-  height: 12px;
-  border-right: 1px dotted #fff;
-  margin: 0 4px 0 4px;
-}
-
-.separator.two-lines {
-  height: 18px;
-  margin-top: 10px;
-}
-</style>
+<template>
+  <div class="prematch-bg">
+    <!-- Escudos de fondo -->
+    <div class="background-shields">
+      <div class="shield-left">
+        <img
+          :src="
+            'https://golstatsimages.blob.core.windows.net/teams-150/' +
+            report.game.home_team +
+            '.png'
+          "
+          alt="Escudo local"
+        />
+      </div>
+      <div class="shield-right">
+        <img
+          :src="
+            'https://golstatsimages.blob.core.windows.net/teams-150/' +
+            report.game.visiting_team +
+            '.png'
+          "
+          alt="Escudo visitante"
+        />
+      </div>
+    </div>
+
+    <div class="title">Análisis <span class="highlight">Postmatch</span></div>
+    <div class="subtitle">
+      <span class="jornada">Jornada {{ traducirJornada(report.game.matchday_name) }}</span>
+      <span class="fecha"> - {{ formatDate(report.game.date_time_utc) }}</span>
+    </div>
+    <div class="teams-grid">
+      <div class="row row-top">
+        <div class="team team-local">
+          <span class="escudo-svg">
+            <img
+              width="55px"
+              :src="
+                'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                report.game.home_team +
+                '.png'
+              "
+            />
+          </span>
+          <span class="team-name">{{ report.game.home_team_acronym }}</span>
+        </div>
+        <div class="score">
+          <span class="score-text">{{ report.game.score[0] }}:{{ report.game.score[1] }}</span>
+        </div>
+        <div class="team team-visitor">
+          <span class="team-name">{{ report.game.visiting_team_acronym }}</span>
+          <span class="escudo-svg">
+            <img
+              width="55px"
+              :src="
+                'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                report.game.visiting_team +
+                '.png'
+              "
+            />
+          </span>
+        </div>
+      </div>
+      <div class="row row-bottom">
+        <div class="team-stats">
+          <span class="stat ball">
+            <svg
+              width="19"
+              height="19"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.0456 4.54688V6.92693"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M13.2109 9.32248L15.1681 8.27344"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M11.9961 12.9609L13.2064 14.3086"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M8.08198 12.9609L6.87109 14.3099"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.91797 8.27344L6.87609 9.22818"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+          <span
+            class="stat time"
+            :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
+            v-if="homeGoalsMinutes !== null"
+            >{{ homeGoalsMinutes }}</span
+          >
+          <div
+            class="separator"
+            :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
+          ></div>
+          <span class="stat red">
+            <svg
+              width="12"
+              height="16"
+              viewBox="0 0 14 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
+            </svg>
+            <span class="stat-number">{{ homeRedCardsCount || 0 }}</span>
+          </span>
+          <span class="stat yellow">
+            <svg
+              width="12"
+              height="16"
+              viewBox="0 0 14 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
+            </svg>
+            <span class="stat-number">{{ homeYellowCardsCount || 0 }}</span>
+          </span>
+        </div>
+        <div class="empty"></div>
+        <div class="team-stats">
+          <span class="stat-number">{{ awayYellowCardsCount || 0 }}</span>
+          <span class="stat yellow">
+            <svg
+              width="12"
+              height="16"
+              viewBox="0 0 14 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
+            </svg>
+          </span>
+          <span class="stat-number">{{ awayRedCardsCount || 0 }}</span>
+          <span class="stat red">
+            <svg
+              width="12"
+              height="16"
+              viewBox="0 0 14 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
+            </svg>
+          </span>
+          <div
+            class="separator"
+            :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
+          ></div>
+          <span
+            class="stat time"
+            :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
+            v-if="visitingGoalsMinutes !== null"
+            >{{ visitingGoalsMinutes }}</span
+          >
+          <span class="stat ball">
+            <svg
+              width="19"
+              height="19"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.0456 4.54688V6.92693"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M13.2109 9.32248L15.1681 8.27344"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M11.9961 12.9609L13.2064 14.3086"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M8.08198 12.9609L6.87109 14.3099"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.91797 8.27344L6.87609 9.22818"
+                stroke="white"
+                stroke-width="1.36665"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from '../../utils/dateUtils.js'
+import { computed } from 'vue'
+
+function traducirJornada(jornada) {
+  if (!jornada) return ''
+  return jornada
+    .replace('Matchday', 'J')
+    .replace('de Final', '')
+    .replace('Playoffs 1', 'CFI')
+    .replace('Playoffs 2', 'CFV')
+    .replace('Playoffs 3', 'SI')
+    .replace('Playoffs 4', 'SV')
+    .replace('Playoffs 5', 'FI')
+    .replace('Playoffs 6', 'FV')
+}
+// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
+const props = defineProps({
+  report: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+// Función computada para extraer y concatenar solo los minutos de los goles
+const homeGoalsMinutes = computed(() => {
+  const goalsArray = props.report?.game?.minutes?.home_goals_minutes
+
+  if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
+    return null
+  }
+
+  // Extraer solo los minutos de cada string
+  const minutes = goalsArray
+    .map((goal) => {
+      // Buscar el patrón de minutos al final del string (números seguidos de ')
+      const match = goal.match(/(\d+)'$/)
+      return match ? match[1] + "'" : ''
+    })
+    .filter((minute) => minute !== '')
+
+  // Si hay más de 5 goles, dividir en 2 renglones
+  if (minutes.length > 5) {
+    const firstRow = minutes.slice(0, 5).join(', ')
+    const secondRow = minutes.slice(5).join(', ')
+    return `${firstRow}\n${secondRow}`
+  }
+
+  // Si hay 5 o menos goles, mostrar en un solo renglón
+  return minutes.join(', ')
+})
+
+// Función computada para extraer y concatenar solo los minutos de los goles del equipo visitante
+const visitingGoalsMinutes = computed(() => {
+  const goalsArray = props.report?.game?.minutes?.visiting_goals_minutes
+
+  if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
+    return null
+  }
+
+  // Extraer solo los minutos de cada string
+  const minutes = goalsArray
+    .map((goal) => {
+      // Buscar el patrón de minutos al final del string (números seguidos de ')
+      const match = goal.match(/(\d+)'$/)
+      return match ? match[1] + "'" : ''
+    })
+    .filter((minute) => minute !== '')
+
+  // Si hay más de 5 goles, dividir en 2 renglones
+  if (minutes.length > 5) {
+    const firstRow = minutes.slice(0, 5).join(', ')
+    const secondRow = minutes.slice(5).join(', ')
+    return `${firstRow}\n${secondRow}`
+  }
+
+  // Si hay 5 o menos goles, mostrar en un solo renglón
+  return minutes.join(', ')
+})
+
+// Funciones computadas para validar y obtener las tarjetas
+const homeRedCardsCount = computed(() => {
+  const redCardsArray = props.report?.game?.minutes?.home_red_cards_minutes
+  return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
+})
+
+const homeYellowCardsCount = computed(() => {
+  const yellowCardsArray = props.report?.game?.minutes?.home_yellow_cards_minutes
+  return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
+    ? yellowCardsArray.length
+    : null
+})
+
+const awayYellowCardsCount = computed(() => {
+  const yellowCardsArray = props.report?.game?.minutes?.away_yellow_cards_minutes
+  return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
+    ? yellowCardsArray.length
+    : null
+})
+
+const awayRedCardsCount = computed(() => {
+  const redCardsArray = props.report?.game?.minutes?.away_red_cards_minutes
+  return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
+})
+</script>
+
+<style scoped>
+.prematch-bg {
+  width: 100%;
+  height: 222px;
+  /* height: 100vh; */
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-02.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-shields {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.shield-left {
+  position: absolute;
+  left: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.09;
+}
+
+.shield-left img {
+  width: 170px;
+  object-fit: contain;
+}
+
+.shield-right {
+  position: absolute;
+  right: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.09;
+}
+
+.shield-right img {
+  width: 170px;
+  object-fit: contain;
+}
+
+.header {
+  padding: 24px 32px;
+}
+
+.logo {
+  height: 40px;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Elimina el margin-top para centrar verticalmente */
+}
+
+.title {
+  font-size: 0.8rem;
+  color: #fff;
+  margin-top: 13px;
+  font-family: Poppins-Regular;
+  position: relative;
+  z-index: 2;
+}
+
+.highlight {
+  font-family: Poppins-Bold;
+  color: #fff;
+}
+
+.subtitle {
+  font-family: Poppins-Regular;
+  margin-top: -8px;
+  font-size: 1.1rem;
+  color: #e0e0e0;
+  position: relative;
+  z-index: 2;
+}
+
+.jornada {
+  font-family: Poppins-Medium;
+  color: #fff;
+  font-size: 0.4rem;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  opacity: 0.8;
+}
+
+.fecha {
+  font-family: Poppins-Regular;
+  color: #e0e0e0;
+  opacity: 0.8;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  font-size: 0.4rem;
+}
+
+.teams-row {
+  display: none;
+}
+
+.teams-grid {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 14px;
+  position: relative;
+  z-index: 2;
+}
+.row {
+  display: flex;
+  width: 100%;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+}
+.row-top {
+  margin-bottom: 0px;
+}
+.row-bottom {
+  margin-top: 0;
+}
+.team {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.score {
+  margin: 0 24px;
+}
+.team-stats {
+  width: auto;
+  background: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  padding: 0.5px 2px;
+  border-radius: 2px;
+  background-color: rgba(21, 34, 46, 0.18);
+}
+
+.team-stats .stat.ball svg {
+  width: 9px !important;
+  height: 9px !important;
+}
+
+.team-stats .stat.yellow svg,
+.team-stats .stat.red svg {
+  width: 7px !important;
+  height: 7px !important;
+}
+
+.stat-number,
+.stat.time {
+  font-size: 0.4rem;
+  margin-left: 0.5px;
+  font-family: Poppins-Medium;
+  color: #fff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  letter-spacing: -0.2px;
+  font-weight: 600;
+}
+
+.stat.yellow svg rect {
+  stroke: #ffd600;
+  filter: drop-shadow(0 1px 2px #bfa60055);
+}
+
+.stat.red svg rect {
+  stroke: #ff2222;
+  filter: drop-shadow(0 1px 2px #a8000055);
+}
+
+.empty {
+  width: 60px;
+}
+
+.team-local-block,
+.team-visitor-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.escudo-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+}
+
+.team-name {
+  font-size: 0.8rem;
+  font-family: Poppins-bold;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 2px;
+}
+
+.score {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0px;
+}
+
+.score-text {
+  font-size: 3rem;
+  font-family: BebasNeue-Bold;
+  font-weight: 700;
+  color: #fff;
+  margin-top: 5px;
+  letter-spacing: 1px;
+}
+
+.team-stats {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.5rem;
+  color: #fff;
+}
+
+.stat-number {
+  margin-left: 1px;
+  font-size: 0.5rem;
+  font-family: Poppins-Regular;
+  color: #fff;
+}
+
+.stat.yellow svg {
+  margin-right: 1px;
+}
+
+.stat.red svg {
+  margin-right: 1px;
+}
+
+.stat.time {
+  font-size: 0.5rem;
+  font-family: Poppins-Regular;
+  color: #fff;
+  margin: 0 2px;
+  white-space: pre-line;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.stat.time.two-lines {
+  margin-top: 12px;
+  text-align: left;
+}
+
+.team-stats .stat-number {
+  font-size: 0.5rem;
+  font-family: Poppins-Regular;
+  color: #fff;
+  margin: 0 1px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  letter-spacing: -0.2px;
+  font-weight: 600;
+}
+
+.stat.ball svg {
+  display: block;
+}
+
+.separator {
+  width: 1px;
+  height: 12px;
+  border-right: 1px dotted #fff;
+  margin: 0 4px 0 4px;
+}
+
+.separator.two-lines {
+  height: 18px;
+  margin-top: 10px;
+}
+</style>