<div class="role-filter">
    <div class="fw-700 m-b-5">{{"ROLE"|translate}}</div>
    <div>
        <div class="checkbox-inline" ng-class="{'selected':roles.tank.selected}" uib-tooltip="{{'TANK'|translate}}">
            <label class="tank">
                <input ng-model="roles.tank.selected" type="checkbox">
            </label>
        </div>
        <div class="checkbox-inline" ng-class="{'selected':roles.heal.selected}" uib-tooltip="{{'HEAL'|translate}}">
            <label class="heal">
                <input ng-model="roles.heal.selected" type="checkbox">
            </label>
        </div>
        <div class="checkbox-inline" ng-class="{'selected':roles.melee_dps.selected}"
             uib-tooltip="{{'MELEE_DPS'|translate}}">
            <label class="melee_dps">
                <input ng-model="roles.melee_dps.selected" type="checkbox">
            </label>
        </div>
        <div class="checkbox-inline" ng-class="{'selected':roles.ranged_dps.selected}"
             uib-tooltip="{{'RANGED_DPS'|translate}}">
            <label class="ranged_dps">
                <input ng-model="roles.ranged_dps.selected" type="checkbox">
            </label>
        </div>
    </div>
</div>