{% extends "views/components/etl_modules/base-import.htm" %}
{% load i18n %}

{% block task_details %}
<!-- ko ifnot: loading() -->
<div class="etl-module-component-container">
<div class="etl-module-body">
    <h2>
        <span data-bind="text:
            operation() == 'trim' ? $root.translations.bulkStringEditorTrim
            : operation() == 'case' ? $root.translations.bulkStringEditorChangeCase
            : operation() == 'replace' ? $root.translations.bulkStringEditorReplace
            : ''
        "></span>
    </h2>
    <!-- ko if: operation() == 'trim'-->
    <p class="pad-btm">
        {% blocktrans %}Removes all leading and trailing whitespace from the selected data{% endblocktrans %}
    </p>
    <!-- /ko -->
    <!-- ko if: operation() == 'case'-->
    <p class="pad-btm">
        {% blocktrans %}Changes the case of all words in the selected data to upper case or lower case, or capitalizes those words{% endblocktrans %}
    </p>
    <!-- /ko -->
    <!-- ko if: operation() == 'replace'-->
    <p class="pad-btm">
        {% blocktrans %}Find and replace words or phrases within a larger text{% endblocktrans %}
    </p>
    <!-- /ko -->
    <section class="etl-module-component">
        <div class="etl-module-component-block">
            <h3>
                <label for="search-url-input" data-bind="text: $root.translations.useSearchUrlOptional"></label>
            </h3>
            <textarea id="search-url-input"
                style="min-height: 100px; width: 80%;"
                class="form-control textarea textarea-resizable" spellcheck="false" data-bind="textInput: searchUrl"
            ></textarea>
        </div>

        <!-- ko if: operation() == 'case'-->
        <div class="etl-module-component-block">
            <h3>
                <label for="case-operation-select" data-bind="text: $root.translations.selectEditOperation"></label>
            </h3>
            <select id="case-operation-select" data-bind="
                value: selectedCaseOperation,
                options: caseOperations,
                optionsText: 'label',
                optionsValue: 'name',
                optionsCaption: $root.translations.select + '...',
                valueAllowUnset: true,
                chosen: {width: '500px'}"
            ></select>
            <div data-bind="ifnot: ['trim', 'replace'].includes(operation())">
                <span class="form-check">
                    <input id="trim-checkbox" type="checkbox" data-bind="checked: trim">
                    <label for="trim-checkbox" data-bind="text: $root.translations.removeLeadingTrailingSpaces"></label>
                </span>
            </div> 
        </div>
        <!-- /ko -->

        <div class="etl-module-component-block">
            <h3>
                <label for="resource-model-select" data-bind="text: $root.translations.selectAResourceModel"></label>
            </h3>
            <select id="resource-model-select" data-bind="
                value: selectedGraph,
                options: graphs,
                optionsText: 'name',
                optionsValue: 'graphid',
                optionsCaption: $root.translations.select + '...',
                valueAllowUnset: true,
                chosen: {width: '500px'}"
            ></select>
        </div>
        
        <!-- ko if: nodes() -->
        <div class="etl-module-component-block">
            <h3>
                <label for="node-select" data-bind="text: $root.translations.selectANode"></label>
            </h3>
            <select id="node-select" data-bind="
                value: selectedNode,
                options: nodes,
                optionsText: 'label',
                optionsCaption: $root.translations.select + '...',
                optionsValue: 'nodeid',
                valueAllowUnset: true,
                chosen: {width: '500px'}"
            ></select>
        </div>
        <!-- /ko -->
        <div class="etl-module-component-block">
            <h3>
                <label for="language-select" data-bind="text: $root.translations.language"></label>
            </h3>
            <select id="language-select" data-bind="
                options: languages,
                optionsCaption: $root.translations.select + '...',
                optionsText: function(item){return item.name + ' (' + item.code + ')'},
                value: selectedLanguage,
                chosen: {width: '500px'}"
            ></select>
        </div>
        <div class="etl-module-component-block" data-bind="if: operation() === 'replace'">
            <div class="etl-from-to">
                <h3>
                    <label for="old-text-input" data-bind="text: $root.translations.from"></label>
                </h3>
                <input id="old-text-input" type="text" class="form-control" placeholder="Old Text" data-bind="textInput: oldText">
            </div>
            <i class="fa fa-arrow-right" style="margin: 0px 2px;"></i>
            <div class="etl-from-to">
                <h3>
                    <label for="new-text-input" data-bind="text: $root.translations.to"></label>
                </h3>
                <input id="new-text-input" type="text" class="form-control" placeholder="New Text" data-bind="textInput: newText">
            </div>
            <div>
                <span class="form-check">
                    <input id="case-insensitive-input" type="checkbox" data-bind="checked: caseInsensitive">
                    <label for="case-insensitive-input" data-bind="text: $root.translations.caseInsensitive"></label>
                </span>
            </div>
            <div>
                <span class="form-check">
                    <input id="whole-word-input" type="checkbox" data-bind="checked: wholeWord">
                    <label for="whole-word-input" data-bind="text: $root.translations.wholeWord"></label>
                </span>
            </div>
        </div>
        <button data-bind="click: preview, css: {disabled: !ready()}" class="btn btn-success">
            <span data-bind="text: $root.translations.preview"></span>
            <i class="fa fa-spin fa-spinner" data-bind="visible: previewing()"></i>
        </button>
    </section>
    <!-- ko if: showPreview-->
    <section  class="etl-preview">
        <!-- ko if: numberOfTiles() === 0 -->
        <h3 style="margin-top: 0px;">
            <span style="margin: 2px;" class="fa fa-info-circle"></span><span data-bind="text: $root.translations.noDataToPreview"></span>
        </h3>
        <!-- /ko -->
        <!-- ko if: numberOfTiles() > 0 -->
        <h3 style="margin-top: 0px;">
            <span data-bind="text: $root.translations.previewCountStats(numberOfTiles()>previewLimit()?previewLimit():numberOfTiles(),numberOfTiles(),numberOfResources())"></span>
        </h3>
        <h3 style="margin-top: 0px;color:red;" data-bind="if: numberOfTiles() > config.updateLimit">
            <span style="margin: 2px;" class="fa fa-info-circle"></span><span data-bind="text: $root.translations.bulkEditLimitWarning(config.updateLimit.toLocaleString())"></span>
        </h3>
        <table class="table table-striped csv-mapping-table">
            <thead>
                <tr>
                    <th style="border-bottom: 1px solid #ddd; vertical-align: top;">
                        <span data-bind="text: $root.translations.before"></span>
                    </th>
                    <th style="border-bottom: 1px solid #ddd; vertical-align: top;">
                        <span data-bind="text: $root.translations.after"></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <!-- ko foreach: { data: previewValue(), as: "row" } -->
                <!-- ko if: row[0] -->
                <tr>
                    <td style="vertical-align: text-top;" data-bind="html: row[0]"></td>
                    <td style="vertical-align: text-top;" data-bind="html: row[1]"></td>
                </tr>
                <!-- /ko -->
                <!-- /ko -->
            </tbody>
        </table>
        <!-- /ko -->
    </section>
    <!-- /ko -->
</div>
<div class="tabbed-workflow-footer, etl-module-footer">
    <button style="margin-right: 8px;" data-bind="click: write, css: {disabled: !allowEditOperation()}" class="btn btn-success">
        <span data-bind="text: $root.translations.start"></span>
    </button>
</div>
</div>
<!-- /ko -->
{% endblock task_details %}

{% block etl_status %}
<div class="bulk-load-status">
    <h4 class="summary-title">
        <span data-bind="text: $root.translations.bulkDataEditSummary"></span>
    </h4>
    <!-- ko if: load_details -->
    <!-- ko ifnot: loading() -->
    <div class="summary-header">
        <span data-bind="text: $root.translations.editDetails"></span>
    </div>
    <div style="padding-top: 10px;" data-bind="if: load_details.graph">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.resourceModelEdited + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: getGraphName(load_details.graph)"></span>
    </div>
    <div data-bind="if: load_details.node">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.fieldNameEdited + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.node"></span>      
    </div>
    <div data-bind="if: load_details.search_url">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.searchUrl + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.search_url"></span>      
    </div>
    <div data-bind="if: load_details.language_code">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.language + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.language_code"></span>
    </div>
    <div data-bind="if: load_details.operation">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.editOperation + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: operationLabel[load_details.operation]"></span>
    </div>
    <div data-bind="if: ['replace', 'replace_i'].includes(load_details.operation)">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.details + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.details.old_text"></span>
        <i class="fa fa-long-arrow-right"></i>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.details.new_text"></span>
    </div>
    <div>
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.numberOfResourcesUpdated"></span>
        <!-- ko foreach: load_details.number_of_import -->
        <div style="padding-left: 10px;" class="etl-loading-metadata-value" data-bind="text: $root.translations.countOfResourcesUpdated($data.total)"></div>
            <!-- ko foreach: $data.tiles -->
            <div style="padding-left: 20px;" class="etl-loading-metadata-value" data-bind="text: $root.translations.countOfTilesUpdated($data.count)"></div>
            <!-- /ko -->
        <!-- /ko -->
    </div>
    <div data-bind="if: editHistoryUrl">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.listOfEditedResources + ':'"></span>
        <span class="etl-loading-metadata-value">
            <a class="etl-status-link" target="_blank" data-bind="text: $root.translations.viewInEditLog, attr: { href: editHistoryUrl }"></a>
        </span>
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>
{% endblock etl_status %}

{% block loading_status %}
<div class="bulk-load-status">
    <h4 class="summary-header">
        <span data-bind="text: $root.translations.bulkEditProgressDetails"></span>
    </h4>
    <div style="display:flex;" data-bind="click: function() { showStatusDetails(!showStatusDetails())}">
        <a class="etl-status-link etl-loading-metadata-key" data-bind="text: $root.translations.bulkEditStatus + ':'"></a>
        <div style="padding: 1px 4px;">
            <div>
                <!-- ko ifnot: showStatusDetails -->
                <i class="fa fa-caret-right fa-lg"></i>
                <!-- /ko -->
                <!-- ko if: showStatusDetails -->
                <i class="fa fa-caret-down fa-lg"></i>
                <!-- /ko -->
            </div>
        </div>
        <div style="display: flex; flex-direction: column;">
            <div 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.running
                : selectedLoadEvent().status == 'reversing' ? $root.translations.unloading
                : selectedLoadEvent().status == 'unloaded' ? $root.translations.unloaded
                : selectedLoadEvent().status == 'cancelled' ? $root.translations.cancelled
                : $root.translations.failed
            "></div>
            <!-- ko if: showStatusDetails -->
            <div data-bind="foreach: statusDetails">
                <div data-bind="text: $data"></div>
            </div>
            <div data-bind="ifnot: ['indexed','failed','cancelled','unloaded'].includes(selectedLoadEvent().status)">
                <i class="fa fa-spin fa-spinner fa-lg"></i>
            </div>
            <!-- /ko -->
        </div>  
    </div>
    <div style="padding-top: 10px;">
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.bulkEditStarted + ':'"></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.bulkEditEnded + ':'"></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.bulkEditDuration + ':'"></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>
{% endblock loading_status %}
