<div class='container'>
    <filler-config linker="registerFillerConfig" on-done="onFillerConfigDone"></filler-config>
    <delete-filler linker="registerDeleteFiller" on-exit="onFillerDelete"></delete-filler>

    <h5>
        Filler Lists
        <button class="pull-right btn btn-sm btn-primary" ng-click="selectFiller(-1)">
            <span class="fa fa-plus"></span>
        </button>
    </h5>
    <table class="table">
        <tr>
            <th>Name</th>
            <th width="40">Clips</th>
            <th style='width:2em'></th>
        </tr>
        <tr ng-if="fillers.length === 0">
            <td colspan="3">
                <p class="text-center text-danger">No filler sources set. Click the <span class="fa fa-plus"></span> to add filler lists.</p>
            </td>
        </tr>
        <tr class='filler-row' ng-repeat="x in fillers" ng-click="selectFiller($index)" style="cursor: pointer; height: 3em"  >
            <td style='height: 3em'>
                <div class="loader" ng-if="x.pending"></div>
                <span ng-show="!x.pending">{{x.name}}</span>
            </td>
            <td>{{x.count}}</td>
            <td>
                <button class='btn btn-link' title='Delete...' ng-click='deleteFiller($index)' >
                    <i class='fas fa-trash-alt text-danger'></i>
                </button>
            </td>
        </tr>
    </table>


</div>