<div>
    <form class="styled">

        <div class="headerthreedotmenu">
            <h2 translate>Recipients</h2>
        </div>
        <div>
            <ul>
                <li ng-repeat="r in ngRecipient track by $index">
                    <div class="input text">
                        <label translate>{{ 'Destinataire' | translate }} {{ $index + 1 }}</label>
                        <input type="text" ng-model="ngRecipient[$index]" placeholder="{{'Enter mail here' | translate}}" ng-change="RefreshRecipientConfiguration()"/>
                        <!-- <span>{{ r }} {{ r.mail }}</span> -->
                        <a class="button" href title="{{'Remove' | translate}}" style="float: none;display: inline-block;height: 25px;line-height: 25px;" ng-click="ngRecipient.splice($index, 1)">X</a>
                    </div>
                </li>
            </ul>
            <a href ng-click="ngRecipient.push('')" translate>Add a recipient</a>
        </div>

        <div class="headerthreedotmenu">
            <h2 translate>Track levels</h2>
        </div>
        <div id="select-notification-levels">
            <ul>
                <li>
                    <input id="checkbox-all-levels" type="checkbox" ng-model="AllLevelsChecked" ng-change="SelectRemoveAll()">
                    <label for="checkbox-all-levels">All</label>
                </li>
                <li>
                    <ul>
                        <li ng-repeat="l in ngLevels track by $index">
                            <input id="checkbox-{{ l.label }}-level" type="checkbox" ng-model="l.checked" ng-change="CheckIfAllSelected()">
                            <label for="checkbox-{{ l.label }}-level">{{ l.label | translate }}</label>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </form>
</div>