{% load i18n %}

<!-- ko if: state === 'details' -->
{% block task_details %}
{% endblock task_details %}
<!-- /ko -->

<!-- ko if: state === 'status' -->
{% block etl_status %}
{% endblock etl_status %}

{% block loading_status %}
<div class="bulk-load-status">
    <h4 class="summary-header">
        <span data-bind="text: $root.translations.loadingData"></span>
    </h4>
    <div>
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.loadingStatus + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="
            text:
                selectedLoadEvent().status == 'indexed' ? $root.translations.completed
                : selectedLoadEvent().status == 'completed' ? $root.translations.indexing
                : selectedLoadEvent().status == 'validated' ? $root.translations.running
                : selectedLoadEvent().status == 'running' ? $root.translations.validating
                : selectedLoadEvent().status == 'reversing' ? $root.translations.unloading
                : selectedLoadEvent().status == 'unloaded' ? $root.translations.unloaded
                : selectedLoadEvent().status == 'cancelled' ? $root.translations.cancelled
                : $root.translations.failed
        "></span>  
    </div>
    <div style="padding-top: 10px;">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.loadingStarted + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: formatTime(selectedLoadEvent().load_start_time)"></span>    
    </div>
    <div data-bind="if: selectedLoadEvent().load_end_time">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.loadingEnded + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: formatTime(selectedLoadEvent().load_end_time)"></span>    
    </div>
    <div data-bind="if: selectedLoadEvent().load_end_time">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.loadDuration + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: timeDifference(selectedLoadEvent().load_end_time, selectedLoadEvent().load_start_time)"></span>    
    </div>
    <div style="padding-top: 10px;" data-bind="if: selectedLoadEvent().indexed_time">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.indexingEnded + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: formatTime(selectedLoadEvent().indexed_time)"></span>    
    </div>
    <div data-bind="if: selectedLoadEvent().indexed_time">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.indexingDuration + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: timeDifference(selectedLoadEvent().indexed_time, selectedLoadEvent().load_end_time)"></span>    
    </div>
</div>

<!-- ko if: loadDetails.number_of_import -->
<div class="bulk-load-status" style="padding: 5px 0">
    <h4 class="summary-header">
        <span data-bind="text: $root.translations.importedData"></span>
        <span>
            <a class="etl-status-link" target="_blank"
                data-bind="text: '('+$root.translations.viewInEditLog+')', attr: { href: editHistoryUrl }">
            </a>
        </span>
    </h4>
    <div>
        <!-- ko foreach: loadDetails.number_of_import -->
        <span class="etl-loading-metadata-key" data-bind="text: $data.name + ' ' + $root.translations.instances + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: $data.total"></span>
        <!-- ko foreach: $data.tiles -->
        <div style="padding-left: 20px;">
            <span class="etl-loading-metadata-key" data-bind="text: $data.tile + ':'"></span>
            <span class="etl-loading-metadata-value" data-bind="text: $data.count"></span>
        </div>
        <!-- /ko -->
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->
{% endblock loading_status %}

{% block etl_error_report %}
<!-- ko if: validated -->
<div class="etl-error-report">
    <h4 class="summary-header">
        <span data-bind="text: $root.translations.validationErrors"></span>
    </h4>
    <table class="table table-striped" style="margin-top: 5px; border: 1px solid rgba(0,0,0,0.14)" width="100%">
        <thead>
            <tr>
                <th>{% trans "Column Name" %}</th>
                <th>{% trans "Error" %}</th>
                <th>{% trans "Node Alias" %}</th>
                <th>{% trans "Datatype" %}</th>
                <th>{% trans "Count" %}</th>
                <th>{% trans "Details" %}</th>
            </tr>
        </thead>
        <!-- ko if: selectedLoadEvent().error_message -->
        <tbody>
            <tr>
                <td colspan="5" data-bind="text: selectedLoadEvent().error_message"></td>
            </tr>
        </tbody>
        <!-- /ko -->
        <!-- ko if: validationErrors().length -->
        <tbody>
            <!-- ko foreach: validationErrors -->
            <tr>
                <td data-bind="text: $data.source"></td>
                <td data-bind="text: $data.error"></td>
                <td data-bind="text: $data.nodeAlias"></td>
                <td data-bind="text: $data.datatype"></td>
                <td data-bind="text: $data.count"></td>
                <td class='etl-status-link'
                    data-bind="
                        if: $data.type === 'node',
                        click: function(){
                            $data.showDetails(!$data.showDetails());
                            $parent.getNodeError($parent.selectedLoadEvent().loadid, $data);
                        }">
                    <span data-bind="text: $data.showDetails() ? $root.translations.hide : $root.translations.show"></span>
                </td>
            </tr>
            <!-- ko if: $data.showDetails -->
            <tr>
                <td style="text-align: right; vertical-align: top" data-bind="click: function(){ $data.showDetails(false); }">
                    <i class="fa fa-2xl fa-folder-open"></i>
                </td>
                <td colspan="5">
                    <!-- ko if: $data.count > 5 -->
                    <span data-bind="text: $root.translations.firstFiveShown"></span>
                    <!-- /ko -->
                    <table>
                        <thead>
                            <tr>
                                <th>{% trans "Description" %}</th>
                                <th>{% trans "Value" %}</th>
                                <th>{% trans "Source" %}</th>
                            </tr>    
                        </thead>
                        <tbody>
                            <!-- ko foreach: { data: $data.details, as: "details" } -->
                            <tr>
                                <td data-bind="text: details.message"></td>
                                <td style="min-width:80px" data-bind="text: details.value"></td>
                                <td data-bind="text: details.source"></td>
                            </tr>
                            <!-- /ko -->
                        </tbody>
                    </table>
                </td>
            </tr>
            <!-- /ko -->    
            <!-- /ko -->
            <tr>
                <td colspan="6" class='etl-status-link' data-bind="click: function(){ getErrorReport(selectedLoadEvent().loadid); }">{% trans "Full Error Report" %}</td>
            </tr>
        </tbody>
        <!-- /ko -->
        <!-- ko ifnot: validationErrors().length || selectedLoadEvent().error_message -->
        <tbody>
            <tr>
                <span ></span>
                <td colspan="5">
                    <span data-bind="text: $root.translations.noErrorFound"></span>
                </td>
            </tr>
        </tbody>
        <!-- /ko -->            
    </table>
</div>
<!-- /ko -->
{% endblock etl_error_report %}
<!-- /ko -->