<div id="legenda" class="hidden-mobile">

    <div ng-repeat="(id, dialectGroup) in $ctrl.dialectGroups" id="{{id}}">
        <strong ng-mouseover="$ctrl.mouseEnter(id, 'group')" ng-mouseleave="$ctrl.mouseLeave(this)" class="pointer">{{ dialectGroup.name }}</strong>
        <div class="legenda-box"></div>
        <div class="legenda-dialects">
            <div ng-repeat="(id, dialect) in dialectGroup.dialects" class="legenda-dialect" >
                <span ng-mouseover="$ctrl.mouseEnter(id, 'dialect')" ng-mouseleave="$ctrl.mouseLeave(this)" class="pointer">{{ dialect.name }}</span>
                <div class="legenda-subdialects">
                    <div ng-repeat="(id, subdialect) in dialect.subdialects" class="legenda-subdialect">
                        <i ng-mouseover="$ctrl.mouseEnter(id, 'subdialect')" ng-mouseleave="$ctrl.mouseLeave(this)" class="pointer">{{ subdialect.name }}</i>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>