<template>
    <tr class="">
        <td class="pl-5 py-3 w-1 h-16 handle cursor-move text-gray-500 hover:text-white">
            <div class="text-center">
                <i class="fas fa-bars transitions transition-colors"></i>
            </div>
        </td>
        <td class="pl-5 py-3 w-16 h-16">
            <progress-ring :ring-width="8" class="w-10 h-10" :is-paused="isPaused" @toggle-state="toggleState" :progress="progress"/>
        </td>
        <td class="p-5 py-3 h-16 overflow-ellipsis overflow-hidden whitespace-nowrap">
                {{ name }}
        </td>
        <td class="p-5 py-3 h-16 w-32 hidden md:table-cell">1.21GB</td>
        <td class="p-5 py-3 h-16 w-32 hidden md:table-cell">5 Minutes</td>
        <td class="p-5 py-3 h-16 w-16 hidden md:table-cell">29</td>
        <td class="p-5 py-3 h-16 w-1 hidden md:table-cell">
            <div class="dropdown" :class="{'active': showMenu}">
                <button class="w-9 h-9 rounded-full hover:bg-indigo-500 hover:text-white transitions transition-colors" id="actions-menu" aria-expanded="true" aria-haspopup="true"><i class="fas fa-ellipsis-v"></i></button>
                <div class="dropdown-menu origin-top-right absolute right: 0 mt-8 w-56" role="menu" aria-orientation="vertical" aria-labelledby="actions-menu">
                    <div class="py-1" role="none">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-300">Thing</a>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ProgressRing from "./ProgressRing.vue";

export default defineComponent({
    components: {
        ProgressRing
    },
    data() {
        return {
            showMenu: false
        }
    },
    methods: {
        toggleState() {
            // this.isPaused = !this.isPaused;
        },
    },
    mounted() {
    },
    props: {
        id: {
            type: Number,
            required: true
        },
        name: {
            type: String,
            required: true
        },
        infoHash: {
            type: String,
            required: true,
        },
        progress: {
            type: Number,
            required: true
        },
        isPaused: {
            type: Boolean,
            required: true
        }
    }
});
</script>

<style class="css">
    .dropdown .dropdown-menu {
        display: none;
    }
    .dropdown.active .dropdown-menu {
        display: initial;
    }
</style>
