<div class="row spbrow">
    <div class="col-xs-6">
        <h3>Communes</h3>
    </div>
    <div class="col-xs-6">
        <button
            ng-show="!togglenav"
            class="btn btn-default pull-right"
            type="button"
            ng-click="openNouvelleExtraVilleDialog()"
        >
            Ajouter une commune
        </button>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div style="max-height: 500px; overflow: auto;">
            <table class="table table-bordered table-stripped">
                <tr>
                    <th ng-click="sortBy('value',villesExtraOrderBy)" style="cursor: pointer">
                        Nom
                        <span class="fa fa-sort-alpha-asc" ng-if="villesExtraOrderBy.field === 'value' && !villesExtraOrderBy.reverse"></span>
                        <span class="fa fa-sort-alpha-desc" ng-if="villesExtraOrderBy.field === 'value' && villesExtraOrderBy.reverse"></span>
                    </th>
                    <th ng-click="sortBy('cp[0]',villesExtraOrderBy)" style="cursor: pointer">
                        Codes postaux
                        <span class="fa fa-sort-alpha-asc" ng-if="villesExtraOrderBy.field === 'cp[0]' && !villesExtraOrderBy.reverse"></span>
                        <span class="fa fa-sort-alpha-desc" ng-if="villesExtraOrderBy.field === 'cp[0]' && villesExtraOrderBy.reverse"></span>
                    </th>
                    <th ng-click="sortBy('insee',villesExtraOrderBy)" style="cursor: pointer">
                        Code INSEE
                        <span class="fa fa-sort-alpha-asc" ng-if="villesExtraOrderBy.field === 'insee' && !villesExtraOrderBy.reverse"></span>
                        <span class="fa fa-sort-alpha-desc" ng-if="villesExtraOrderBy.field === 'insee' && villesExtraOrderBy.reverse"></span>
                    </th>
                    <th ng-click="sortBy('pays',villesExtraOrderBy)" style="cursor: pointer">
                        Pays
                        <span class="fa fa-sort-alpha-asc" ng-if="villesExtraOrderBy.field === 'pays' && !villesExtraOrderBy.reverse"></span>
                        <span class="fa fa-sort-alpha-desc" ng-if="villesExtraOrderBy.field === 'pays' && villesExtraOrderBy.reverse"></span>
                    </th>
                    <th>Actions</th>
                </tr>
                <tr ng-show="listeDesVillesExtra.length">
                    <th> <input type="text" class="form-control" ng-model="extraVillesfilter.value"></th>
                    <th> <input type="text" class="form-control" ng-model="extraVillesfilter.cp[0]"></th>
                    <th> <input type="text" class="form-control" ng-model="extraVillesfilter.insee"></th>
                    <th> <input type="text" class="form-control" ng-model="extraVillesfilter.pays"></th>
                    <th> <div class="btn btn-xs btn-default"
                              ng-click ="setDefaultVillesFilter()">
                        <i class="fa fa-times"></i> Annuler les filtres </div>
                    </th>
                </tr>
                <tr ng-repeat="v in filteredListeVilles = (listeDesVillesExtra | orderBy : villesExtraOrderBy.field : villesExtraOrderBy.reverse | filter:extraVillesfilter) track by $index  ">
                    <td>
                         {{v.value}} 
                    </td>
                    <td align="center">
                        <div class="col-xs-12" ng-repeat="x in v.cp track by $index">
                            {{x}}
                        </div>
                    </td> 
                    <td align="center">
                        {{ v.insee }}
                    </td>
                    <td align="center">
                        {{v.pays}}
                    </td>
                    <td align="center">
                        <div class="btn btn-default btn-xs"
                             ng-click="openNouvelleVilleDialog(v,$index,true)">
                            <i class="fa fa-edit"></i>
                        </div>
                        <div class="btn btn-danger btn-xs"
                             ng-click="supprimer_ville_spanc(v)">
                            <i class="fa fa-times"></i>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</div>
<div class="row">
    <div class="col-xs-12 panelSaveAdminBot">
        <div class="btn btn-primary pull-right" ng-click="enregistrerInfoSpanc()">
            Enregistrer les modifications
        </div>
    </div>
</div>