<div class="contents" ng-controller="CreateMenuController">
    <div class="pane left menu-items">
        <ul>

            <li ng-repeat="createAction in createActions">
                <a href=''
                   ng-click="createAction.perform()"
                   ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
                   ng-mouseleave="representation.activeMetadata = undefined">
                    <span class="ui-symbol icon type-icon">
                        {{createAction.getMetadata().glyph}}
                    </span>
                    {{createAction.getMetadata().name}}
                </a>
            </li>

        </ul>
    </div>
    <div class="pane right menu-item-description">
        <div class="desc-area ui-symbol icon type-icon">
            {{representation.activeMetadata.glyph}}
        </div>
        <div class="desc-area title">
            {{representation.activeMetadata.name}}
        </div>
        <div class="desc-area description">
            {{representation.activeMetadata.description}}
        </div>
    </div>
</div>