<div class='container'>
    <channel-config ng-if="showChannelConfig" channel="selectedChannel" channels="channels" on-done="onChannelConfigDone"></channel-config>

    <h5>
        Channels
        <button class="pull-right btn btn-sm btn-primary" ng-click="selectChannel(-1)">
            <span class="fa fa-plus"></span>
        </button>
    </h5>
    <table class="table">
        <tr>
            <th width="40">Number</th>
            <th width="120" class='text-center'>Icon</th>
            <th>Name</th>
            <th></th>
        </tr>
        <tr ng-if="channels.length === 0">
            <td colspan="3">
                <p class="text-center text-danger">No channels found. Click the <span class="fa fa-plus"></span> to create a channel.</p>
            </td>
        </tr>
        <tr ng-repeat="x in channels" ng-click="selectChannel($index)" style="cursor: pointer; height: 3em" ng-class="{'stealth-channel':(x.stealth===true), 'channel-row' : true }" >
            <td style='height: 3em'>
                <div class="loader" ng-if="x.pending"></div>
                <span ng-show="!x.pending">{{x.number}}</span>
            </td>
            <td style="padding: 0" class="text-center">
                <img ng-if="x.icon !== ''" ng-src="{{x.icon}}" alt="{{x.name}}" style="max-height: 40px;"></img>
                <div ng-if="x.icon === ''" style="padding-top: 14px;"><small>{{x.name}}</small></div>
            </td>
            <td>{{x.name}} <span ng-if='x.stealth===true' class='text-muted'>(Stealth)</span></td>
            <td class="text-right">
                <button ng-show="!x.pending" class="btn btn-sm btn-link" ng-click="removeChannel($index, x); $event.stopPropagation()">
                    <span class="text-danger fa fa-trash-alt"></span>
                </button>
            </td>
        </tr>
    </table>

</div>