{% load i18n %}
<!-- ko if: loading() === false -->
<div class="final-step">
    <div class="afs-final-step-section">
        <h5 class="summary-value">{% trans 'Created or Modified Resource Instance' %}</h5>
        <div class="afs-final-step-block">
            <div style="display: flex; flex-direction: column;">
                <a data-bind="attr: { href: urls.resource + '/' + resourceid}" target="_blank">
                    <div class="summary-value" 
                        data-bind = "text: reportVals.observationName.value + ' ({% trans 'Observation Resource Instance' %})'">
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="afs-final-step-section">
        <h5 class="summary-value">{% trans 'Related Project/Object' %}</h5>
        <div class="afs-final-step-block">
            <div style="display: flex; flex-direction: column;">
                <div style="display: inline-flex;">
                    <div class="summary-label" data-bind="text: reportVals.project.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.project.value"></div>
                </div>
                <div style="display: inline-flex;">
                    <div class="summary-label" data-bind="text: reportVals.usedObject.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.usedObject.value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="afs-final-step-section">
        <h5 class="summary-value">{% trans 'Observation Details' %}</h5>
        <div class="afs-final-step-block">
            <div style="display: flex; flex-direction: column;">
                <div style="display: inline-flex;">
                    <div class="summary-label" data-bind="text: reportVals.usedInstrument.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.usedInstrument.value"></div>
                </div>
                <div style="display: inline-flex;">
                        <div class="summary-label" data-bind="text: reportVals.observationType.name + ':'"></div>
                        <div class="summary-value" data-bind="text: reportVals.observationType.value"></div>
                </div>
                <div style="display: inline-flex;">
                    <div class="summary-label" data-bind="text: reportVals.usedProcess.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.usedProcess.value"></div>
                </div>
                <div style="display: inline-flex;">
                    <div class="summary-label" data-bind="text: reportVals.observationName.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.observationName.value"></div>
                </div>
                <div class="pad-top">
                    <div class="summary-label" data-bind="text: reportVals.statement.name + ':'"></div>
                    <div class="summary-value" data-bind="html: reportVals.statement.value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="afs-final-step-section">
        <h5 class="summary-value" style="margin-bottom: -10px;" data-bind="text: $root.translations.uploadedFiles"></h5>
        <!-- ko foreach: {data: fileLists, as: 'fileList'} -->
        <!-- ko if: fileList().length > 0 -->
        <h5 class="summary-value upload-dataset-name" data-bind="text: digitalResourceName || '{% trans 'Unnamed Dataset (nothing to upload)' %}'"></h5>
        <div style="margin-top: -20px">
            <!-- ko if: $parent.hasAnnotatedParts -->
            <div style="border: solid 1px #ddd">
                <div class="iiif-leaflet" data-bind="leaflet: leafletConfig" style="height: 300px; width: 100%"></div>
            </div>
            <!-- /ko -->
            <div style="width: 100%; padding-left: 10px; padding-right: 10px; margin-bottom: 20px;">
                <table data-bind="datatable: $parent.tableConfig" class="table table-striped" style="border-bottom: 1px solid #ddd" width="100%">
                    <thead>
                        <tr>
                            <th>{% trans "File Name:" %}</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: {data: fileList, as: 'file'}">
                        <tr>
                            <td><div class="summary-value" data-bind="text: file.name"></div></td>
                        </tr>
                    <tbody>
                </table>
                <div class="final-step-section-block-item" style="margin-top: -15px;">
                    <div style="display: inline-flex;">
                        <div class="summary-label">{% trans 'Files:' %} </div>
                        <div class="summary-value" data-bind="text: fileList().length + ' {% trans 'files uploaded' context 'label for count' %}'"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /ko -->
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->
