{% load i18n %}

<!-- ko if: !loading() -->
<div class="etl-manager-container">
    <div class="etl-manager-tab-container">
        <div class="etl-manager-tabs" style="height: 50px;">
            <div class="etl-manager-tab" data-bind="click: function(){activeTab('start')}, css: {active: activeTab() === 'start', 'disabled': false}, text: 'Start'"></div>
            <div class="etl-manager-tab" data-bind="click: function(){activeTab('details')}, css: {active: activeTab() === 'details', 'disabled': !selectedModule()}, text: 'Task Details'"></div>
            <div class="etl-manager-tab" data-bind="click: function(){activeTab('import');}, css: {active: activeTab() === 'import', 'disabled': false}, text: 'Task Status'"></div>
            <div class="etl-manager-tab" data-bind="click: function(){activeTab('export')}, css: {active: activeTab() === 'export', 'disabled': true}, text: 'Templates'"></div>
        </div>
    </div>
    <div data-bind="if: activeTab() === 'start'">
        <div class="etl-manager-filter-container">
            <div class="etl-manager-filter-button" data-bind="click: function() { activeModules('import'); }, css: {active: activeModules() === 'import' }">
                <span data-bind="text: $root.translations.import"></span>
            </div>
            <div class="etl-manager-filter-button" data-bind="click: function() { activeModules('edit'); }, css: {active: activeModules() === 'edit' }">
                <span data-bind="text: $root.translations.edit"></span>
            </div>
            <div class="etl-manager-filter-button" data-bind="click: function() { activeModules('export'); }, css: {active: activeModules() === 'export' }">
                <span data-bind="text: $root.translations.export"></span>
            </div>
            <input class="etl-manager-filter-input etl-model-filter" type="text" data-bind="attr: {placeholder: $root.translations.filterModules + '...'}, textInput: moduleSearchString">
        </div>
        <!-- ko ifnot: loading() -->
        <div class="workflow-select-plugin">
            <div class="workflow-select-card-container">
                <!-- ko foreach: {data: etlModules, as: 'etlmodule', noChildContext: true} -->
                    <!-- ko if: activeModules() == 'import' && (!moduleSearchString() || !!moduleSearchString() && etlmodule.name.toLowerCase().includes(moduleSearchString().toLowerCase()) ) -->
                    <a href="#" data-bind="if: etlmodule.etl_type === 'import', click: function() { selectModule(etlmodule) }">
                        <div data-bind="style: {'background-color': etlmodule.config.bgColor}" class="workflow-select-card">
                            <h4 class="workflow-select-title" data-bind="text: etlmodule.name"></h4>
                            <div data-bind="style: {'background-color': etlmodule.config.circleColor}" class="workflow-select-wf-circle">
                                <span><i data-bind="attr:{class: ('fa '+etlmodule.icon +' workflow-select-wf-icon')}"></i></span>
                            </div>
                            <p data-bind="text: etlmodule.description" class="workflow-select-desc"></p>
                        </div>
                    </a>
                    <!-- /ko -->
                    <!-- ko if: activeModules() == 'edit' && (!moduleSearchString() || !!moduleSearchString() && etlmodule.name.toLowerCase().includes(moduleSearchString().toLowerCase()) ) -->
                    <a href="#" data-bind="if: etlmodule.etl_type === 'edit', click: function() { selectModule(etlmodule) }">
                        <div data-bind="style: {'background-color': etlmodule.config.bgColor}" class="workflow-select-card">
                            <h4 class="workflow-select-title" data-bind="text: etlmodule.name"></h4>
                            <div data-bind="style: {'background-color': etlmodule.config.circleColor}" class="workflow-select-wf-circle">
                                <span><i data-bind="attr:{class: ('fa '+etlmodule.icon +' workflow-select-wf-icon')}"></i></span>
                            </div>
                            <p data-bind="text: etlmodule.description" class="workflow-select-desc"></p>
                        </div>
                    </a>
                    <!-- /ko -->
                    <!-- ko if: activeModules() == 'export' && (!moduleSearchString() || !!moduleSearchString() && etlmodule.name.toLowerCase().includes(moduleSearchString().toLowerCase()) )-->
                    <a href="#" data-bind="if: etlmodule.etl_type === 'export', click: function() { selectModule(etlmodule) }">
                        <div data-bind="style: {'background-color': etlmodule.config.bgColor}" class="workflow-select-card">
                            <h4 class="workflow-select-title" data-bind="text: etlmodule.name"></h4>
                            <div data-bind="style: {'background-color': etlmodule.config.circleColor}" class="workflow-select-wf-circle">
                                <span><i data-bind="attr:{class: ('fa '+etlmodule.icon +' workflow-select-wf-icon')}"></i></span>
                            </div>
                            <p data-bind="text: etlmodule.description" class="workflow-select-desc"></p>
                        </div>
                    </a>
                    <!-- /ko -->
                <!-- /ko -->
            </div>
        </div>
        <!-- /ko -->
    </div>
    <div style="height:100%" data-bind="if: activeTab() === 'details'">
        <!-- ko if: selectedModule() -->
        <div style="width: 100%; height: inherit">
            <div style="height: inherit;">
                <div style="height: inherit;" data-bind="component: {
                    name: selectedModule().componentname,
                    params: {
                                alert: alert,
                                state: 'details',
                                activeTab: activeTab,
                                ...selectedModule()
                            }
                }"></div>
            </div>
        </div>
        <!-- /ko -->
    </div>
    <div data-bind="if: activeTab() === 'import'">
        <div class="etl-module-status-container">
            <div class="etl-module-preview-container" style="display: inline-flex; flex-direction: row;">
                <div class="etl-module-status">
                    <div class="etl-manager-status-filter-container">
                        <input class="etl-manager-filter-input" type="text" data-bind="attr:{placeholder: $root.translations.filterTasks}, textInput: taskSearchString">
                    </div>

                    <div class="etl-jobs-container" data-bind="foreach: {data: loadEvents, as: 'event'}">
                        <!-- ko if: !$parent.taskSearchString() || event.etl_module.name.toLowerCase().includes($parent.taskSearchString().toLowerCase()) || $parent.formatUserName(event.user).toLowerCase().includes($parent.taskSearchString().toLowerCase()) -->
                       
                        <div class="etl-job" data-bind="css: {'selected': event.loadid == $parent.selectedLoadEvent()?.loadid}">
                            <div class="etl-job-metadata" data-bind="click: function(){$parent.selectedLoadEvent(event)}" style="padding: 10px 15px; flex-direction: column; justify-content: space-between; cursor: pointer; height: 85px;">
                                <div>
                                    <div data-bind="text: event.etl_module.name" style="font-size: 15px; color: rgb(4, 4, 45)"></div>
                                </div>
                                <div style="display: flex; flex-direction: row; justify-content: space-between;">
                                    <div>
                                        <div data-bind="text: $parent.formatUserName(event.user)"></div>
                                        <div>
                                            <span data-bind="text: $root.translations.start + ': '"></span>
                                            <span data-bind="text: $parent.formatTime(event.load_start_time)"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="etl-job-task-bar">
                                <div class="task">
                                    <!-- ko if: (event.status == "completed" || event.status == "indexed" ) && event.etl_module.reversible -->
                                    <a data-bind="click: function() { $parent.reverseTransactions(event, $root.translations.warning, $root.translations.etlReverseWarningMessage)}">
                                        <span data-bind="text: $root.translations.undoImport"></span>
                                    </a>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "unloaded" || event.status == "failed" || event.status == "cancelled" -->
                                    <a data-bind="click: function() { $parent.cleanLoadEvent(event.loadid) }">
                                        <span data-bind="text: $root.translations.removeFromHistory"></span>
                                    </a>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "running" -->
                                    <a data-bind="click: function() { $parent.stopEtl(event.loadid)}">
                                        <span data-bind="text: $root.translations.stopEtl"></span>
                                    </a>
                                    <!-- /ko -->
                                </div>
                                <div class="status">
                                    <!-- ko if: event.status == "completed" -->
                                    <button class="btn btn-warning" style="width:150px;">
                                        <span data-bind="text: $root.translations.indexing"></span>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "validated" -->
                                    <button class="btn btn-warning" style="width:150px;">
                                        <span data-bind="text: $root.translations.running"></span>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "indexed" -->
                                    <button class="btn btn-success" style="width:150px;">
                                        <span data-bind="text: $root.translations.completed"></span>
                                        <i class="fa fa-spin fa-spinner" data-bind="visible: event.loading()"></i>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "unindexed" -->
                                    <button class="btn btn-success" style="width:150px;">
                                        <span data-bind="text: $root.translations.loadedButUnindexed"></span>
                                        <i class="fa fa-spin fa-spinner" data-bind="visible: event.loading()"></i>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "failed" -->
                                    <button class="btn btn-danger" style="width:150px;">
                                        <span data-bind="text: $root.translations.failed"></span>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "running" -->
                                    <button class="btn btn-warning" style="width:150px;">
                                        <span data-bind="text: $root.translations.validating"></span>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "reversing" -->
                                    <button class="btn btn-warning" style="width:150px;">
                                        <span data-bind="text: $root.translations.unloading"></span>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "unloaded" -->
                                    <button class="btn btn-success" style="width:150px;">
                                        <span data-bind="text: $root.translations.unloaded"></span>
                                    </button>
                                    <!-- /ko -->
                                    <!-- ko if: event.status == "cancelled" -->
                                    <button class="btn btn-success" style="width:150px;">
                                        <span data-bind="text: $root.translations.cancelled"></span>
                                    </button>
                                    <!-- /ko -->
                                </div>
                            </div>
                        </div>
                        
                        <!-- /ko -->
                    </div>

                    <div style="height:50px; background: #f4f4f4; border-top: 1px solid #ddd;">
                        <div id="paginator" data-bind="with: paginator">
                            <div class="text-center">
                                <ul class="pagination" style="margin-top: 8px;">
                                    <li><a data-bind="css: {'disabled': !has_previous}, click: $parent.newPage.bind($parent, previous_page_number)" href="#">«</a></li>
                                    <!-- ko foreach: { data: pages, as: 'page' } -->
                                        <!-- ko if: page -->
                                        <li class="page" data-bind="click: $parents[1].newPage.bind($parents[1]), css: {'current active': (page == $parent.current_page)}">
                                            <a href="#" data-bind="text: page, attr:{'data-page':page}"></a>
                                        </li>
                                        <!-- /ko -->
                                        <!-- ko ifnot: page -->
                                        <li class="disabled"><a href="#">...</a></li>
                                        <!-- /ko -->
                                    <!-- /ko -->
                                    <li><a data-bind="css: {'disabled': !has_next}, click: $parent.newPage.bind($parent, next_page_number)" href="#">»</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="etl-module-preview">
                    <div class="etl-module-info" data-bind="if: selectedLoadEvent()">
                        <div class="" data-bind="component: {
                            name: selectedLoadEvent().etl_module.componentname,
                            params: {
                                        state: 'status',
                                        load_details: selectedLoadEvent().load_details,
                                        ...selectedModule(),
                                        selectedLoadEvent,
                                        validationErrors,
                                        validated,
                                        getErrorReport,
                                        getNodeError,
                                        formatTime,
                                        timeDifference,
                                    },
                            }">    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-bind="if: activeTab() === 'export'">
         <h1>
            <span data-bind="text: $root.translations.export"></span>
        </h1>
    </div>
</div>
<!-- /ko -->