<script setup>
import { LastUpdate, ProgressTime } from '@/components'

const props = defineProps({
    action: {
        type: Object,
        default: undefined
    }
});

</script>
<template>
    <a
        href="#"
        class="list-group-item list-group-item-action py-3"
        aria-current="true"
    >
        <!-- title with timestamp -->
        <div class="d-flex gap-3">
            <i
                class="fa fa-podcast rounded-circle flex-shring-0"
                style="font-size: 32px"
            />
            <div class="d-flex gap-2 w-100 justify-content-between">
                <div>
                    <h6 class="mb-0">{{ action.title }}</h6>
                    <p class="mb-0 opacity-75">{{ action.description }}</p>
                </div>
                <small class="opacity-50 text-nowrap">
                    <LastUpdate :iso="action.timestamp" />
                </small>
            </div>
        </div>

        <!-- Progress bar with Progress time -->
        <div class="d-flex">
            <ProgressTime :unix="action.position" />
            <div
                class="progress flex-grow-1 m-2"
                style="height:10px; "
            >
                <div
                    class="progress-bar"
                    :style="{width: 100*action.position/action.total + '%'}"
                />
            </div>
            <ProgressTime :unix="action.total" />
        </div>
    </a>
</template>
<style>
</style>

