<div class="widget-content" id="websites-table">
    <table v-if="rows.length" class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th class="col-md-1">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr
                is="website-row"
                v-for="(website, index) in rows"
                v-bind:item="website"
            ></tr>
        </tbody>
    </table>
    <div class="text-right" v-bind:class="{ 'text-right': rows.length, 'text-center' : !rows.length  }"><button data-toggle="modal" data-target="#createWebsite" class="btn btn-success">Add new</button></div>
</div>

<script>
    var countries = {"1":"United States","2":"Ukraine","3":"Singapore"};
    Vue.component('website-row', {
    template: '\
        <tr>\
        <td>{{ item.name }}</td>\
        <td>{{ country }}</td>\
        <td class="text-center"><a v-bind="{ href: \'/websites/\'+item.id}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></td>\
        </tr>\
    ',
    props: ['item'],
    computed: {
        country: function () {
            return countries[this.item["country_id"]];
        }
    }
    })
    var websites = new Vue({
        el: '#websites-table',
            data: {
                rows: [{"id":1,"country_id":2,"service_id":1,"url":"","name":"\u0434\u0435\u0448\u0435\u0432\u0456 \u043a\u0443\u043f\u043e\u043d\u0438","created_at":"2016-11-15 09:36:47","updated_at":"2016-11-15 09:36:47"},{"id":2,"country_id":1,"service_id":1,"url":"","name":"Groupon","created_at":"2016-11-15 09:36:47","updated_at":"2016-11-15 09:36:47"},{"id":3,"country_id":3,"service_id":1,"url":"","name":"Deals SG","created_at":"2016-11-15 09:36:47","updated_at":"2016-11-15 09:36:47"},{"id":8,"country_id":2,"service_id":1,"url":"","name":"Test","created_at":"2017-01-31 16:59:00","updated_at":"2017-01-31 16:59:00"}]
            }
        });
</script>