@extends('layouts.default', ['isShowAds' => false])

@section('title', 'Potential Multi-Accounters (Puppets)')

@section('content')
    <div class="puppets-overview fixed-header-push" ng-controller="PuppetsController as ctrl" ng-cloak>
        <div class="row">
            <div class="col-md-4">
                <input type="text" ng-model="ctrl.username" ng-change="ctrl.searchAccounts()" ng-model-options="{ debounce: 300 }" class="form-control" placeholder="username" />
            </div>
        </div>
        
        <div class="puppets-list">
            <div class="puppets-list__header clearfix">
                <div class="col-xs-4 col-ms-3">Username</div>
                <div class="col-xs-8 col-ms-9">Potential Puppets</div>
            </div>
            <div class="puppet-account clearfix" ng-repeat="account in ctrl.accounts">
                <div class="col-xs-4 col-ms-3">
                    <a class="puppet-account-username" href="/profile/@{{ account.username }}" target="_blank">@{{ account.username }}</a>
                </div>
                <div class="col-xs-8 col-ms-9">
                    <span ng-repeat="puppet in account.puppets" class="puppets-list__item">
                        <a href="/profile/@{{ puppet.username }}" target="_blank">@{{ puppet.username }}</a> (@{{ puppet.probability }})
                    </span>
                </div>
            </div>
            <div class="text-center" style="margin: 20px" ng-show="!ctrl.accounts"><span class="spinner"></span></div>
        </div>

        <div class="btn btn-default btn-block mt20" ng-click="ctrl.loadMore()">Load more</div>
    </div>
@endsection