<div class="container">
    <div class="jumbotron text-center">
        <h1>Il y a
            <span id="membre-qt" class="label label-info">{{ membres.length }}</span> personne{{membres.length >= 2 ? 's' : ''}} au Club Info !</h1>
        <p>Mais avec toi, ça serait encore plus sympa !</p>
    </div>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Section</th>
                <th>Rôle</th>
                <th ng-if="session.canAddMembre || session.canDelMembre">Action</th>
            </tr>
        </thead>
        <tbody ng-repeat="membre in membres">
            <tr>
                <td>{{ membre.nom }}</td>
                <td>{{ membre.section }}</td>
                <td>{{ membre.role }}</td>
                <td ng-if="session.canDelMembre">
                    <button type="button" class="btn btn-danger" aria-label="Expulser" ng-click="deleteMembre($index)">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </td>
            </tr>
        </tbody>
        <tfoot id="membre-form" ng-if="session.canAddMembre">
            <tr class="form-group">
                <td>
                    <input type="text" class="form-control input-lg" placeholder="Login Polytech" ng-model="formData.login">
                </td>
                <td>
                </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>