%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/forge/takeaseat.eco-n-tech.co.uk/components/partials/
Upload File :
Create Path :
Current File : //home/forge/takeaseat.eco-n-tech.co.uk/components/partials/Therapist.vue

<template>
  <section class="grid grid-cols-3 sm:grid-cols-6 bg-white border border-gray therapist-list-item">
    <div class="col-span-1 sm:col-span-2 relative mb-0">
      <NuxtLink class="absolute top-0 left-0 w-full h-full z-10"
        :to="'/therapists/'+therapist.slug"></NuxtLink>
      <div :class="'tas-border-'+therapist.colour"
        class="absolute top-0 left-0 w-full h-full border-10 border-opacity-75"></div>
      <img class="block m-0 w-full"
        :src="therapist.user.photo_url"
        :alt="therapist.user.first_name+' '+therapist.user.last_name" />
    </div>
    <div class="col-span-2 sm:col-span-4 bg-black flex items-center justify-center text-center">
      <h2 class="text-white">
        <span :class="'tas-text-'+therapist.colour"
          class="block text-4xl">{{ therapist.user.first_name }}</span>
        <span class="block text-xl">{{ therapist.user.last_name }}</span>
      </h2>
    </div>
    <div class="col-span-3 sm:col-span-2 bg-gray p-4 overflow-auto">
      <div v-if="therapist.price_from"
        class="mb-3">
        <span class="block uppercase opacity-50 font-bold">Prices</span>
        <span class="block uppercase text-black font-bold">From {{ therapist.price_from.formatted }}</span>
      </div>
      <div v-if="therapist.location"
        class="mb-3">
        <h4 class="block uppercase opacity-50 font-bold">Location</h4>
        <NuxtLink :to="'/therapists/location/'+therapist.location.slug" 
          class="block text-black font-bold transition duration-200 hover:text-blue-light">{{ therapist.location.town_city }}</NuxtLink>
      </div>
      <div v-if="therapist.sessions.length > 0"
        class="mb-3">
        <h4 class="block uppercase opacity-50 font-bold">Sessions</h4>
        <span v-for="(session, key) in therapist.sessions"
          v-bind:key="key"
          class="block text-black font-bold">{{ session.name }}</span>
      </div>
      <div v-if="therapist.specialisms.length > 0"
        class="mb-0">
        <h4 class="block uppercase opacity-50 font-bold">Specialisms</h4>
        <div
          v-for="(specialism, key) in therapist.specialisms"
          v-bind:key="key">
          <NuxtLink 
            v-if="key <= 5"
            :to="'/therapists/specialism/'+specialism.slug"
            class="block text-black font-bold transition duration-200 hover:text-blue-light">{{ specialism.name }}</NuxtLink>
        </div>
        <NuxtLink 
          :to="'/therapists/'+therapist.slug"
          v-if="therapist.specialisms.length> 5">+ {{ therapist.specialisms.length - 5 }} more</NuxtLink>
      </div>
    </div>
    <div class="col-span-3 sm:col-span-4 flex flex-wrap content-between justify-center p-4">
      <div class="w-full mb-3">
        <p class="leading-5" v-html="therapist.short_description"></p>
        <div v-if="therapist.tags"
          class="flex flex-wrap mt-3">
          <NuxtLink
            v-for="(tag, key) in therapist.tags"
            v-bind:key="key"
            :to="'/therapists/tag/'+tag.slug"
            class="rounded-full px-3 py-2 mr-2 mb-2 bg-gray text-sm leading-3 transition">{{ tag.name }}</NuxtLink>
        </div>
      </div>
      <div class="w-full">
        <NextAvailability
          classes="justify-center"
          :therapist_id="therapist.id"
          :therapist_slug="therapist.slug"
          :is_booking_enabled="therapist.is_booking_enabled" />
        <NuxtLink
          class="mt-3 btn btn-primary btn-small uppercase font-medium w-full rounded-full"
          :to="'/therapists/'+therapist.slug">View Profile</NuxtLink>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    therapist: Object
  }
}
</script>

Zerion Mini Shell 1.0