<template>
    <div>
        <b-table striped hover :items="clients" :fields="clientsfields" :sort-by.sync="cientsSortBy" :sort-desc.sync="clientsSortDesc" :small="true">

            <template slot="address" slot-scope="row">
                    {{row.item.title}} ({{row.item.address}})
            </template>

            <template slot="connected" slot-scope="row">
                    <template  v-if="row.item.connected && row.item.torrentCount>0 && row.item.active">
                        <b-progress :max="100" variant="success" :striped="true" >
                            <div class="progressLabel">{{ row.item.sumPercentDownloaded.toFixed(1)}} % of all torrents data downloaded</div>
                            <b-progress-bar :value="row.item.sumPercentDownloaded">                       
                            </b-progress-bar>
                        </b-progress>
                        <b-badge v-if="row.item.someExtra" variant="warning">has extra torrs</b-badge>    
                    </template>
                    <template v-else>
                        <b-badge v-if="row.item.connected!=true && row.item.active==1" variant="dark">api not reached</b-badge>  
                        <b-badge v-if="row.item.torrentCount==0" variant="info">nothing to do</b-badge>      
                        <b-badge v-if="row.item.active==0" variant="danger">inactive</b-badge>                     
                    </template>
            </template>

            <template slot="sumDownload" slot-scope="row">
                            {{getReadableDownloadSpeed(row.item.sumDownload)}}
            </template>

            <template slot="sumUpload" slot-scope="row">
                            {{getReadableDownloadSpeed(row.item.sumUpload)}}
            </template>


            <template slot="row-details" slot-scope="row">
                <b-card>
                    <b-table striped hover :items="row.item.torrents" :fields="torrentFields" class="torrents" :small="true">
                         <template slot="stats" slot-scope="row">

                            <b-badge v-if="row.item.forDistribution==false" variant="warning">extra</b-badge>    

                            <template v-if="row.item.started">
                                 <b-badge v-if="row.item.started" variant="success">seeding</b-badge>
                                 <b-badge v-if="row.item.percentProgress!=100" variant="success">downloading</b-badge>
                                 
                            </template>
                            <b-badge v-if="row.item.started!=true" variant="danger">stopped</b-badge>    
                            <b-badge v-if="row.item.paused" variant="secondary">paused</b-badge>       

                        </template>

                        <template slot="size" slot-scope="row">
                            {{getReadableFileSizeString(row.item.size)}}
                        </template>

                        <template slot="downloadSpeed" slot-scope="row">
                            {{getReadableDownloadSpeed(row.item.downloadSpeed)}}
                        </template>

                         <template slot="uploadSpeed" slot-scope="row">
                            {{getReadableDownloadSpeed(row.item.uploadSpeed)}}
                        </template>
                        
                    </b-table>
                </b-card>
            </template>

            <template slot="id" slot-scope="row">
                <b-btn v-if="row.item.connected" pill variant="primary" size="sm" class="btn-ssm" @click.stop="row.toggleDetails">view details</b-btn>
            </template>
        </b-table>
    </div>
</template>

<script>

module.exports = {
    props:['clients'],
    data: function()
        {
          return{
                cientsSortBy:"connected", 
                clientsSortDesc:true,
                clientsfields:[
                    {   key: "address",     sortable: true, label: "Client"},
                    {   key: "connected",   sortable: true, label: "uTorrent status"},
                    {   key:"torrentCount", sortable: true, label: "Torrents"},
                    {   key:"sumUpload",    sortable: true, label: "Up"},
                    {   key:"sumDownload",  sortable: true, label: "Down"},
                    {   key: "last_update", sortable: true, label: "Last scanned"}
                            ],
                torrentFields:[
                    {   key:   "name",              sortable:   true, label:    "Name"},
                    {   key:   "stats",             sortable:   true, label:    "Status flags"},
                    {   key:   "size",              sortable:   true, label:    "Size"},
                    {   key:   "percentProgress",   sortable:   true, label:    "%"},
                    {   key:   "uploadSpeed",       sortable:   true, label:    "Up"},
                    {   key:   "downloadSpeed",     sortable:   true, label:    "Down"},
                    {   key:   "sp",                sortable:   true, label:    "P/S in Swarm"},
                    {   key:   "asp",               sortable:   true, label:    "Active P/S"},
                    {   key:   "ratio",             sortable:   true, label:    "Ratio"},
                    {   key:   "queueOrder",        sortable:   true, label:    "Ord"},
                    
                            ]
                }
        },
        created:function()
        { 
        },
        methods:
        {
            
        }

}

</script>