<div class="object-explorer">

  <svg class="object-explorer-elements"></svg>

  <div class="object-explorer-views-bar" style="width: {{width}}px;">
    <ul class="object-explorer-views">
      <li ng-repeat="view in views" ng-class="{'object-explorer-active-view': (view.name === activeView.name)}">
        <img ng-src="{{view.icon}}" ng-click="activateView(view.name)" alt="{{view.name}}" title="{{view.name}}" class="icon-as-button" />
      </li>
      <li ng-if="activeView.type !== undefined">
        <img src="assets/icon_close.png" ng-click="activateView()" alt="Close" title="Close" />
      </li>
    </ul>
  </div>

  <div ng-switch="activeView.type">
    <div class="object-explorer-text" ng-switch-when="text" ng-bind-html="activeView.options.text">
    </div>

    <div class="object-explorer-notes" ng-switch-when="notes">
      <p ng-if="activeElement === undefined" translate>
        Please select an element above.
      </p>

      <dashboard-notes keyword-id="activeViewKeywords" enable-keywords="activeView.options.enableKeywords" show-search="activeView.options.showSearch" status-filter="activeView.options.statusFilter" show-status-filter="activeView.options.showStatusFilter" show-keyword-filter="activeView.options.showKeywordFilter" limit-to="activeView.options.limitTo" show-more="activeView.options.showMore" show-impacts="activeView.options.showImpacts" impacts-risk-category="activeView.options.impactsRiskCategory" impacts-risk-category-description="activeView.options.impactsRiskCategoryDescription" show-new="activeView.options.showNew" source-link="{{sourceLink}}/{{activeElement}}/{{activeView.name}}" call-on-change></dashboard-notes>
    </div>

    <div class="object-explorer-dashboard" ng-switch-when="objectTable">
      <div class="object-explorer-table-container">
        <div ng-repeat="table in activeView.options.tables">
          <div class="object-explorer-table" ng-style="{'width': activeView.options.tableWidth + 'px'}">
            <h3 class="object-explorer-table-title">{{table.title}}</h3>

            <object-explorer-table mapping-key="mappingKey" show-element="activeElement" show-type="table.type" add-columns="table.addColumns" line-height="table.lineHeight"></object-explorer-table>
            <div class="object-explorer-enter-mapping" ng-if="hasMappingRights"><a ng-click="enterMappingMode(table.type, table.addColumns)" class="link-as-button" translate>Map objects</a></div>
          </div>
        </div>
      </div>
    </div>

    <div class="object-explorer-mapping" ng-switch-when="objectMapping">
      <div class="object-explorer-close-mapping"><a class="link-as-button" ng-click="closeMappingMode()" translate>Close mapping</a></div>
      <object-explorer-mapping mapping-key="mappingKey" active-element="activeElement" show-type="activeView.options.type" add-columns="activeView.options.addColumns" on-map="mappingUpdated" line-height="table.lineHeight"></object-explorer-mapping>
    </div>

    <div class="object-explorer-chart" ng-switch-when="chart">
      TODO - Chart Directive einbinden
    </div>
  </div>

</div>