<template> <tr repeat.for="user of users"> <td class="text-xs-center"> <div class="avatar"> <img src.bind="'img/avatars/'+ user.avatar" class="img-avatar" alt="admin@bootstrapmaster.com"> <span class="avatar-status" ng-class="{ 'tag-success' : user.status == 'active', 'tag-warning' : user.status == 'away', 'tag-danger' : user.status == 'busy', 'tag-default' : user.status == 'offline' }"></span> </div> </td> <td> <div>${ user.name }</div> <div class="small text-muted"> <span if.bind="user.new == true">New</span> <span if.bind="user.new == false">Recurring</span> | Registered: ${ user.registered } </div> </td> <td class="text-xs-center"> <img src.bind="'img/flags/'+ user.flag " alt="${ user.country }" style="height:24px;"> </td> <td> <div class="clearfix"> <div class="float-xs-left"> <strong>${ user.usage }%</strong> </div> <div class="float-xs-right"> <small class="text-muted">${ user.period }</small> </div> </div> <progress class="progress progress-xs ${user.usage <= 25 ? 'progress-info' : ''} ${user.usage > 25 && user.usage <= 50 ? 'progress-success' : ''} ${user.usage > 50 && user.usage <= 75 ? 'progress-warning' : ''} ${user.usage > 75 && user.usage <= 100 ? 'progress-danger' : ''} " value="${ user.usage }" max="100" style="margin:5px 0 0 0;">${ user.usage }% </progress> </td> <td class="text-xs-center"> <i class="fa ${ user.payment == 'mastercard' ? 'fa-cc-mastercard' : ''} ${ user.payment == 'visa' ? 'fa-cc-visa' : ''} ${ user.payment == 'amex' ? 'fa-cc-amex' : ''} ${ user.payment == 'diners' ? 'fa-cc-diners-club' : ''} ${ user.payment == 'stripe' ? 'fa-cc-stripe' : ''} ${ user.payment == 'paypal' ? 'fa-paypal' : ''} ${ user.payment == 'google' ? 'fa-google-wallet' : ''}" style="font-size:24px"></i> </td> <td> <div class="small text-muted">Last login</div> <strong>${ user.activity }</strong> </td> </tr> </template>