<div class="modal-header editExtension-notSelection">
    <button type="button" id="btnX" ng-click="cancel()" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">{{ 'EditExtensionWindow_Title' | translate }}</h4>
</div>
<div class="modal-body editExtension-body editExtension-notSelection">
    <div class="input-group">
        <div class="radio">
            <label>
                <input type="radio" name="extensionType" ng-model="extensionType" value="Chart">
                {{ 'Chart_Extension' | translate }}
            </label>
        </div>
        <div ng-class="checkVectorMapCompatible() ? 'radio':'radio disabled' ">
            <label>
                <input type="radio" name="extensionType" ng-model="extensionType" value="VectorMap">
                {{ 'VectorMap_Extension' | translate}}
            </label>
        </div>
    </div>


    <!--<div class="btn-group default-dropdown" ng-show="currentPage?true:false">
        <button type="button" class="btn btn-default dropdown-toggle appToolbar-imageButton btn-toggle-single"
                data-toggle="dropdown"
                title="{{ 'DockExtension_Chart' | translate }}"
                aria aria-haspopup="true"
                aria-expanded="false">
            <div class="appToolbar-button-contentImage imageLibary_chart"></div>
        </button>
        <ul class="dropdown-menu">
            <li ng-click="changeLayoutDataViewer(0)">
                <a>{{ 'DockExtension_ChartNo' | translate }}</a>
            </li>
            <li ng-click="changeLayoutDataViewer(1)">
                <a>{{ 'DockExtension_ChartaboveGrid' | translate }}</a>
            </li>
            <li ng-click="changeLayoutDataViewer(2)">
                <a>{{ 'DockExtension_ChartbelowGrid' | translate }}</a>
            </li>
            <li ng-click="changeLayoutDataViewer(3)">
                <a>{{ 'DockExtension_CharttorightofGrid' | translate }}</a>
            </li>
            <li ng-click="changeLayoutDataViewer(4)">
                <a>{{ 'DockExtension_CharttoleftofGrid' | translate }}</a>
            </li>
            <li ng-click="changeLayoutDataViewer(5)">
                <a>{{ 'DockExtension_ChartOnly' | translate }}</a>
            </li>
        </ul>
    </div>-->
    <div>
        <span>{{ 'EditExtensionWindow_ExtensionPosition' | translate }}</span>
        <div class="btn-group default-dropdown editExtension-dropdown" ng-show="currentPage? true: false">
            <button type="button" class="btn btn-default dropdown-toggle btn-toggle-withcarret" data-toggle="dropdown">{{ layoutModes[layout] | translate }}</button>
            <button type="button" class="btn btn-default dropdown-toggle caret-btn" data-toggle="dropdown" aria-expanded="false">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li ng-repeat="layoutMode in layoutModes" ng-class="layout===$index?'active':''" ng-click="changeLayout($index)">
                    <a>{{ layoutMode | translate }}</a>
                </li>
            </ul>
        </div>
    </div>
    <div ng-class="!layout ? 'disabled':'' " ng-show="extensionType==='Chart'">
        <div class="editExtension-legendPanel">
            <div class="editChart-legendVisibility checkbox">
                <label>
                    <input type="checkbox" ng-model="legendIsVisible">
                    {{ 'EditExtensionWindow_ShowLegend' | translate }}
                </label>
            </div>
            <div ng-class="!legendIsVisible ? 'disabled':'' ">
                <span>{{ 'EditExtensionWindow_LegendPosition' | translate }}</span>
                <div class="btn-group default-dropdown editExtension-dropdown" ng-show="currentPage? true: false">
                    <button type="button" class="btn btn-default dropdown-toggle btn-toggle-withcarret" data-toggle="dropdown">{{ legendTypes[currentLegendType] | translate }}</button>
                    <button type="button" class="btn btn-default dropdown-toggle caret-btn" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="legendType in legendTypes" ng-class="currentLegendType===$index?'active':''" ng-click="setLegend($index)">
                            <a> {{ legendType | translate }} </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="currentArgumentVisibility">
                {{ 'EditExtensionWindow_ShowArgument' | translate }}
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="currentTooltipVisibility">
                {{ 'EditExtensionWindow_ShowTooltip' | translate }}
            </label>
        </div>
        <div class="editExtension-seriesSettings">
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="autogenerateSeries">
                    {{ 'EditExtensionWindow_Autogeneration' | translate }}
                </label>
            </div>
            <div ng-class="!autogenerateSeries ? 'disabled':'' ">
                <span>
                    {{ 'EditExtensionWindow_AutogenerationChartType' | translate }}
                </span>
                <div class="btn-group default-dropdown editExtension-dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle btn-toggle-withcarret" data-toggle="dropdown">{{ chartTypes[currentChartType] | translate }}</button>
                    <button type="button" class="btn btn-default dropdown-toggle caret-btn" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="chartType in chartTypes" ng-class="currentChartType===$index?'active':''" ng-click="setChartType($index)">
                            <a>{{ chartType | translate }}</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="editExtension-seriesPanel" ng-class="autogenerateSeries ? 'disabled':'' ">

                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" ng-click="addSeria()"> {{ 'EditExtensionWindow_Add' | translate }}</button>
                    <button type="button" class="btn btn-default" ng-class="!selectedSeria ? 'disabled':'' " ng-click="deleteSeria()"> {{ 'EditExtensionWindow_Delete' | translate }}</button>
                    <button type="button" class="btn btn-default" ng-class="!selectedSeria ? 'disabled':'' " ng-click="editSeria()"> {{ 'EditExtensionWindow_Edit' | translate }}</button>
                </div>
                <ul class="list-group editExtension-seriesList panel panel-default">
                    <li ng-repeat="seria in series" class="editExtension-seria list-group-item" ng-class="selectedSeria === seria ? 'active':'' " ng-click="selectSeria(seria)">
                        <div>{{ 'EditExtensionWindow_ColumnIndex' | translate }} {{ seria.columnIndex }}</div>
                        <div>{{ 'EditExtensionWindow_DiagramType' | translate }} {{ chartTypes[seria.diagramType] | translate }}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div ng-show="extensionType==='VectorMap'">
        <div ng-class="rows.length === 0 ? 'disabled': ''">
            <span>{{ 'EditExtensionWindow_RowSelection' | translate }}</span>
            <div class="btn-group default-dropdown editExtension-dropdown" ng-show="currentPage? true: false">
                <button type="button" class="btn btn-default dropdown-toggle btn-toggle-withcarret" data-toggle="dropdown">{{ currentRow }}</button>
                <button type="button" class="btn btn-default dropdown-toggle caret-btn" data-toggle="dropdown" aria-expanded="false">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu editExtension-dropdown-menu" role="menu">
                    <li ng-repeat="row in rows track by $index" ng-class="currentRow===row?'active':''" ng-click="changeRow(row)">
                        <a>{{ row }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div ng-class="columns.length === 0 ? 'disabled': ''">
            <span>{{ 'EditExtensionWindow_ColumnSelection' | translate }}</span>
            <div class="btn-group default-dropdown editExtension-dropdown " ng-show="currentPage? true: false">
                <button type="button" class="btn btn-default dropdown-toggle btn-toggle-withcarret" data-toggle="dropdown">{{ columns[currentColumn] }}</button>
                <button type="button" class="btn btn-default dropdown-toggle caret-btn" data-toggle="dropdown" aria-expanded="false">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu editExtension-dropdown-menu" role="menu">
                    <li ng-repeat="column in columns track by $index" ng-class="columns[currentColumn]===column?'active':''" ng-click="changeColumn($index)">
                        <a>{{ column }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="detalization">
                {{ 'EditExtensionWindow_Detalization' | translate }}
            </label>
        </div>
    </div>
</div>

<div class="modal-footer editExtension-notSelection">
    <button class="btn btn-default" ng-click="ok()">
        <span>{{ 'DialogButton_Ok' | translate }}</span>
    </button>
    <button class="btn btn-default" ng-click="cancel()">
        <span>{{ 'DialogButton_Cancel' | translate }}</span>
    </button>
</div>