<div class='container'>
    <show-config linker="registerShowConfig" on-done="onShowConfigDone"></show-config>
    <delete-show linker="registerDeleteShow" on-exit="onShowDelete"></delete-show>

    <h5>
        Custom Shows
        <button class="pull-right btn btn-sm btn-primary" ng-click="selectShow(-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="shows.length === 0">
            <td colspan="3">
                <p class="text-center text-danger">No Custom Shows set. Click the <span class="fa fa-plus"></span> to add custom shows.</p>
            </td>
        </tr>
        <tr class='show-row' ng-repeat="x in shows" ng-click="selectShow($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='deleteShow($index)' >
                    <i class='fas fa-trash-alt text-danger'></i>
                </button>
            </td>
        </tr>
    </table>


</div>