<commit_before><template>
  <div class="records-card">
    <Card>
      <template #title>
        <SportImage :sport-label="records.label" :color="records.color" />
        {{ sportTranslatedLabel }}
      </template>
      <template #content>
        <div class="record" v-for="record in records.records" :key="record.id">
          <span class="record-type">
            {{ $t(`workouts.RECORD_${record.record_type}`) }}
          </span>
          <span class="record-value">{{ record.value }}</span>
          <span class="record-date">
            <router-link
              :to="{
                name: 'Workout',
                params: { workoutId: record.workout_id },
              }"
            >
              {{ record.workout_date }}
            </router-link>
          </span>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue'

  import { IRecordsBySports } from '@/types/workouts'

  interface Props {
    records: IRecordsBySports
    sportTranslatedLabel: string
  }
  const props = defineProps<Props>()

  const { records, sportTranslatedLabel } = toRefs(props)
</script>

<style lang="scss" scoped>
  @import '~@/scss/vars.scss';

  .records-card {
    width: 100%;
    padding-bottom: $default-padding * 0.3;

    ::v-deep(.card) {
      font-size: 0.9em;
      .card-title {
        display: flex;
        font-size: 0.9em;
        .sport-img {
          padding-right: $default-padding;
          height: 20px;
          width: 20px;
        }
      }
      .card-content {
        font-size: 0.9em;
        padding: $default-padding;
        .record {
          display: flex;
          justify-content: space-between;
          span {
            padding: 2px 5px;
          }
          .record-type {
            flex-grow: 1;
          }
          .record-value {
            font-weight: bold;
            padding-right: $default-padding * 2;
          }
        }
      }
      @media screen and (max-width: $medium-limit) {
        font-size: 1em;
        .card-title {<commit_msg>Client - fix record card style<commit_after><template>
  <div class="records-card">
    <Card>
      <template #title>
        <SportImage :sport-label="records.label" :color="records.color" />
        {{ sportTranslatedLabel }}
      </template>
      <template #content>
        <div class="record" v-for="record in records.records" :key="record.id">
          <span class="record-type">
            {{ $t(`workouts.RECORD_${record.record_type}`) }}
          </span>
          <span class="record-value">{{ record.value }}</span>
          <span class="record-date">
            <router-link
              :to="{
                name: 'Workout',
                params: { workoutId: record.workout_id },
              }"
            >
              {{ record.workout_date }}
            </router-link>
          </span>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue'

  import { IRecordsBySports } from '@/types/workouts'

  interface Props {
    records: IRecordsBySports
    sportTranslatedLabel: string
  }
  const props = defineProps<Props>()

  const { records, sportTranslatedLabel } = toRefs(props)
</script>

<style lang="scss" scoped>
  @import '~@/scss/vars.scss';

  .records-card {
    width: 100%;
    padding-bottom: $default-padding * 0.3;

    ::v-deep(.card) {
      font-size: 0.9em;
      .card-title {
        display: flex;
        font-size: 0.9em;
        .sport-img {
          padding-right: $default-padding;
          height: 20px;
          width: 20px;
        }
      }
      .card-content {
        font-size: 0.9em;
        padding: $default-padding;
        .record {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          span {
            padding: 2px 5px;
          }
          .record-type {
            flex-grow: 1;
          }
          .record-value {
            font-weight: bold;
            white-space: nowrap;
            padding-right: $default-padding * 2;
          }
        }
      }
      @media screen and (max-width: $medium-limit) {
        font-size: 1em;
        .card-title {
{'fraction_non_alphanumeric': 0.14195064629847237, 'fraction_numerical': 0.009400705052878966, 'mean_word_length': 1.6174661746617467, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3634573', 'n_tokens_mistral': 1363, 'n_tokens_neox': 1302, 'n_words': 260}