<div class="excelbook" style="width:100%; height: 100%; position: relative" (keydown)="hidePopup($event)">
    <div class="row title"><a href="default.htm">&lt; Return to sample home</a></div>
    <!-- the ribbon markup -->
    <div class="row ribbon-container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group">
                    <div class="btn btn-default btn-large no-border">
                        <span class="glyphicon glyphicon-open"></span>
                        <span class="text">Load</span>
                        <input type="file" class="upload"
                               (change)="importExcel($event)"
                               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel.sheet.macroEnabled.12" />
                    </div>
                    <button class="btn btn-default btn-large no-border" (click)="exportExcel()">
                        <span class="glyphicon glyphicon-save"></span>
                        <span class="text">Save</span>
                    </button>
                    <button class="btn btn-default btn-large no-border" (click)="newFile()">
                        <span class="glyphicon glyphicon-file"></span>
                        <span class="text">New</span>
                    </button>
                </div>
            </div>
            <div class="panel-footer text-center">File</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group btn-group-h">
                    <button type="button" class="btn btn-default btn-small" title="Undo" [disabled]="!(undoStack && undoStack.canUndo)" (click)="undo()">
                        <span class="glyphicon glyphicon-share-alt flip"></span>
                        <span class="text">Undo</span>
                    </button>
                    <button type="button" class="btn btn-default btn-small" title="Redo" [disabled]="!(undoStack && undoStack.canRedo)" (click)="redo()">
                        <span class="glyphicon glyphicon-share-alt"></span>
                        <span class="text">Redo</span>
                    </button>
                </div>
            </div>
            <div class="panel-footer text-center">Undo / Redo</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group-vertical">
                    <wj-combo-box #cboFontName
                                  style="width:120px"
                                  [itemsSource]="fonts"
                                  [selectedIndex]="10"
                                  [displayMemberPath]="'name'"
                                  [selectedValuePath]="'value'"
                                  [isEditable]="false"
                                  (initialized)="cboFontNameInit(cboFontName)">
                    </wj-combo-box>
                    <wj-combo-box #cboFontSize
                                  style="width:60px"
                                  [itemsSource]="fontSizeList"
                                  [selectedIndex]="5"
                                  [displayMemberPath]="'name'"
                                  [selectedValuePath]="'value'"
                                  [isEditable]="false"
                                  (initialized)="cboFontSizeInit(cboFontSize)">
                    </wj-combo-box>
                    <div class="btn-group btn-group-h">
                        <button type="button" class="btn btn-default btn-small {{selectionFormatState.isBold ? 'active' : ''}}" title="Bold" (click)="applyBoldStyle()">
                            <span class="glyphicon glyphicon-bold"></span>
                            <span class="text">Bold</span>
                        </button>
                        <button type="button" class="btn btn-default btn-small {{selectionFormatState.isItalic ? 'active' : ''}}" title="Italic" (click)="applyItalicStyle()">
                            <span class="glyphicon glyphicon-italic"></span>
                            <span class="text">Italic</span>
                        </button>
                        <button type="button" class="btn btn-default btn-small {{selectionFormatState.isUnderline ? 'active' : ''}}" title="Underline" (click)="applyUnderlineStyle()">
                            <span class="underline ribbon-icon"></span>
                            <span class="text">Underline</span>
                        </button>
                        <button type="button" class="btn btn-default btn-small" title="Fill Color" (click)="showColorPicker($event, true)">
                            <span class="glyphicon glyphicon-text-background"></span>
                            <span class="text">Fill</span>
                        </button>
                        <button type="button" class="btn btn-default btn-small" title="Font Color" (click)="showColorPicker($event, false)">
                            <span class="glyphicon glyphicon-text-color"></span>
                            <span class="text">Font</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-footer text-center">Font</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group-vertical">
                    <div class="btn-group btn-group-h">
                        <button type="button" class="btn btn-default btn-small {{selectionFormatState.textAlign === 'left' ? 'active' : ''}}" title="Left" (click)="applyCellTextAlign('left')">
                            <span class="glyphicon glyphicon-align-left"></span>
                            <span class="text">Left</span>
                        </button>
                        <button type="button" class="btn btn-default btn-small {{selectionFormatState.textAlign === 'center' ? 'active' : ''}}" title="Center" (click)="applyCellTextAlign('center')">
                            <span class="glyphicon glyphicon-align-center"></span>
                            <span class="text">Center</span>
                        </button>
                        <button type="button" class="btn btn-default btn-small {{selectionFormatState.textAlign === 'right' ? 'active' : ''}}" title="Right" (click)="applyCellTextAlign('right')">
                            <span class="glyphicon glyphicon-align-right"></span>
                            <span class="text">Right</span>
                        </button>

                        <button type="button" class="btn btn-default btn-small" title="{{selectionFormatState.isMergedCell ? 'UnMerge' : 'Merge'}}" [disabled]="selectedTable != null" (click)="mergeCells()" style="clear:both;">
                            <span class="glyphicon glyphicon-th-large"></span>
                            <span class="text">merge</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-footer text-center">Alignment</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-large no-border" (click)="freeze()">
                        <span class="glyphicon glyphicon-list"></span>
                        <span class="text">{{isFrozen ? 'Unfreeze' : 'Freeze'}}</span>
                    </button>
                </div>
            </div>
            <div class="panel-footer text-center">View</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <button type="button" class="btn btn-default btn-large no-border" data-toggle="modal" data-target="#excelStyle">
                    <span class="glyphicon glyphicon-pencil"></span>
                    <span class="text">Styles</span>
                </button>
            </div>
            <div class="panel-footer text-center">Styles</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-large no-border" data-toggle="modal" data-target="#excelSort">
                        <span class="glyphicon glyphicon-sort-by-attributes"></span>
                        <span class="text">Sort</span>
                    </button>
                    <button type="button" class="btn btn-default btn-large no-border" (click)="showFilter()">
                        <span class="glyphicon glyphicon-filter"></span>
                        <span class="text">Filter</span>
                    </button>
                </div>
            </div>
            <div class="panel-footer text-center">Editing</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-large no-border" (click)="showChartTypes($event)">
                        <span class="glyphicon glyphicon-stats"></span>
                        <span class="text">Insert Chart</span>
                    </button>
                </div>
            </div>
            <div class="panel-footer text-center">Charts</div>
        </div>
        <div class="panel panel-default" *ngIf="selectedTable != null">
            <div class="panel-body">
                <div class="btn-group-vertical form-check">
                    <div>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showHeaderRow">
                            Header Row
                        </label>
                    </div>
                    <div>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showTotalRow">
                            Total Row
                        </label>
                    </div>
                    <div>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showBandedRows">
                            Banded Rows
                        </label>
                    </div>
                </div>
                <div class="btn-group-vertical form-check">
                    <div>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.alterFirstColumn">
                            First Column
                        </label>
                    </div>
                    <div>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.alterLastColumn">
                            Last Column
                        </label>
                    </div>
                    <div>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showBandedColumns">
                            Banded Columns
                        </label>
                    </div>
                </div>
                <div class="btn-group-vertical form-check" style="display:none">
                    <div>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox">
                            Filter Button
                        </label>
                    </div>
                </div>
                <div class="btn-group-vertical">
                    <wj-combo-box #cboTableStyles
                        [itemsSource]="tableStyleNames"
                        [isEditable]="false"
                        (initialized)="cboTableStylesInit(cboTableStyles)">
                    </wj-combo-box>
                </div>
            </div>
            <div class="panel-footer text-center">Table Style Options</div>
        </div>
    </div>
    <!-- the boxes -->
    <div class="top-boxes row">
        <div class="col-sm-1 col-xs-2 position">{{selection.position}}</div>
        <div class="col-sm-1 col-xs-2 fn-label text-right">fx</div>
        <div class="col-sm-10 col-xs-8 fn-box">
            <input type="text" class="form-control" [(ngModel)]="selection.content" (keydown)="updateSelectionContent($event)" (keyup)="showFunctionList($event)" (focus)="pendingCellEditAction()" />
        </div>
    </div>
    <!-- the grid -->
    <div class="row" id="flexsheetContainer">
        <wj-flex-sheet #flexSheet (initialized)="flexInitialized(flexSheet)">
            <wj-sheet name="Country" [itemsSource]="data"></wj-sheet>
            <wj-sheet name="Report" [rowCount]="25" [columnCount]="13"></wj-sheet>
            <wj-sheet name="Formulas" [rowCount]="530" [columnCount]="12"></wj-sheet>
            <wj-sheet name="Table" [rowCount]="40" [columnCount]="13"></wj-sheet>
        </wj-flex-sheet>
    </div>

    <!-- the status bar -->
    <div class="row status text-right" style="padding-right:10px">Ready</div>
</div>
<wj-color-picker style="display:none;position:fixed;z-index:100" #colorPicker (initialized)="colorPickerInit(colorPicker)"></wj-color-picker>
<wj-list-box style="display:none;position:fixed;z-index:100" #lbChartTypes [itemsSource]="chartTypes" (initialized)="lbChartTypesInit(lbChartTypes)"></wj-list-box>
<!-- sort Dialog -->
<div id="excelSort" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Sort</h4>
            </div>
            <div class="modal-body">
                <div class="row well well-lg">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" (click)="addSortLevel()">
                            <span class="glyphicon glyphicon-plus-sign"></span>Add Level
                        </button>
                        <button type="button" class="btn btn-default" (click)="deleteSortLevel()">
                            <span class="glyphicon glyphicon-remove-sign"></span>Delete Level
                        </button>
                        <button type="button" class="btn btn-default" (click)="copySortLevel()">
                            <span class="glyphicon glyphicon-copy"></span>Copy Level
                        </button>
                    </div>
                    <div class="btn-group">
                        <button id="moveup" type="button"
                                class="btn btn-default"
                                [disabled]="sortManager && sortManager.sortDescriptions.currentPosition <= 0"
                                (click)="moveSortLevel(-1)">
                            <span class="glyphicon glyphicon-arrow-up"></span>
                        </button>
                        <button id="movedown" type="button"
                                class="btn btn-default"
                                [disabled]="sortManager && sortManager.sortDescriptions.currentPosition >= sortManager.sortDescriptions.itemCount - 1"
                                (click)="moveSortLevel(1)">
                            <span class="glyphicon glyphicon-arrow-down"></span>
                        </button>
                    </div>
                </div>
                <br />
                <div class="row" id="sortTable">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th class="text-center">Column</th>
                                <th class="text-center">Order</th>
                            </tr>
                        </thead>
                        <tbody *ngIf="sortManager">
                            <tr *ngFor="let sortItem of sortManager.sortDescriptions.items"
                                (click)="sortManager.sortDescriptions.moveCurrentTo(sortItem)"
                                [ngClass]="{success: sortItem === sortManager.sortDescriptions.currentItem}">
                                <td>
                                    <select class="form-control" (change)="applySortColumnIndex($event, sortItem)">
                                        <option value=-1></option>
                                        <option *ngFor="let column of columns; let i = index" [selected]="i === sortItem.columnIndex"
                                                value={{i}}>
                                            {{column}}
                                        </option>
                                    </select>
                                </td>
                                <td>
                                    <select class="form-control" (change)="applySortAscending($event, sortItem)">
                                        <option [value]="true" [selected]="sortItem.ascending">Ascending</option>
                                        <option [value]="false" [selected]="!sortItem.ascending">Descending</option>
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="commitSort()">OK</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" (click)="cancelSort()">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- cell style Dialog -->
<div id="excelStyle" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Styles</h4>
            </div>
            <div class="modal-body">
                <div class="well well-sm">
                    <h4 class="text-primary">Good, bad and neutral</h4>
                    <div class="btn-group btn-group-justified">
                        <div class="btn-group">
                            <button type="button" data-dismiss="modal" class="btn btn-default" (mouseover)="applyCellStyle('normal')" (click)="applyCellStyle()" (mouseleave)="applyCellStyle('', true)">
                                <span>Normal</span>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" data-dismiss="modal" class="btn btn-default bad-style" (mouseover)="applyCellStyle('bad')" (click)="applyCellStyle()" (mouseleave)="applyCellStyle('', true)">
                                <span>Bad</span>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" data-dismiss="modal" class="btn btn-default good-style" (mouseover)="applyCellStyle('good')" (click)="applyCellStyle()" (mouseleave)="applyCellStyle('', true)">
                                <span>Good</span>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" data-dismiss="modal" class="btn btn-default neutral-style" (mouseover)="applyCellStyle('neutral')" (click)="applyCellStyle()" (mouseleave)="applyCellStyle('', true)">
                                <span>Neutral</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>