<h1 translate>Administration - Dashboard &quot;{{dashboardName}}&quot;</h1>


<div class="error" ng-if="errMessage" >{{errMessage | translate}}</div>

<div class="loadingIndicator" style="width: 1200px; height: 500px;" ng-show="loading" translate>Loading dashboard elements...</div>

<form name="elementsForm">

<div ui-tree="treeOptions" ui-tree-nodes="" ng-model="dashboardElements" class="vertical-margins">

  <div ng-repeat="el in dashboardElements" ui-tree-node>

    <div class="admin-view-details" ng-if="!el.isDeleted && el.showDetails" ng-form="elementSubform">
      <h2 ng-class="['margin-below', 'admin-view-element-header-' + el.type]"><i class="fa fa-bars icon-as-button" title="{{ 'Drag and drop here to change order of dashboard elements' | translate }}" ui-tree-handle></i> <i class="fa fa-chevron-down icon-as-button"  title="{{ 'Click to hide details' | translate }}" ng-click="toggleDetails(el)"></i> <span class="admin-views-view-type">{{el.type | typeToDescription }}</span> <input type="text" ng-model="el.title" size="80"> <i class="fa fa-trash icon-as-button" title="{{ 'Remove dashboard element' | translate }}" ng-click="deleteElement(el)"></i></h2>

      <label><span translate>Key for this element:</span>
             <input ng-model="el.viewKey" size="30" required ng-pattern="/^[a-zA-Z0-9_-]+$/"> <br>
             <span translate>(should be unique on this dashboard, only letters, numbers, underscore, dash allowed)</label> <br>

      <label><span translate>Help text for this dashboard element (leave empty for no help):</span> <br>
      <text-angular ng-model="el.options.helpText" ta-toolbar="[['bold', 'italics', 'underline', 'strikeThrough'],['ul','ol','outdent','indent','quote','pre'],['insertLink', 'clear']]" class="admin-text-editor"></text-angular>
      </label>

      <div ng-switch on="el.type">
        <div ng-switch-when="html">
          <label><span translate>HTML code to be displayed:</span> <br>
            <textarea ng-model="el.options.html" rows="12" cols="100"></textarea>
          </label>
        </div>

        <div ng-switch-when="iframe">
          <label>
            <span translate>IFrame URL to be embedded:</span>
            <input type="text" ng-model="el.options.url" size="250" required-if="!el.isDeleted">
          </label> <br>

          <label>
            <span translate>Width of the IFrame:</span>
            <input type="text" ng-model="el.options.width" size="6" required-if="!el.isDeleted">
          </label> <br>

          <label>
            <span translate>Height of the IFrame:</span>
            <input type="text" ng-model="el.options.height" size="6" required-if="!el.isDeleted">
          </label>
        </div>
        
        <div ng-switch-when="tabDivider">
          <label><span translate>Tab ID for the URL:</span>
            <input type="text" ng-model="el.options.tabId" size="30" required-if="!el.isDeleted" ng-pattern="/^[a-zA-Z0-9_-]+$/"> (<span translate>only letters, numbers, <code>-</code> and <code>_</code></span>)
          </label> <br>
          <label><span translate>Short text for tab:</span>
            <input type="text" ng-model="el.options.tabText" size="100" required-if="!el.isDeleted">
          </label> <br>
          <label><span translate>Color for tab:</span>
            <input type="text" ng-model="el.options.tabColor" size="20" required-if="!el.isDeleted">
          </label> <br>
          <label><span translate>Color for tab when selected:</span>
            <input type="text" ng-model="el.options.tabSelectedColor" size="20" required-if="!el.isDeleted">
          </label>
        </div>

        <div ng-switch-when="notes">
          <label><span translate>Display notes for keyword IDs (one entry per line):</span> <br>
            <textarea ng-model="el.options.keywordID" array-to-lines rows="6" cols="30"></textarea></label> <br>

          <label><input type="checkbox" ng-model="el.options.enableKeywords"> <span translate>Allow user to set other keywords</span></label> <br>
          <label><input type="checkbox" ng-model="el.options.showKeywordFilter"> <span translate>Allow user to restrict search with other keywords</span></label> <br>

          <label><input type="checkbox" ng-model="el.options.showSearch"> <span translate>Display search bar</span></label> <br>

          <label><span translate>Show notes only with the following status types (ctrl-click to select multiple):</span> <br>
          <select ng-model="el.options.statusFilter" size="8" multiple>
            <option value="Draft" translate>Draft</option>
            <option value="Final" translate>Final</option>
            <option value="Closed" translate>Closed</option>
            <option value="Reviewed" translate>Reviewed</option>
          </select></label><br>
          <label><input type="checkbox" ng-model="el.options.showStatusFilter"> <span translate>Allow user to change the status filter</span></label> <br>

          <br>
          <label><span translate>Limit number of notes to:</span> <input type="text" ng-model="el.options.limitTo" size="3" maxsize="6"></label> <br>
          <label><input type="checkbox" ng-model="el.options.showMore"> <span translate>Allow user to load additional notes</span></label> <br>

          <label><input type="checkbox" ng-model="el.options.showImpacts"> <span translate>Allow user to assign impact flags to these notes</span></label> <br>
          <label ng-if="el.options.showImpacts"><span translate>Show risks from this category for impact flags (leave empty if no risks should be assigned):</span> <input type="text" ng-model="el.options.impactsRiskCategory" size="80"></label> <br>
          <label ng-if="el.options.showImpacts"><span translate>Description for this risk category (will be displayed in notifications):</span> <input type="text" ng-model="el.options.impactsRiskCategoryDescription" size="80"></label> <br>

          <label>
            <span translate>Show button to add new notes: </span>
            <select ng-model="el.options.showNew">
              <option value="" translate>Don't show add notes button</option>
              <option value="top" translate>Show button at top</option>
              <option value="bottom" translate>Show button at bottom</option>
            </select>
          </label>
        </div>

        <div ng-switch-when="timeSeries">
          <label><span translate>Datafile with source data:</span> <select ng-model="el.options.dataFile" ng-options="value for value in datafilesList | orderBy: value" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile to use as time (x axis):</span> <select ng-model="el.options.timeColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Show the following columns as line chart elements:</span> <br>
            <select ng-model="el.options.lineColumns" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" size="8" multiple></select> <br>
          </label> <br>

          <label><span translate>Show the following columns as area chart elements:</span> <br>
            <select ng-model="el.options.areaColumns" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" size="8" multiple></select> <br>
          </label> <br>

          <label><input type="checkbox" ng-model="el.options.relativeAreas"> <span translate>Scale areas to 100% (relative) view</span></label> <br>

          <label><input type="checkbox" ng-model="el.options.twoAxes"> <span translate>Use different axes for line and area elements</span></label> <br>

          <span translate>Y-axis for lines should always start between (leave empty for full auto-sizing): </span><br>
          <label><span translate>Y-axis should always start between </span> <input type="number" ng-model="el.options.yAxisFix.minMin" step="0.0001"></label> <span translate> and </span> <input type="number" ng-model="el.options.yAxisFix.minMax" step="0.0001"> <br>
          <label><span translate>Y-axis should always go to between </span> <input type="number" ng-model="el.options.yAxisFix.maxMin" step="0.0001"></label> <span translate> and </span> <input type="number" ng-model="el.options.yAxisFix.maxMax" step="0.0001"> <br>

          <label><span translate>Moving average shown by default:</span> <input type="number" ng-model="el.options.mvgAvgDefault" min="0" max="365" step="1" size="4"> <span translate>elements</span></label> <br>

          <label><span translate>Automatically zoom into last n elements (zero or empty for no zoom):</span> <input type="number" ng-model="el.options.initialBrushFrom" min="0" step="1" size="4"> <span translate>elements</span></label> <br>

          <label><span translate>Legend width (zero or empty for default):</span> <input type="number" ng-model="el.options.legendWidth" min="0" step="1" size="5">px</label> <br>

          <label><input type="checkbox" ng-model="el.options.notesEnabled"> <span translate>Allow users to create notes on this chart</span></label>

          <div ng-if="el.options.notesEnabled">
            <br><strong translate>Configuration for notes interface on chart:</strong><br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.enableKeywords"> <span translate>Allow user to set other keywords</span></label> <br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.showSearch"> <span translate>Display search bar</span></label> <br>


            <label><span translate>Limit number of notes to:</span> <input type="text" ng-model="el.options.notesOptions.limitTo" size="3" maxsize="6"></label> <br>
            <label><input type="checkbox" ng-model="el.options.notesOptions.showMore"> <span translate>Allow user to load additional notes</span></label> <br>


            <label><input type="checkbox" ng-model="el.options.notesOptions.showImpacts"> <span translate>Allow user to assign impact flags to these notes</span></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Show risks from this category for impact flags (leave empty if no risks should be assigned):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategory" size="80"></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Description for this risk category (will be displayed in notifications):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategoryDescription" size="80"></label> <br>
          </div>
        </div>

        <div ng-switch-when="stackedBars">
          <label><span translate>Datafile with source data:</span> <select ng-model="el.options.dataFile" ng-options="value for value in datafilesList | orderBy: value" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile to use as time (time selector):</span> <select ng-model="el.options.timeColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile that specifies the individual bar:</span> <select ng-model="el.options.barColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Show only bars that match these values (one entry per line, empty for all available bars):</span> <br>
            <textarea ng-model="el.options.showBarColumns" array-to-lines rows="6" cols="30"></textarea> <br>
          </label> <br>

          <label><span translate>Show the following columns as chart elements (individual blocks on each bar):</span> <br>
            <select ng-model="el.options.showColumns" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" size="8" multiple></select>
          </label> <br>

          <label><input type="checkbox" ng-model="el.options.notesEnabled"> <span translate>Allow users to create notes on this chart</span></label>

          <div ng-if="el.options.notesEnabled">
            <br><strong translate>Configuration for notes interface on chart:</strong><br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.enableKeywords"> <span translate>Allow user to set other keywords</span></label> <br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.showSearch"> <span translate>Display search bar</span></label> <br>


            <label><span translate>Limit number of notes to:</span> <input type="text" ng-model="el.options.notesOptions.limitTo" size="3" maxsize="6"></label> <br>
            <label><input type="checkbox" ng-model="el.options.notesOptions.showMore"> <span translate>Allow user to load additional notes</span></label> <br>


            <label><input type="checkbox" ng-model="el.options.notesOptions.showImpacts"> <span translate>Allow user to assign impact flags to these notes</span></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Show risks from this category for impact flags (leave empty if no risks should be assigned):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategory" size="80"></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Description for this risk category (will be displayed in notifications):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategoryDescription" size="80"></label> <br>
          </div>
        </div>

        <div ng-switch-when="scatterplot">
          <label><span translate>Datafile with source data:</span> <select ng-model="el.options.dataFile" ng-options="value for value in datafilesList | orderBy: value" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile to use as time (time selector):</span> <select ng-model="el.options.timeColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile that specifies the x position (horizontal):</span> <select ng-model="el.options.xColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile that specifies the y position (vertical):</span> <select ng-model="el.options.yColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile that specifies the circle size:</span> <select ng-model="el.options.sizeColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile that specifies the group (color) of the circle:</span> <select ng-model="el.options.groupColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile that specifies a label for each data element (optional):</span> <select ng-model="el.options.contentTitle" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Template for the tooltip to be displayed: </span> <br>
            <textarea ng-model="el.options.tooltip" rows="4" cols="50"></textarea></label> <br>
          (<span translate>Maximum four lines. You can use <code>{{columname}}</code> as placeholder, which will be replaced with the content of the column <code>columname</code> for the item the user is moving the mouse over.</span>) <br>

          <label><span translate>Label for the x axis:</span> <input type="text" ng-model="el.options.xLabel" size="60"></label> <br>

          <label><span translate>Label for the y axis:</span> <input type="text" ng-model="el.options.yLabel" size="60"></label> <br>

          <label><span translate>Maximum size for circles (in pixel):</span> <input type="text" ng-model="el.options.circleSize" size="4" maxsize="4"></label>

          <label><span translate>Legend width (zero or empty for default):</span> <input type="number" ng-model="el.options.legendWidth" min="0" step="1" size="5">px</label> <br>

          <label><input type="checkbox" ng-model="el.options.notesEnabled"> <span translate>Allow users to create notes on this chart</span></label>

          <div ng-if="el.options.notesEnabled">
            <br><strong translate>Configuration for notes interface on chart:</strong><br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.enableKeywords"> <span translate>Allow user to set other keywords</span></label> <br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.showSearch"> <span translate>Display search bar</span></label> <br>


            <label><span translate>Limit number of notes to:</span> <input type="text" ng-model="el.options.notesOptions.limitTo" size="3" maxsize="6"></label> <br>
            <label><input type="checkbox" ng-model="el.options.notesOptions.showMore"> <span translate>Allow user to load additional notes</span></label> <br>


            <label><input type="checkbox" ng-model="el.options.notesOptions.showImpacts"> <span translate>Allow user to assign impact flags to these notes</span></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Show risks from this category for impact flags (leave empty if no risks should be assigned):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategory" size="80"></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Description for this risk category (will be displayed in notifications):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategoryDescription" size="80"></label> <br>
          </div>


	  <div ng-if="el.options.groupColumn">
	    <br><strong translate>Custom colors for chart groups:</strong></br>

	    <table class="admin-chart-group-custom-colors">
	      <thead>
		<tr>
		  <td translate>Group Text</td>
		  <td translate>Custom Color</td>
		  <td>&nbsp;</td>
		</tr>
	      </thead>
	      <tbody>
		<tr>
		  <td colspan="3" style="text-align: center;">
		    <i class="fa fa-plus icon-as-button" title="{{ 'Add custom
		    group color' | translate }}"
		    ng-click="el.options.groupCustomColors = arrayNewElement(el.options.groupCustomColors)"></i>
		  </td>
		</tr>

		<tr ng-repeat="cust in el.options.groupCustomColors">
		  <td><input type="text" ng-model="cust.group"></td>
		  <td><input type="text" ng-model="cust.color"></td>
		  <td><i class="fa fa-trash icon-as-button" title="{{ 'Remove' | translate }}" ng-click="arrayRemoveElement(el.options.groupCustomColors, cust)"></i></td>
		</tr>
	      </tbody>
	    </table>
	  </div>	  
        </div>

        <div ng-switch-when="portfolio">
          <label><span translate>Datafile with source data:</span> <select ng-model="el.options.dataFile" ng-options="value for value in datafilesList | orderBy: value" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile to use as time (time selector):</span> <select ng-model="el.options.timeColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile that specifies the width of the box (x axis):</span> <select ng-model="el.options.xColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile that specifies the height of the box (y axis):</span> <select ng-model="el.options.yColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile that specifies the group (color) of the box:</span> <select ng-model="el.options.groupColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile that specifies divisions of the portfolio (optional):</span> <select ng-model="el.options.contentDivide" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile that specifies a label for each data element (optional):</span> <select ng-model="el.options.contentTitle" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Template for the tooltip to be displayed: </span> <br>
            <textarea ng-model="el.options.tooltip" rows="4" cols="50"></textarea></label> <br>
          (<span translate>Maximum four lines. You can use <code ng-non-bindable>{{columname}}</code> as placeholder, which will be replaced with the content of the column <code>columname</code> for the item the user is moving the mouse over.</span>) <br>

          <label><span translate>Columns that should be displayed as lines on top of the portfolio (optional):</span> <br>
            <select ng-model="el.options.lineColumns" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" size="8" multiple></select></label> <br>

          <label><span translate>Label for the x axis:</span> <input type="text" ng-model="el.options.xLabel" size="60"></label> <br>

          <label><span translate>Label for the y axis:</span> <input type="text" ng-model="el.options.yLabel" size="60"></label> <br>

          <label><span translate>Legend width (zero or empty for default):</span> <input type="number" ng-model="el.options.legendWidth" min="0" step="1" size="5">px</label> <br>

          <label><input type="checkbox" ng-model="el.options.notesEnabled"> <span translate>Allow users to create notes on this chart</span></label>

          <div ng-if="el.options.notesEnabled">
            <br><strong translate>Configuration for notes interface on chart:</strong><br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.enableKeywords"> <span translate>Allow user to set other keywords</span></label> <br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.showSearch"> <span translate>Display search bar</span></label> <br>


            <label><span translate>Limit number of notes to:</span> <input type="text" ng-model="el.options.notesOptions.limitTo" size="3" maxsize="6"></label> <br>
            <label><input type="checkbox" ng-model="el.options.notesOptions.showMore"> <span translate>Allow user to load additional notes</span></label> <br>


            <label><input type="checkbox" ng-model="el.options.notesOptions.showImpacts"> <span translate>Allow user to assign impact flags to these notes</span></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Show risks from this category for impact flags (leave empty if no risks should be assigned):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategory" size="80"></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Description for this risk category (will be displayed in notifications):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategoryDescription" size="80"></label> <br>
          </div>

	  <div ng-if="el.options.groupColumn">
	    <br><strong translate>Custom colors for chart groups:</strong></br>

	    <table class="admin-chart-group-custom-colors">
	      <thead>
		<tr>
		  <td translate>Group Text</td>
		  <td translate>Custom Color</td>
		  <td>&nbsp;</td>
		</tr>
	      </thead>
	      <tbody>
		<tr>
		  <td colspan="3" style="text-align: center;">
		    <i class="fa fa-plus icon-as-button" title="{{ 'Add custom
		    group color' | translate }}"
		    ng-click="el.options.groupCustomColors = arrayNewElement(el.options.groupCustomColors)"></i>
		  </td>
		</tr>

		<tr ng-repeat="cust in el.options.groupCustomColors">
		  <td><input type="text" ng-model="cust.group"></td>
		  <td><input type="text" ng-model="cust.color"></td>
		  <td><i class="fa fa-trash icon-as-button" title="{{ 'Remove' | translate }}" ng-click="arrayRemoveElement(el.options.groupCustomColors, cust)"></i></td>
		</tr>
	      </tbody>
	    </table>
	    
	  </div>
        </div>

        <div ng-switch-when="table">
          <label><span translate>Datafile with source data:</span> <select ng-model="el.options.dataFile" ng-options="value for value in datafilesList | orderBy: value" required-if="!el.isDeleted"></select></label> <br>

          <label><span translate>Column from datafile to use as time (time selector):</span> <select ng-model="el.options.timeColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select></label> <br>

          <label><span translate>Column from datafile to show as first table column (row header):</span> <select ng-model="el.options.firstColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" required-if="!el.isDeleted"></select></label> <br>

          <label ng-show="!el.options.columnColumn"><span translate>Show the following additional columns on the table:</span> <br>
            <select ng-model="el.options.showColumns" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns" size="8" multiple></select> <br>
          </label> <br>

          <label><span translate><i ng-show="!el.options.columnColumn">Or: </i>Use the following datafile column to construct table columns (transposing them):</span> <br>
            <select ng-model="el.options.columnColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select> <br>
          </label> <br>

          <label ng-show="el.options.columnColumn"><span translate>Column from the datafile that will fill the cells of the table:</span> <br>
            <select ng-model="el.options.valueColumn" ng-options="col.display as col.display for col in availableDatafiles[el.options.dataFile].dataFileFormat.columns"></select> <br>
          </label> <br>

          <label><span translate>Lowest value for heatmap coloring (leave empty for no heatmap):</span> <input type="text" ng-model="el.options.heatmapFrom" size="5"></label> <br>

          <label><span translate>Highest value for heatmap coloring (leave empty for no heatmap):</span> <input type="text" ng-model="el.options.heatmapTo" size="5"></label> <br>

          <label><input type="checkbox" ng-model="el.options.showSparklines"> <span translate>Show sparklines to the right of the table (summarizing over all columns)</span></label> <br>

          <label><input type="checkbox" ng-model="el.options.showColumnSparklines"> <span translate>Show sparklines at the bottom of the table (summarizing over all lines)</span></label> <br>

          <label ng-show="el.options.showSparklines || el.options.showColumnSparklines"><input type="checkbox" ng-model="el.options.sparklinesUseGlobalMax"> <span translate>Sparkline range should be determined based over all table entries (if not ticked, sparklines will be scaled individually per row)</span> </label> <br>

          <label><input type="checkbox" ng-model="el.options.notesEnabled"> <span translate>Allow users to create notes on this table</span></label>

          <div ng-if="el.options.notesEnabled">
            <br><strong translate>Configuration for notes interface on chart:</strong><br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.enableKeywords"> <span translate>Allow user to set other keywords</span></label> <br>

            <label><input type="checkbox" ng-model="el.options.notesOptions.showSearch"> <span translate>Display search bar</span></label> <br>


            <label><span translate>Limit number of notes to:</span> <input type="text" ng-model="el.options.notesOptions.limitTo" size="3" maxsize="6"></label> <br>
            <label><input type="checkbox" ng-model="el.options.notesOptions.showMore"> <span translate>Allow user to load additional notes</span></label> <br>


            <label><input type="checkbox" ng-model="el.options.notesOptions.showImpacts"> <span translate>Allow user to assign impact flags to these notes</span></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Show risks from this category for impact flags (leave empty if no risks should be assigned):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategory" size="80"></label> <br>
            <label ng-if="el.options.notesOptions.showImpacts"><span translate>Description for this risk category (will be displayed in notifications):</span> <input type="text" ng-model="el.options.notesOptions.impactsRiskCategoryDescription" size="80"></label> <br>
          </div>
        </div>

        <div ng-switch-when="riskTracker">
          <label><span translate>Identifier for risks to be displayed:</span> <input type="text" ng-model="el.options.riskCategory" size="80" required-if="!el.isDeleted"></label> <br>

          <label><span translate>X axis description (e.g. "Likelihood"):</span>
            <input type="text" ng-model="el.options.xLabel" size="80" required-if="!el.isDeleted">
          </label> <br>

          <label><span translate>Y axis description (e.g. "Impact"):</span>
            <input type="text" ng-model="el.options.yLabel" size="80" required-if="!el.isDeleted">
          </label> <br>

          <label><span translate>Labels for the x axis of the risk matrix (one entry per line):</span> <br>
            <textarea ng-model="el.options.xLabels" array-to-lines rows="3" cols="30" required-if="!el.isDeleted"></textarea>
          </label> <br>

          <label><span translate>Labels for the y axis of the risk matrix (one entry per line):</span> <br>
            <textarea ng-model="el.options.yLabels" array-to-lines rows="3" cols="30" required-if="!el.isDeleted"></textarea>
          </label> <br>

          <label><span translate>Do not show historic risks that are older than (in days):</span> <input type="text" ng-model="el.options.maxDaysOld" size="4" required-if="!el.isDeleted"></label> <br>

          <label><input type="checkbox" ng-model="el.options.showImpacts"> <span translate>Show impact flags tagged to these risks</span></label>
        </div>

        <div ng-switch-when="objectExplorer">
          <label><span translate>Width of the object explorer area:</span> <input type="text" ng-model="el.options.width" size="4" required-if="!el.isDeleted"></label> <br>
          <label><span translate>Height of the graphical element view:</span> <input type="text" ng-model="el.options.height" size="4" required-if="!el.isDeleted"></label> <br>
          <label><span translate>Mapping key:</span> <input type="text" ng-model="el.options.mappingKey" size="20" required-if="!el.isDeleted"></label> <br>

          <table class="admin-view-details-table">
            <thead>
            <tr>
              <th translate>Element Key</th>
              <th translate>Displayed Description</th>
              <th>&nbsp;</th>
              <th><i class="fa fa-plus icon-as-button" title="{{ 'Add new element' | translate }}" ng-click="el.options.elements = arrayNewElement(el.options.elements)"></i></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="element in el.options.elements">
              <td><input type="text" ng-model="element.key" size="60" required-if="!el.isDeleted"></td>
              <td><input type="text" ng-model="element.display" size="60" required-if="!el.isDeleted"></td>
              <td><i ng-class="['fa', 'fa-paint-brush', 'icon-as-button', (hasConditionalFormat(element) ? 'icon-active' : 'icon-inactive')]" title="{{ 'Change conditional formatting of element' | translate }}" ng-click="conditionalFormat(element)"></i></td>
              <td>
                <i class="fa fa-trash icon-as-button" title="{{ 'Remove element' | translate }}" ng-click="arrayRemoveElement(el.options.elements, element)"></i>
                <i class="fa fa-chevron-up icon-as-button" title="{{ 'Move element up' | translate }}" ng-click="arrayMoveElement(el.options.elements, element, -1)"></i>
                <i class="fa fa-chevron-down icon-as-button" title="{{ 'Move element down' | translate }}" ng-click="arrayMoveElement(el.options.elements, element, 1)"></i>
                <i class="fa fa-plus icon-as-button" title="{{ 'Add new element here' | translate }}" ng-click="arrayNewElement(el.options.elements, element)"></i>
              </td>
            </tr>
            </tbody>
          </table> <br>

          <label><span translate>Type of graphical view for the defined elements: </span>
            <select ng-model="el.options.viewType">
              <option value="process" translate>Process View</option>
            </select>
          </label> <br>

          <h3><span translate>Available Views</span> <i class="fa fa-plus icon-as-button" title="{{ 'Add new view' | translate }}" ng-click="el.options.views = arrayNewElement(el.options.views)"></i></h3>

          <div class="admin-view-details-object-explorer-views" ng-repeat="view in el.options.views">
            <div class="admin-view-details-object-explorer-buttons">
              <i class="fa fa-trash icon-as-button" title="{{ 'Remove view' | translate }}" ng-click="arrayRemoveElement(el.options.views, view)"></i>
              <i class="fa fa-chevron-up icon-as-button" title="{{ 'Move icon for view further up' | translate }}" ng-click="arrayMoveElement(el.options.views, view, -1)"></i>
              <i class="fa fa-chevron-down icon-as-button" title="{{ 'Move icon for view further down' | translate }}" ng-click="arrayMoveElement(el.options.views, view, 1)"></i>
              <i class="fa fa-plus icon-as-button" title="{{ 'Add new view here' | translate }}" ng-click="arrayNewElement(el.options.views, view)"></i>
            </div>

            <label><span translate>Name for this view: </span>
              <input type="text" ng-model="view.name" size="90" required-if="!el.isDeleted">
            </label> <br>

            <label><span translate>Icon URL for this view: </span>
              <input type="text" ng-model="view.icon" size="90" required-if="!el.isDeleted">
            </label> <br>

            <label><span translate>Type of view: </span>
              <select ng-model="view.type">
                <option value="text" translate>Static Text</option>
                <option value="notes" translate>Notes for a specific keyword</option>
                <option value="objectTable" translate>Table(s) of objects</option>
                <!-- TODO: add charts option -->
              </select>
            </label> <br>

            <div ng-switch on="view.type">
              <div ng-switch-when="text">
                <label><span translate>HTML to be displayed: </span><br>
                <textarea ng-model="view.options.text" required-if="!el.isDeleted" rows="10" cols="60"></textarea>
                </label>
              </div>

              <div ng-switch-when="notes">
                <label><span translate>Display notes for keyword IDs (one entry per line):</span> <br>
                  <textarea ng-model="view.options.keywordID" array-to-lines rows="6" cols="30"></textarea></label> <br>
                <span translate>(use <code>[ELEMENT]</code> to reference selected element)</span></label> <br>

                <label><input type="checkbox" ng-model="view.options.enableKeywords"> <span translate>Allow user to set other keywords</span></label> <br>
                <label><input type="checkbox" ng-model="view.options.showKeywordFilter"> <span translate>Allow user to restrict search with other keywords</span></label> <br>

                <label><input type="checkbox" ng-model="view.options.showSearch"> <span translate>Display search bar</span></label> <br>

                <label><span translate>Show notes only with the following status types (ctrl-click to select multiple):</span> <br>
                  <select ng-model="view.options.statusFilter" size="8" multiple>
                    <option value="Draft" translate>Draft</option>
                    <option value="Final" translate>Final</option>
                    <option value="Closed" translate>Closed</option>
                    <option value="Reviewed" translate>Reviewed</option>
                  </select></label><br>
                <label><input type="checkbox" ng-model="view.options.showStatusFilter"> <span translate>Allow user to change the status filter</span></label> <br>

                <br>
                <label><span translate>Limit number of notes to:</span> <input type="text" ng-model="view.options.limitTo" size="3" maxsize="6"></label> <br>
                <label><input type="checkbox" ng-model="view.options.showMore"> <span translate>Allow user to load additional notes</span></label> <br>

                <label><input type="checkbox" ng-model="view.options.showImpacts"> <span translate>Allow user to assign impact flags to these notes</span></label> <br>
                <label ng-if="view.options.showImpacts"><span translate>Show risks from this category for impact flags (leave empty if no risks should be assigned):</span> <input type="text" ng-model="view.options.impactsRiskCategory" size="80"></label> <br>
                <label ng-if="view.options.showImpacts"><span translate>Description for this risk category (will be displayed in notifications):</span> <input type="text" ng-model="view.options.impactsRiskCategoryDescription" size="80"></label> <br>

                <label>
                  <span translate>Show button to add new notes: </span>
                  <select ng-model="view.options.showNew">
                    <option value="" translate>Don't show add notes button</option>
                    <option value="top" translate>Show button at top</option>
                    <option value="bottom" translate>Show button at bottom</option>
                  </select>
                </label>
              </div>

              <div ng-switch-when="objectTable">
                <label><span translate>Width for each table:</span> <input type="text" ng-model="view.options.tableWidth" size="8" required-if="!el.isDeleted">px</label> <br>

                <h4><span translate>Tables to be displayed</span> <i class="fa fa-plus icon-as-button" title="{{ 'Add new object table' | translate }}" ng-click="view.options.tables = arrayNewElement(view.options.tables)"></i></h4>

                <ul class="admin-view-details-object-explorer-tables">
                  <li class="admin-view-details-object-explorer-table" ng-repeat="table in view.options.tables">
                    <label>
                      <span translate>Title of table: </span>
                      <input type="text" ng-model="table.title" size="90" required-if="!el.isDeleted">
                    </label> <br>

                    <label>
                      <span translate>Row height of table: </span>
                      <input type="text" ng-model="table.lineHeight" size="5">
                      <span translate>(optional, if not given will default to one line)</span>
                    </label> <br>

                    <label>
                      <span translate>Object types to be displayed: </span>
                      <input type="text" ng-model="table.type" size="60" required-if="!el.isDeleted">
                    </label> <br>

                    <span translate>Additional columns to be displayed (if any): </span>
                    <table class="admin-view-details-table">
                      <thead>
                      <tr>
                        <th translate>Title</th>
                        <th translate>Field to show</th>
                        <th translate>Display width</th>
                        <th><i class="fa fa-plus icon-as-button" title="{{ 'Add additional column' | translate }}" ng-click="table.addColumns = arrayNewElement(table.addColumns)"></i></th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr ng-repeat="column in table.addColumns">
                        <td><input type="text" ng-model="column.name" size="50" required-if="!el.isDeleted"></td>
                        <td><input type="text" ng-model="column.field" size="50" required-if="!el.isDeleted"></td>
                        <td><input type="text" ng-model="column.width" size="5" required-if="!el.isDeleted"></td>
                        <td>
                          <i class="fa fa-trash icon-as-button" title="{{ 'Remove column' | translate }}" ng-click="arrayRemoveElement(table.addColumns, column)"></i>
                          <i class="fa fa-chevron-up icon-as-button" title="{{ 'Move column up (=to the left in the table)' | translate }}" ng-click="arrayMoveElement(table.addColumns, column, -1)"></i>
                          <i class="fa fa-chevron-down icon-as-button" title="{{ 'Move column down (=to the right in the table)' | translate }}" ng-click="arrayMoveElement(table.addColumns, column, 1)"></i>
                          <i class="fa fa-plus icon-as-button" title="{{ 'Add additional column here' | translate }}" ng-click="arrayNewElement(table.addColumns, column)"></i></td>
                      </tr>
                      </tbody>
                    </table> <br>

                    <div>
                      <i class="fa fa-trash icon-as-button" title="{{ 'Remove object table' | translate }}" ng-click="arrayRemoveElement(view.options.tables, table)"></i>
                      <i class="fa fa-chevron-up icon-as-button" title="{{ 'Move object table up (=to the left in view)' | translate }}" ng-click="arrayMoveElement(view.options.tables, table, -1)"></i>
                      <i class="fa fa-chevron-down icon-as-button" title="{{ 'Move object table down (=to the right in view)' | translate }}" ng-click="arrayMoveElement(view.options.tables, table, 1)"></i>
                      <i class="fa fa-plus icon-as-button" title="{{ 'Add new object table here' | translate }}" ng-click="arrayNewElement(view.options.tables, table)"></i>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

          </div>


        </div>

      </div>
    </div>

    <div class="admin-view-details" ng-if="!el.isDeleted && !el.showDetails">
      <h2 ng-class="['no-margin', 'admin-view-element-header-' + el.type]"><i class="fa fa-bars icon-as-button" title="{{ 'Drag and drop here to change order of dashboard elements' | translate }}" ui-tree-handle></i> <i class="fa fa-chevron-right icon-as-button" title="{{ 'Configure dashboard element' | translate }}" ng-click="toggleDetails(el)"></i> <span class="admin-views-view-type">{{el.type | typeToDescription }}</span> {{el.title}} <i class="fa fa-trash icon-as-button" title="{{ 'Remove dashboard element' | translate }}" ng-click="deleteElement(el)"></i></h2>
    </div>

    <div class="admin-view-details" ng-if="el.isDeleted">
      <h2 ng-class="['margin-below', 'admin-view-element-header-' + el.type]"><i class="fa fa-bars icon-as-button make-invisible" title="{{ 'Drag and drop here to change order of dashboard elements' | translate }}" ui-tree-handle></i> <i class="fa fa-chevron-right icon-as-button make-invisible"></i> <span class="admin-views-view-type">{{el.type | typeToDescription }}</span> <s>{{el.title}}</s> <i class="fa fa-undo icon-as-button" title="{{ 'Restore dashboard element' | translate }}" ng-click="restoreElement(el)"></i></h2>
    </div>

  </div>
</div>

  <div class="admin-views-new-element vertical-margins">
    <i class="fa fa-plus" aria-hidden="true"></i> <span translate>Add new:</span> &nbsp;&nbsp;&nbsp;

    <select ng-model="newItem.type">
      <option value="html" translate>HTML</option>
      <option value="iframe" translate>iFrame</option>
      <option value="notes" translate>Notes</option>
      <option value="riskTracker" translate>Risk Tracker Matrix</option>
      <option value="objectExplorer" translate>Object Explorer</option>
      <option value="timeSeries" translate>Time Series Chart</option>
      <option value="stackedBars" translate>Stacked Bar Chart</option>
      <option value="scatterplot" translate>Scatterplot Chart</option>
      <option value="portfolio" translate>Portfolio Chart</option>
      <option value="table" translate>Table</option>
      <option value="tabDivider" translate>Tab Divider</option>
    </select>

    <button type="button" ng-click="addNew()" translate>Add</button>
  </div>

  <div>
    <button ng-click="saveChanges()" ng-disabled="elementsForm.$pristine || !elementsForm.$valid || !hasAccess || isLoading || isProcessing || errMessage" translate>Save changes to dashboard elements</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button ng-click="cancelChanges()" ng-disabled="elementsForm.$pristine || !hasAccess || isLoading || isProcessing" translate>Cancel changes</button>
  </div>

</form>
