<p class="padding text-center" style="margin-bottom: 0;" localize="tip_lead_developer"></p>

<div class="item-list">
    <div class="item" style="height: 270px; margin-top: 0;">
        <component
                class="hover"
                component="module"
                ng-disabled="!module.isResearched"
                show-price="!module.isResearched"
                show-inventory-amount="true"
                checked="module.active"
                ng-repeat="module in ctrl.modules | orderBy: 'order' track by module.name"
                ng-click="ctrl.clickModule(module)"/>
    </div>

    <div class="item flex-row" style="height: 210px;" ng-if="ctrl.task != null">
        <div class="flex2 flex-column flex-super-center">
            <component component="ctrl.task.module" disable-popover="true"></component>
            <h4 class="text-center" localize="{{ ctrl.task.module.name }}"></h4>
        </div>
        <div class="flex3 flex-column flex-super-center">
            <div class="progressBar big" style="width: 100%;">
                <div class="indicator" style="width: {{ ctrl.taskProgress }}%">
                    <span>{{ ctrl.taskProgress }}%</span>
                </div>
            </div>

            <div class="margin-top" style="width: 100%;">
                <div>
                    <component component="stack.component"
                               ng-repeat="stack in ctrl.activeTaskStacks track by stack.component.name"
                               class="small"
                               disable-popover="true"
                               ng-disabled="ctrl.isAwaiting && !stack.isAvailableInInventory"
                               always-enabled="true"
                               show-inventory-amount="true"
                               stack-amount="1">
                    </component>
                </div>
                <p class="color-red margin-top text-center animated infinite pulse" ng-if="ctrl.isAwaiting" localize="missing_requirements" disable-animate></p>
        </div>
    </div>
    <div class="flex2 flex-super-center">
        <table class="text-center">
            <tr>
                <td localize="auto_repeat"></td>
                <td>
                    <div class="toggle-switch" ng-click="ctrl.clickAutoRepeat()"
                         ng-class="{ active: ctrl.task.autoRepeat }">
                        <span></span>
                    </div>
                </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button class="red" ng-click="ctrl.cancel()" localize="cancel"></button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>


