{"version":3,"file":"CourseCard-021334fb.js","sources":["../../components/ui/molecules/CourseCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { router } from \"@inertiajs/vue3\";\nimport { defineProps } from \"vue\";\n\nimport ProgressBar from \"@/components/explorer/ProgressBar.vue\";\nimport Block from \"@/components/ui/atoms/Block.vue\";\nimport Btn from \"@/components/ui/atoms/Btn.vue\";\nimport PillContainer from \"@/components/ui/atoms/PillContainer.vue\";\nimport type {\n  Course,\n  Enrollment,\n  Masterclass,\n  Project,\n  Subject,\n  StudentNotification,\n} from \"@/shared/explorerTypes\";\nimport type { User } from \"@/shared/types\";\nimport { resolveUrl } from \"@/utils/urls\";\n\ninterface Props {\n  course: Course | Project | Masterclass | Subject;\n  enrollment?: Enrollment;\n  studentNotifications?: StudentNotification[];\n  user?: User;\n  light?: boolean;\n  isFeatured?: boolean;\n  noBlocks?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  light: false,\n  isFeatured: false,\n  noBlocks: false,\n});\n\nconst countNotifications = (course: Course | Project | Masterclass | Subject) => {\n  if (props.studentNotifications) {\n    return props.studentNotifications.filter(\n      (notification) => notification.subject_id === course.id,\n    ).length;\n  }\n  return 0;\n};\n\nconst navigateToCourse = (course: Course | Project | Masterclass | Subject) => {\n  const user = props.user;\n\n  if (!user) {\n    window.location.href = resolveUrl(\"course_show\", course.slug);\n  } else if (\n    user?.is_content_access === true ||\n    (Array.isArray(user?.owner_contents) &&\n      user.owner_contents.length > 0 &&\n      user.owner_contents.indexOf(course.id) !== -1)\n  ) {\n    router.get(resolveUrl(\"player_explorer\", course.slug));\n  } else if (user && course.type !== \"project\") {\n    window.location.href = resolveUrl(\"course_explorer_show\", course.slug);\n  }\n};\n\nconst goToCourse = (slug: string) => {\n  window.location.href = resolveUrl(\"course_explorer_show\", slug);\n};\n\nconst dictSubject = {\n  course: \"curso\",\n  project: \"proyecto\",\n  masterclass: \"masterclass\",\n};\n</script>\n\n<template>\n  <Block\n    theme=\"smoke\"\n    tag=\"article\"\n    @click=\"navigateToCourse(course)\"\n    :class=\"[\n      'subject-card',\n      { 'subject-card--light': light },\n      { 'subject-card--featured': isFeatured },\n      { 'subject-card--no-blocks': noBlocks },\n      // { 'subject-card--no-owner': user?.owner_contents.indexOf(course.id) === -1 },\n    ]\"\n  >\n    <div class=\"subject-card__notification\" v-if=\"countNotifications(course) > 0\">\n      {{ countNotifications(course) }}\n    </div>\n    <div class=\"subject-card__details\">\n      <Block\n        class=\"subject-card__details__img clear\"\n        :style=\"`${\n          course.poster_image ? 'background-image: url(' + course.poster_image + ')' : ''\n        }`\"\n      />\n      <Block class=\"subject-card__details__info\" theme=\"clear\">\n        <div class=\"subject-card__details__info__title-action\">\n          <h2 class=\"no-margins size-xl\">\n            {{ course.name }}\n          </h2>\n          <PillContainer\n            no-padding\n            class=\"subject-card__details__info__action\"\n            v-if=\"!light\"\n          >\n            <Btn\n              class=\"sizeless btn-icon explorer-accent\"\n              shape=\"round\"\n              theme=\"active-bold\"\n              tag=\"button\"\n              v-if=\"\n                user?.is_content_access ||\n                (user?.owner_contents?.length > 0 &&\n                  user?.owner_contents?.indexOf(course.id) !== -1)\n              \"\n            >\n              <span v-if=\"enrollment?.progress > 0\">Continuar</span>\n              <span v-else>Iniciar {{ dictSubject[course.type] }}</span>\n              <i class=\"icon icon--black-arrow icon--width-2x\" />\n            </Btn>\n            <Btn\n              @click.stop=\"() => router.get(resolveUrl('explorer_pricing'))\"\n              class=\"sizeless btn-icon explorer-accent\"\n              shape=\"round\"\n              theme=\"active-bold\"\n              tag=\"button\"\n              v-else\n            >\n              <span>Suscríbete</span>\n              <i class=\"icon icon--black-arrow icon--width-2x\" />\n            </Btn>\n            <Btn\n              v-if=\"course.type !== 'project'\"\n              class=\"sizeless btn-icon\"\n              shape=\"round\"\n              theme=\"dark-wireframe\"\n              tag=\"button\"\n              @click.stop=\"goToCourse(course.slug)\"\n            >\n              <span>Más detalles</span>\n            </Btn>\n          </PillContainer>\n        </div>\n\n        <div class=\"subject-card__details__info__instructor\" v-if=\"noBlocks\">\n          <span class=\"size-s\">Por {{ course.instructor }}</span>\n        </div>\n\n        <div class=\"progress-info\" v-if=\"!light && enrollment\">\n          <p\n            v-if=\"enrollment.progress !== 0 && enrollment.progress !== 100\"\n            class=\"no-margin-bottom size-s\"\n          >\n            Progreso: {{ enrollment.progress }}%\n          </p>\n          <p\n            v-if=\"enrollment.progress == 100 && enrollment.challenge_completed\"\n            class=\"no-margin-bottom size-s\"\n          >\n            ¡Completado!\n          </p>\n          <p\n            v-if=\"\n              enrollment.progress == 100 &&\n              !enrollment.challenge_completed &&\n              course.type === 'course'\n            \"\n            class=\"no-margin-bottom size-s warning-text\"\n          >\n            ¡Reto sin completar!\n          </p>\n          <ProgressBar :progress=\"enrollment.progress\" />\n        </div>\n      </Block>\n    </div>\n    <div class=\"subject-card__blocks\" v-if=\"!noBlocks\">\n      <Block\n        theme=\"off-white\"\n        shape=\"square\"\n        :class=\"['subject-card__blocks__item', 'first']\"\n      >\n        <span class=\"subject-card__blocks__item__title size-xs no-margins\">\n          TIEMPO ESTIMADO\n        </span>\n        <h3 class=\"subject-card__blocks__item__value no-margins\">\n          {{ course.estimated_time }} horas\n        </h3>\n      </Block>\n      <Block theme=\"off-white\" shape=\"square\" :class=\"['subject-card__blocks__item']\">\n        <span class=\"subject-card__blocks__item__title size-xs no-margins\">NIVEL</span>\n        <h3 class=\"subject-card__blocks__item__value no-margins\">\n          {{ course.level_text }}\n        </h3>\n      </Block>\n      <Block theme=\"off-white\" shape=\"square\" :class=\"['subject-card__blocks__item']\">\n        <span class=\"subject-card__blocks__item__title size-xs no-margins\">\n          INSTRUCTOR\n        </span>\n        <h3 class=\"subject-card__blocks__item__value no-margins\">\n          {{ course.instructor }}\n        </h3>\n      </Block>\n    </div>\n  </Block>\n</template>\n\n<style lang=\"scss\" scoped>\n@use \"@/styles/settings/vars\";\n\nh2 {\n  span {\n    display: inline;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n\n  button {\n    display: inline;\n    margin-left: 8px;\n    vertical-align: middle;\n  }\n}\n\n.subject-card:hover {\n  background: vars.$dust;\n  transition: background 0.2s ease-in;\n}\n\n.subject-card {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  padding: 1em;\n  min-width: 600px;\n  max-width: 800px;\n  justify-content: space-between;\n  cursor: pointer;\n  transition: background 0.2s ease-in;\n\n  .explorer-accent {\n    border: 1px solid var(--accent-bg);\n  }\n\n  .warning-text {\n    display: flex;\n    align-items: center;\n    gap: 0.5em;\n  }\n\n  &__notification {\n    position: absolute;\n    top: -13px;\n    right: -13px;\n    width: 26px;\n    height: 26px;\n    background: var(--accent-bg);\n    color: var(--text-color);\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 14px;\n    font-weight: bold;\n  }\n\n  p {\n    color: vars.$off-black;\n  }\n\n  &__details {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 1em;\n    margin-bottom: 0.75em;\n    height: 100%;\n\n    > div {\n      width: 100%;\n    }\n\n    .pill-container {\n      padding: 0;\n    }\n\n    &__img {\n      aspect-ratio: 1/1;\n      width: 100%;\n      object-fit: cover;\n      background-size: cover;\n      border-radius: 0.5em;\n      background-image: url(\"@img/default_course_banner.webp\");\n      max-height: 160px;\n      position: relative;\n    }\n\n    h2 {\n      color: vars.$off-black;\n    }\n\n    &__info {\n      grid-column: 2 / 4;\n      display: flex;\n      width: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n      border-radius: 0;\n\n      &__instructor {\n        text-transform: uppercase;\n      }\n\n      &__action {\n        margin-top: 0.5em;\n        gap: 0.5em;\n      }\n    }\n  }\n\n  &__blocks {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 1em;\n\n    &__item {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 0.75em;\n      gap: 1em;\n      border-radius: 0.5em;\n    }\n\n    span {\n      color: vars.$off-black;\n      padding: 0;\n    }\n\n    h3 {\n      text-transform: uppercase;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .block {\n      flex: 1;\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media (min-width: 601px) and (max-width: 800px) {\n  article.block {\n    .subject-card__details {\n      &__img {\n        aspect-ratio: auto;\n      }\n    }\n  }\n\n  .block {\n    .cluster-info__video-div {\n      max-width: none;\n    }\n  }\n  .subjects-container {\n    article {\n      min-width: 0;\n\n      .subject-card__details {\n        max-height: 400px;\n        display: grid;\n        grid-template-rows: 3fr 1fr;\n        grid-template-columns: auto;\n      }\n    }\n  }\n}\n\n@media (width > 601px) {\n  .subject-card--light .subject-card__details__img {\n    max-height: 140px;\n  }\n\n  .subject-card--no-blocks .subject-card__details {\n    margin-bottom: 0;\n  }\n\n  .subject-card--no-blocks .block {\n    margin-bottom: 0;\n  }\n}\n\n@media (width < 600px) {\n  .subject-card {\n    min-width: 85%;\n    max-width: 85%;\n    padding: 0.5em;\n\n    &__notification {\n      top: -13px;\n      right: -6px;\n      z-index: 9;\n    }\n\n    &__details {\n      display: grid;\n      grid-template-columns: 1fr;\n      grid-template-rows: auto 1fr;\n      gap: 0.5em;\n      align-items: start;\n\n      h2 {\n        font-size: 20px;\n        line-height: 24px;\n      }\n\n      &__img {\n        width: 100%;\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        border-radius: 0.75em;\n        margin-bottom: 0;\n      }\n\n      &__info {\n        grid-column: 1;\n        padding: 0;\n        height: 100%;\n\n        &__title-action {\n          display: flex;\n          flex-direction: column;\n        }\n\n        h2 {\n          order: 1;\n        }\n\n        &__action {\n          order: 0;\n          margin-top: 0;\n        }\n      }\n\n      .progress-info {\n        p {\n          margin-top: 0;\n        }\n      }\n\n      :has(.progress-info) {\n        .subject-card__details__info__title-action {\n          h2 {\n            margin-top: 1em;\n          }\n        }\n      }\n    }\n  }\n\n  .subject-card__blocks {\n    display: grid;\n    grid-auto-rows: 1fr;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 0.25em;\n\n    &__item {\n      padding: 0.5em;\n      gap: 0.5em;\n\n      h3 {\n        text-wrap: inherit;\n        font-size: 13px;\n        line-height: 17px;\n      }\n    }\n  }\n}\n\n@media (width > 601px) {\n  .subject-card--featured .subject-card__details {\n    display: grid;\n    grid-template-columns: 1fr;\n    grid-template-rows: auto 1fr;\n    gap: 1em;\n    align-items: start;\n\n    &__img {\n      width: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      border-radius: 0.75em;\n      margin-bottom: 0;\n      max-height: none;\n    }\n\n    &__info {\n      grid-column: 1;\n      padding: 0;\n      height: 100%;\n\n      &__title-action {\n        display: flex;\n        flex-direction: column;\n      }\n\n      h2 {\n        order: 1;\n      }\n\n      &__action {\n        display: none;\n      }\n    }\n  }\n}\n\n.subject-card--project {\n  background-color: vars.$off-black;\n\n  &:hover {\n    background-color: vars.$storm;\n  }\n\n  .subject-card__details__info__title-action h2 {\n    color: vars.$off-white;\n  }\n}\n\n.subject-card--no-owner:hover {\n  background-color: vars.$smoke;\n}\n</style>\n"],"names":["props","__props","countNotifications","course","notification","navigateToCourse","user","router","resolveUrl","goToCourse","slug","dictSubject"],"mappings":"6zDA6BA,MAAMA,EAAQC,EAMRC,EAAsBC,GACtBH,EAAM,qBACDA,EAAM,qBAAqB,OAC/BI,GAAiBA,EAAa,aAAeD,EAAO,EACrD,EAAA,OAEG,EAGHE,EAAoBF,GAAqD,CAC7E,MAAMG,EAAON,EAAM,KAEdM,EAGHA,GAAM,oBAAsB,IAC3B,MAAM,QAAQA,GAAM,cAAc,GACjCA,EAAK,eAAe,OAAS,GAC7BA,EAAK,eAAe,QAAQH,EAAO,EAAE,IAAM,GAE7CI,EAAO,IAAIC,EAAW,kBAAmBL,EAAO,IAAI,CAAC,EAC5CG,GAAQH,EAAO,OAAS,YACjC,OAAO,SAAS,KAAOK,EAAW,uBAAwBL,EAAO,IAAI,GATrE,OAAO,SAAS,KAAOK,EAAW,cAAeL,EAAO,IAAI,CAU9D,EAGIM,EAAcC,GAAiB,CACnC,OAAO,SAAS,KAAOF,EAAW,uBAAwBE,CAAI,CAAA,EAG1DC,EAAc,CAClB,OAAQ,QACR,QAAS,WACT,YAAa,aAAA"}