<div class="container">
    <!-- HEADER AND TODO COUNT -->
    <div class="jumbotron text-center">
        <h1>Il y a <span id="membre-qt"class="label label-info">{{ membres.length }}</span> personnes au Club Info !</h1>
        <p>Mais avec toi, ça serait encore plus sympa !</p>
    </div>
    <table id="membre-list" class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Section</th>
                <th>Rôle</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody ng-repeat="membre in membres">
            <tr>
                <td>{{ membre.login }}</td>
                <td>{{ membre.section }}</td>
                <td>{{ membre.role }}</td>
                <td><button type="button" class="btn btn-danger" aria-label="Expulser" ng-click="deleteMembre(membre._id)">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </td>
            </tr>
        </tbody>
        <tfoot id="membre-form">
        <tr class="form-group">
            <td>
                <input type="text" class="form-control input-lg" placeholder="Login" ng-model="formData.login">
            </td>
            <td class="form-inline">
                <input type="text" class="form-control input-lg" placeholder="Section" ng-model="formData.section"><input type="number" class="form-control input-lg" placeholder="2015" ng-model="formData.promo">
            </td>
            <td>
                <input type="text" class="form-control input-lg" placeholder="Rôle" ng-model="formData.role">
            </td>
            <td>
                <button type="submit" class="btn btn-primary" aria-label="Ajouter" ng-click="createMembre()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
            </td>
        </tr>
        </tfoot>
    </table>
</div>