<commit_before><template>
  <div
    class="grid"
    :class="{ 'border-green-500': completed, 'grid-cols-[3rem,auto]': enableChecklist }"
  >
    <label
      v-if="enableChecklist"
      class="cursor-pointer flex rounded-l h-full border border-r-0 border-gray-300 hover:bg-gray-200 items-center justify-center"
      :class="{
        'bg-green-500': completed,
        'border-green-500': completed,
        'hover:bg-green-300': completed,
        'bg-green-300': loading
      }"
      aria-label="Completed Trick"
    >
      <icon-loading class="text-white animate-spin" v-if="loading" />
      <icon-check class="text-white" v-else />
      <input
        @click="completeTrick(!completed)"
        type="checkbox"
        class="hidden"
        :checked="completed"
        :disabled="!enableChecklist || loading"
      >
    </label>
    <router-link
      class="flex rounded-r border border-gray-300 p-2 items-center justify-center text-center hover:bg-gray-200"
      :class="{
        'border-green-500': completed,
        'rounded-l': !enableChecklist
        }"
      :to="`/trick/${discipline}/${trick.slug}`"
      @click="$emit('navigate')"
    >
      {{ trick.localised?.name ?? trick.en?.name }}
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, toRef } from 'vue'

import { disciplineToSlug } from "../helpers";

import IconCheck from 'virtual:vite-icons/mdi/check'
import IconLoading from 'virtual:vite-icons/mdi/loading'

import type { PropType } from 'vue'
import type { TricksQuery } from '../graphql/generated/graphql'
import useCompleteTrick from '../hooks/useCompleteTrick';

const props = defineProps({
  trick: {
    type: Object as PropType<TricksQuery['tricks'][number]>,
    required: true
  },<commit_msg>Properly center trick title even when checkboxes are displayed<commit_after><template>
  <div
    class="grid"
    :class="{ 'border-green-500': completed, 'grid-cols-[3rem,auto]': enableChecklist }"
  >
    <label
      v-if="enableChecklist"
      class="cursor-pointer flex rounded-l h-full border border-r-0 border-gray-300 hover:bg-gray-200 items-center justify-center"
      :class="{
        'bg-green-500': completed,
        'border-green-500': completed,
        'hover:bg-green-300': completed,
        'bg-green-300': loading
      }"
      aria-label="Completed Trick"
    >
      <icon-loading class="text-white animate-spin" v-if="loading" />
      <icon-check class="text-white" v-else />
      <input
        @click="completeTrick(!completed)"
        type="checkbox"
        class="hidden"
        :checked="completed"
        :disabled="!enableChecklist || loading"
      >
    </label>
    <router-link
      class="flex rounded-r border border-gray-300 p-2 items-center justify-center text-center hover:bg-gray-200"
      :class="{
        'border-green-500': completed,
        'rounded-l': !enableChecklist,
        'pr-[3rem]': enableChecklist
        }"
      :to="`/trick/${discipline}/${trick.slug}`"
      @click="$emit('navigate')"
    >
      {{ trick.localised?.name ?? trick.en?.name }}
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, toRef } from 'vue'

import { disciplineToSlug } from "../helpers";

import IconCheck from 'virtual:vite-icons/mdi/check'
import IconLoading from 'virtual:vite-icons/mdi/loading'

import type { PropType } from 'vue'
import type { TricksQuery } from '../graphql/generated/graphql'
import useCompleteTrick from '../hooks/useCompleteTrick';

const props = defineProps({
  trick: {
    type: Object as PropType<TricksQuery['tricks'][number]>,
    required: true
  },
{'fraction_non_alphanumeric': 0.15769335884121344, 'fraction_numerical': 0.01831101393823449, 'mean_word_length': 2.9869281045751634, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '787159', 'n_tokens_mistral': 1206, 'n_tokens_neox': 1156, 'n_words': 236}