<template>
    <v-container>
        <v-hover v-slot:default="{ hover }">
            <v-card
                width="300"
                height="380"
                class="custom-debug"
                :elevation="hover ? settings.hover_elevation : settings.elevation"
            >
                <a
                    @click="() => goToClasses(course.available)"
                    class="custom-debug custom-nav-button"
                >
                    <v-img
                        :src="course.image_url"
                        style="height: 250px; border-top-left-radius: 5px; border-top-right-radius: 5px"
                        class="custom-debug"
                    />
                    <v-card-text
                        style="padding: 10px 15px 0 15px"
                    >
                        <v-toolbar-title
                            class="custom-debug subtitle-1"
                            style="color: black"
                        >
                            {{ course.title }}
                        </v-toolbar-title>
                    </v-card-text>
                    <BtnStatusCourse
                        style="padding: 0 0 0 0; margin: 10px 0 0 15px; width: 266px"
                        class="custom-debug d-flex justify-start"
                        :course="course"
                    />
                    <div class="custom-debug" style="padding: 0 0 0 0; margin: 20px 0 0 15px; width: 266px">
                        <v-progress-linear
                            :value="classStatus(course)"
                            :color="course.available ? settings.general_color : 'grey'"
                        />
                    </div>
                </a>
            </v-card>
        </v-hover>
    </v-container>
</template>