<div class="container-fluid css-generator" ng-controller="CssGeneratorCustomController" ng-init="init()">
    <div class="text-right">
        {{'Configuration' | translate}}
        <wizdom365-specific-configuration-picker module="'CssGenerator'"></wizdom365-specific-configuration-picker>
        <span class="saveConfigurationButton">
            <button class="btn btn-primary wide-config-btn"
                    ng-disabled="saving"
                    ng-click="saveTemplate()">
                {{saving ? 'Saving' : 'Save configuration' | translate}}
            </button>
        </span>
    </div>
    <ul class="nav nav-tabs">
        <li role="presentation" data-ng-class="{active: displayMode==1}" ng-click="displayMode = 1"><a href="">{{'Themes' | translate}}</a></li>
        <li role="presentation" data-ng-class="{active: displayMode==2}" ng-click="displayMode = 2"><a href="">{{'Custom areas' | translate}}</a></li>
    </ul>
    <div style="padding:20px; border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;">

        <div ng-show="displayMode == 2">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" ng-show="styles.valueObj['CustomStyle']['AreaItem'].length > 1">
                <div class="panel panel-default" ng-repeat="item in styles.valueObj['CustomStyle']['AreaItem']| wizdom365OrderBy:'@order':'@friendlyName' track by $index" ng-show="item['@friendlyName'].length">
                    <div class="panel-heading" role="tab" id='h_{{$index}}'> <!-- Changed to run by index to get unique toggle IDs -->
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href='#c_{{$index}}' aria-expanded="true" aria-controls="collapseOne">
                                {{item["@friendlyName"]}}
                            </a>
                            <a href="" ng-click="deleteItem($index,styles.valueObj['CustomStyle']['AreaItem'])">
                                <span class="glyphicon glyphicon-trash pull-right"></span>
                            </a>
                        </h4>
                    </div>
                    <div id='c_{{$index}}' class="panel-collapse collapse" role="tabpanel" aria-labelledby='h_{{$index}}'>
                        <div class="panel-body">
                            <div class="row" ng-show="!item['Item'].length">
                                <div class="col-md-12">No rules has been added for this element <a href="" ng-click="editRule({},item,true)"> Click here to add a rule</a></div>
                            </div>
                            <table class="table" ng-show="item['Item'].length">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Title</th>
                                        <th>Property</th>
                                        <th>Type</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="setting in item['Item'] | wizdom365OrderBy:'@order':'@friendlyName' track by $index">
                                        <td>{{$index+1}}</td>
                                        <td>{{setting['@friendlyName']}}</td>
                                        <td>{{setting['@property']}}</td>
                                        <td>{{setting['@setting']}}</td>
                                        <td><a href="" ng-click="editRule(setting,item,false)"><span class="glyphicon glyphicon-pencil"></span></a></td>
                                        <td><a href="" ng-click="deleteItem($index, item['Item'])"><span class="glyphicon glyphicon-trash"></span></a></td>
                                    </tr>
                                </tbody>
                            </table>
                            <button class="btn btn-success pull-right"
                                    ng-show="item['Item'].length"
                                    ng-click="editRule({},item,true)">
                                {{'Create new rule' | translate}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-show="styles.valueObj['CustomStyle']['AreaItem'].length <= 1">
                No custom elements has been added yet
            </div>
            <button class="btn btn-success"
                    ng-click="editCustom({'@friendlyName' : '', Item : [] }, styles.valueObj['CustomStyle'], true)">
                {{'Create Custom element' | translate}}
            </button>
        </div>
        <div ng-show="displayMode == 1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>{{'Themes' | translate}}</strong>
                    <div class="importcssthemes pull-right">
                        <label for="importtheme" class="wide-config-btn"><i class="glyphicon glyphicon-import"></i> Import Theme</label>
                        <input class="hidden" type="file" id="importtheme" onchange="window.openFile(event)" name="importtheme" />
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{'Title' | translate}}</th>
                                <th>{{'Current Theme' | translate}}</th>
                                <th>{{'Edit' | translate}}</th>
                                <th>{{'Copy' | translate}}</th>
                                <th>{{'Delete' | translate }}</th>
                                <th>{{'Export' | translate }}</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Default</td>
                                <td><input type="radio" ng-model="selectedTheme.valueObj['#text']" ng-click="editableTheme = undefined;" name="selectedTheme" value="Default" required /></td>
                                <td></td>
                                <td><a href="" ng-click="copyTheme(styles.valueObj)"><span class="glyphicon glyphicon-copy"></span></a></td>
                                <td></td>
                            </tr>
                            <tr ng-repeat="theme in themes.valueObj['Theme'] track by $index" ng-show="theme != null && theme['@friendlyName']">
                                <td>{{$index+2}}</td>
                                <td>{{theme['@friendlyName'] | translate}}</td>
                                <td><input type="radio" ng-model="$parent.selectedTheme.valueObj['#text']" ng-click="$parent.editableTheme = undefined;" name="selectedTheme" value="{{theme['@unigueId']}}" required /></td>
                                <td><a href="" ng-click="editTheme(theme)"><span class="glyphicon glyphicon-pencil"></span></a></td>
                                <td><a href="" ng-click="copyTheme(theme)"><span class="glyphicon glyphicon-copy"></span></a></td>
                                <td><a href="" ng-click="deleteItem($index, themes.valueObj.Theme)"><span class="glyphicon glyphicon-trash"></span></a></td>
                                <td><a href="" ng-click="exportToFile(theme)"><span class="glyphicon glyphicon-export"></span></a></td>

                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>

            <div ng-show="editableTheme">
                <div class="panel panel-default">
                    <div class="panel-heading"><strong>{{'Edit' | translate}} <span ng-bind="editableTheme['@friendlyName']"></span></strong></div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <form role="form" class="form-horizontal" ng-hide="editableTheme['@friendlyName'] == 'Default'">
                                    <div>
                                        <label class="control-label">{{'Title' | translate}}</label>
                                        <div class="wt-paddingTopSmall"><input type="text" class="form-control" ng-model="editableTheme['@friendlyName']"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div ng-repeat="(key, area) in editableTheme | wizdom365OrderBy:'@order':'@friendlyName'" ng-show="area['AreaItem'].length">
                            <h4>{{area['@friendlyName'] | translate}}</h4>
                            <div class="row" ng-hide="area['AreaItem'].length > 1">
                                <div class="col-md-12">No element has been added for this area</div>
                            </div>
                            <div class="panel-group" id="accordion_{{$index}}" role="tablist" aria-multiselectable="false" ng-show="area['AreaItem'].length > 1">
                                <div class="panel panel-default" ng-repeat="item in area['AreaItem'] | wizdom365OrderBy:'@order':'@friendlyName' track by $index" ng-show="item['@friendlyName'].length">
                                    <div class="panel-heading" role="tab" id='h_{{$index}}_{{removeSpaces(item["@friendlyName"])}}'>
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion_{{$parent.$index}}" href='#c_{{$index}}_{{removeSpaces(item["@friendlyName"])}}' aria-expanded="true" aria-controls="collapseOne">
                                                {{item["@friendlyName"] | translate}}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id='c_{{$index}}_{{removeSpaces(item["@friendlyName"])}}' class="panel-collapse collapse" role="tabpanel" aria-labelledby='h_{{$$index}}_{{removeSpaces(item["@friendlyName"])}}'>
                                        <div class="panel-body">
                                            <div class="row" ng-show="!item['Item'].length">
                                                <div class="col-md-12">No rules has been added for this element</div>
                                            </div>

                                            <ul class="list-group">
                                                <li class="list-group-item" ng-repeat="settings in item['Item'] | wizdom365OrderBy:'@order':'@friendlyName' track by $index">
                                                    <div class="row">
                                                        <div class="col-md-6"><h5>{{settings["@friendlyName"]}}</h5></div>
                                                        <div class="col-md-6" wizdom-include="getSettingTemplate(settings);" ng-if="settings['@setting']"></div>
                                                    </div>
                                                </li>
                                            </ul>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>

    </div>
</div>