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

{% block task_details %}
<div class="loading-mask" data-bind="visible: loading"></div>
<!-- ko ifnot: loading() -->
<!-- ko ifnot: fileAdded() -->
<div data-bind="dropzone: dropzoneOptions" class="file-select loader-select" style="height: 100%; width: 100%; margin-top: 65px; background: white">
    <div>
        <div class="manifest-manager-main-menu-circle loader-button">
            <span><i style="color: #000" class="fa fa-cloud-upload r-select-icon"></i></span>
        </div> 
        <h2>
            <span data-bind="text: $root.translations.uploadCsvZipFile"></span>
        </h2>
        <h4>
            <span data-bind="text: $root.translations.dropzoneFileUploadCaption"></span>
        </h4>
        <div style="display: flex; padding: 15px 25px; flex-direction: column; justify-content: center; align-items: center;">
            <div style="display:flex; flex-direction: column;">
                <div>
                    <div class="dropzone-photo-upload" style="display:flex; margin-top: 0px;">
                        <div style="border-top: 1px solid #c4c4c4; margin-bottom: 15px;" class="btn btn-primary btn-labeled btn-lg fa fa-file fileinput-button dz-clickable" data-bind="css: uniqueidClass" role="button">
                            <span data-bind="text: $root.translations.selectFile"></span>
                        </div>
                        <div style="border-top: 1px solid #c4c4c4; margin-bottom: 15px;" class="btn btn-danger btn-labeled btn-lg fa fa-times-circle" data-bind="click: function() { $parent.cancel() }" role="button">
                            <span data-bind="text: $root.translations.cancelFileImport"></span>
                        </div>
                        <div style="min-height: 100%;">
                            <div id="hidden-dz-previews" style="display:none"></div>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="rr-splash-description">
                <span data-bind="text: $root.translations.etlFileUploadMessage"></span>
            </h5>
        </div>
    </div>
</div>
<!-- /ko -->

<!-- ko if: fileAdded() -->
<div class="etl-module-component-container">
<div class="etl-module-body">
    <h3 style="margin-top: 15px; margin-bottom: 5px; font-size: 19px;">
        <span data-bind="text: $root.translations.etlSingleCSVTitle"></span>
    </h3>
    <div class="etl-module-component" style="margin-top: 0px;">
        <h4 style="margin-top: 5px; margin-bottom: 0px;">
            <span data-bind="text: $root.translations.fileSummary"></span>
        </h4>
        <div>
            <span class="etl-loading-metadata-key" data-bind="text: $root.translations.fileName + ':'"></span>
            <span class="etl-loading-metadata-value" data-bind="text: fileInfo().name"></span>
        </div>
        <div>
            <span class="etl-loading-metadata-key" data-bind="text: $root.translations.fileSize + ':'"></span>
            <span class="etl-loading-metadata-value" data-bind="html: formatSize(fileInfo().size)"></span>
        </div>
        <div>
            <span class="etl-loading-metadata-key" data-bind="text: $root.translations.numberOfRows + ':'"></span>
            <span class="etl-loading-metadata-value" data-bind="text: numberOfRow()"></span>
        </div>
    </div>
    <div class="etl-module-component etl-module-mapping">
        <h4>
            <span data-bind="text: $root.translations.targetModel"></span>
        </h4>
        <select data-bind="
            value: selectedGraph,
            options: graphs,
            optionsText: 'name',
            optionsValue: 'graphid',
            optionsCaption: $root.translations.selectAResourceModel + '...',
            valueAllowUnset: true,
            chosen: {width: '500px'}"
        ></select>
    </div>
    <!-- ko if: selectedGraph -->
    <div class="etl-module-component">
        <h4>
            <span data-bind="text: $root.translations.importDetails"></span>
        </h4>
        <div data-bind="component: { name: 'views/components/simple-switch', params: {value: hasHeaders, config:{ label: $root.translations.columnNameFirstRow, subtitle: ''}}}"></div>
        <div class="csv-mapping-table-container">
        <table class="table table-striped csv-mapping-table">
            <thead>
                <tr>
                <!-- ko foreach: { data: fieldMapping, as: 'mapping', noChildContext: true } -->
                    <!-- ko if: nodes() -->
                    <th style="border-bottom: 1px solid #ddd; vertical-align: top;">
                        <select data-bind="
                            value: mapping.node,
                            options: nodes,
                            optionsText: 'label',
                            optionsCaption: $root.translations.select + '...',
                            optionsValue: 'alias',
                            valueAllowUnset: true,
                            chosen: {width: '100%'}"
                        ></select>
                        <!-- ko if: stringNodes.includes(mapping.node()) -->
                        <select id="lang_dd" style="flex:1" name="language" data-bind="
                            value: mapping.language,
                            options: languages,
                            optionsText: function(item){return item.name + ' (' + item.code + ')'},
                            chosen: {width: '100%'}"
                        ></select>
                        <!-- /ko -->
                    </th>
                    <!-- /ko -->
                <!-- /ko -->
                </tr>
            </thead>
            <thead>
                <tr class="column-names">
                    <!-- ko foreach: headers -->
                    <th style="border-bottom: 1px solid #ddd;" data-bind="text: $data"></th>
                    <!-- /ko -->
                </tr>
            </thead>
            <tbody>
                <!-- ko foreach: { data: csvExample, as: "row", noChildContext: true }-->
                <tr>
                    <!-- ko foreach: { data: row, as: "cell" }  -->
                    <td style="vertical-align: text-top;" data-bind="text: cell"></td>
                    <!-- /ko -->
                </tr>
                <!-- /ko -->
            </tbody>
        </table>
        </div>
        <!-- ko if: csvExample().length >= 5-->
        <div data-bind="text: $root.translations.showingFirst + ' ' + csvExample().length + ' ' + $root.translations.rows"></div>
        <!-- /ko -->
        <!-- ko ifnot: csvExample().length >= 5 -->
        <div data-bind="text: $root.translations.showingAll + ' ' + csvExample().length + ' ' + $root.translations.rows"></div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>
<div class="tabbed-workflow-footer, etl-module-footer">
    <button style="margin-right: 8px;" data-bind="disable: !ready(), click: write" class="btn btn-success">
        <span data-bind="text: $root.translations.importData"></span>
    </button>
    <button data-bind="click: function () { fileAdded(null); }" class="btn btn-danger">
        <span data-bind="text: $root.translations.cancelFileImport"></span>
    </button>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
{% endblock task_details %}

{% block etl_status %}
<div class="bulk-load-status" style="margin-bottom: 20px;">
    <h4 class="summary-title">
        <span data-bind="text: $root.translations.singleCsvImportSummary"></span>
    </h4>
    <!-- ko if: loadDetails -->
    <!-- ko ifnot: loading() -->
    <div>
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.fileName + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: loadDetails.file_name"></span>
    </div>
    <div>
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.targetResource + ':'"></span>
        <span class="etl-loading-metadata-value" data-bind="text: getGraphName(loadDetails.graph)"></span>
    </div>
    <div>
        <span class="etl-loading-metadata-key" data-bind="text: $root.translations.targetFields + ':'"></span>
        <!-- ko foreach: loadDetails.mapping -->
        <!-- ko if:  $data.node -->
        <span class="etl-loading-metadata-value" data-bind="text: $data.node"></span><span>;</span>
        <!-- /ko -->
        <!-- /ko -->
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>
{% endblock etl_status %}
