<div class="item-list" style="height: 570px; overflow: auto;">
    <p class="padding text-center dimmed" localize="framework_description"></p>
    <div>
        <table style="width: auto; margin: 5px auto auto auto;"
               uib-tooltip="{{ GetLocalized('auto_repeat_tip') }}" ng-click="ctrl.clickAutoRepeat();">
            <tr>
                <td localize="auto_repeat"></td>
                <td>
                    <div class="toggle-switch" ng-class="{ active: selectedWorkstation.employee.task.autoRepeat }">
                        <span></span>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <div class="item" ng-repeat="framework in ctrl.frameworks track by framework.name" ng-class="{ active: framework.completed }">
        <h3  style="text-align: left;">
            <span localize="{{ framework.name }}"></span>
            <span class="pull-right" localize="research_status" localize-data-current="{{ framework.currentResearchPoints }}" localize-data-total="{{ framework.requiredResearchPoints }}"></span>
        </h3>
        <div style="display: flex;">
            <div class="flex5">
                <table class="medium">
                    <tr>
                        <td style="width: 300px;" localize="max_features"></td>
                        <td class="text-bold">{{ framework.maxFeatures }}</td>
                    </tr>
                    <tr>
                        <td localize="max_feature_level"></td>
                        <td class="text-bold">{{ framework.maxFeatureLevel }}</td>
                    </tr>
                    <tr>
                        <td localize="license_cost"></td>
                        <td class="text-bold">{{ framework.licenseCost | currency }}</td>
                    </tr>
                </table>
            </div>
            <div class="flex1" style="display: flex; align-items: center;">
                <div class="flex1" style="display: flex; align-items: center;">
                    <div class="progressBar" style="width: 180px;" ng-if="framework.completed || framework.selected">
                        <div class="indicator" style="width: {{ framework.completed ? 100 : ctrl.taskProgress}}%">
                            <span ng-if="!framework.completed">{{ ctrl.taskProgress }}%</span>
                            <span ng-if="framework.completed">100%</span>
                        </div>
                    </div>
                    <button class="blue" ng-if="!framework.completed && !framework.selected" ng-click="ctrl.research(framework)" localize="Research"></button>
                </div>
            </div>

        </div>

    </div>
</div>