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

{% block task_details %}
<div class="etl-module-component-container">
    <div class="etl-module-body">
        <p style="font-weight: 400; font-size: 1.7rem; color: #565656;">
            {% trans "Migrate Tile Values to Reference Datatype" %}
        </p>
        <p class="pad-btm">
            {% trans "Rewrite tile data on nodes that have already been retyped to the reference datatype but still hold legacy concept or domain values." %}
        </p>

        <div class="etl-module-component-block">
            <label for="graph-select" style="display: block; font-weight: normal; font-size: 1.5rem; color: #565656;">
                {% trans "Resource Model" %}
            </label>
            <div>
                <select id="graph-select" data-bind="options: availableGraphs, optionsText: 'graphName', optionsValue: 'graphid', value: selectedGraph, valueAllowUnset: true, optionsCaption: ' ', chosen: {width: '400px'}"></select>
            </div>
        </div>

        <div class="etl-module-component-block" data-bind="visible: selectedGraph()">
            <fieldset style="border: none; padding: 0; margin: 0;">
                <legend style="font-weight: normal; font-size: 1.5rem; color: #565656; padding: 0;">
                    {% trans "Origin Datatype" %}
                </legend>
                <div style="display: flex; flex-direction: column; gap: 6px;">
                    <label style="font-weight: normal;">
                        <input type="radio" value="concept" data-bind="checked: origin"/>
                        {% trans "Concept / Concept-list (legacy valueid)" %}
                    </label>
                    <label style="font-weight: normal;">
                        <input type="radio" value="domain" data-bind="checked: origin"/>
                        {% trans "Domain-value / Domain-value-list (legacy option id)" %}
                    </label>
                </div>
            </fieldset>
        </div>

        <div class="etl-module-component-block" data-bind="visible: selectedGraph() && origin()">
            <label for="language-select" style="display: block; font-weight: normal; font-size: 1.5rem; color: #565656;">
                {% trans "Language for Label Fallback" %}
            </label>
            <div>
                <select id="language-select" data-bind="options: languages, optionsText: 'name', optionsValue: 'code', value: languageCode, valueAllowUnset: true, chosen: {width: '400px'}"></select>
            </div>
        </div>

        <button data-bind="click: previewCandidates, attr: {disabled: !canPreview()}" class="btn btn-success">
            <span>{% trans "Preview Candidate Nodes" %}</span>
            <i class="fa fa-spin fa-spinner" data-bind="visible: isPreviewLoading()"></i>
        </button>

        <!-- ko if: shouldShowPreview -->
        <section class="etl-preview">
            <!-- ko if: candidateNodes().length === 0 -->
            <p style="margin-top: 0px;">
                <span style="margin: 2px;" class="fa fa-info-circle"></span>
                <span>{% trans "No reference nodes with legacy markers were found for the selected model and origin." %}</span>
            </p>
            <!-- /ko -->
            <!-- ko if: candidateNodes().length > 0 -->
            <p style="margin-top: 0px;">
                <span data-bind="text: candidateNodes().length + ' {% trans "candidate node(s)" %}'"></span>
            </p>
            <table class="table table-striped csv-mapping-table">
                <thead>
                    <tr>
                        <th>{% trans "Node Alias" %}</th>
                        <th>{% trans "Nodegroup" %}</th>
                        <th>{% trans "Controlled List" %}</th>
                        <th>{% trans "Tiles to Rewrite" %}</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: candidateNodes">
                    <tr>
                        <td data-bind="text: alias"></td>
                        <td data-bind="text: nodegroup"></td>
                        <td data-bind="text: list_name"></td>
                        <td data-bind="text: tile_count"></td>
                    </tr>
                </tbody>
            </table>
            <!-- /ko -->
        </section>
        <!-- /ko -->
    </div>

    <div class="tabbed-workflow-footer, etl-module-footer">
        <button style="margin-right: 8px;" data-bind="click: write, attr: {disabled: !canWrite()}" class="btn btn-success">
            <span>{% trans "Run Migration" %}</span>
        </button>
    </div>
</div>
{% endblock task_details %}

{% block etl_status %}
<div class="bulk-load-status">
    <h4 class="summary-title">
        <span>{% trans "Migration Summary" %}</span>
    </h4>
    <div style="padding-top: 10px;">
        <span class="etl-loading-metadata-key">{% trans "Resource Model:" %}</span>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.graph"></span>
    </div>
    <div data-bind="if: load_details.details">
        <span class="etl-loading-metadata-key">{% trans "Origin:" %}</span>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.details.origin"></span>
    </div>
    <div data-bind="if: load_details.details">
        <span class="etl-loading-metadata-key">{% trans "Language:" %}</span>
        <span class="etl-loading-metadata-value" data-bind="text: load_details.details.language_code"></span>
    </div>
    <div data-bind="if: editHistoryUrl">
        <span class="etl-loading-metadata-key">{% trans "Edited Resources:" %}</span>
        <span class="etl-loading-metadata-value">
            <a class="etl-status-link" target="_blank" data-bind="attr: { href: editHistoryUrl }">
                {% trans "View in Edit Log" %}
            </a>
        </span>
    </div>
</div>
{% endblock etl_status %}

{% block loading_status %}
<div class="bulk-load-status">
    <h4 class="summary-header">
        <span>{% trans "Progress Details" %}</span>
    </h4>
    <div style="display:flex;" data-bind="click: function() { showStatusDetails(!showStatusDetails())}">
        <a class="etl-status-link etl-loading-metadata-key">{% trans "Status:" %}</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() ?
                    selectedLoadEvent().status == 'indexed' ? 'Completed'
                    : selectedLoadEvent().status == 'completed' ? 'Indexing'
                    : selectedLoadEvent().status == 'validated' ? 'Running'
                    : selectedLoadEvent().status == 'running' ? 'Running'
                    : selectedLoadEvent().status == 'reversing' ? 'Unloading'
                    : selectedLoadEvent().status == 'unloaded' ? 'Unloaded'
                    : selectedLoadEvent().status == 'cancelled' ? 'Cancelled'
                    : 'Failed'
                : 'Failed'
            "></div>
            <!-- ko if: showStatusDetails -->
            <div data-bind="foreach: statusDetails">
                <div data-bind="text: $data"></div>
            </div>
            <div data-bind="ifnot: ['indexed','failed'].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">{% trans "Started:" %}</span>
        <span class="etl-loading-metadata-value" data-bind="text: selectedLoadEvent() ? formatTime(selectedLoadEvent().load_start_time) : ''"></span>
    </div>
    <div data-bind="if: selectedLoadEvent() && selectedLoadEvent().load_end_time">
        <span class="etl-loading-metadata-key">{% trans "Ended:" %}</span>
        <span class="etl-loading-metadata-value" data-bind="text: selectedLoadEvent() ? formatTime(selectedLoadEvent().load_end_time) : ''"></span>
    </div>
    <div data-bind="if: selectedLoadEvent() && selectedLoadEvent().load_end_time">
        <span class="etl-loading-metadata-key">{% trans "Duration:" %}</span>
        <span class="etl-loading-metadata-value" data-bind="text: selectedLoadEvent() ? timeDifference(selectedLoadEvent().load_end_time, selectedLoadEvent().load_start_time) : ''"></span>
    </div>
</div>
{% endblock loading_status %}

{% block etl_error_report %}
{% endblock etl_error_report %}