{% load i18n %}
<!-- ko if: loading() === false -->
<div class="final-step">
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Created or Modified Resource Instance' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <a data-bind="attr: { href: urls.resource + '/' + resourceid}" target="_blank">
                    <div class="summary-value" 
                        data-bind = "text: displayName + ' ({% trans 'Consultation Resource Instance' %})'">
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Consultation Area' %}</h5>
        <div class="final-step-section-block-item">
            <!--ko if: geometry -->
            <div class="map-container">
                <div class="map" data-bind="component: {
                    name: 'arches-map',
                    params: $data
                }">
                </div>
            </div>
            <!--/ko-->
            
            <!-- Related Map information -->
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.featureShape.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.featureShape.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.relatedApplicationAreas.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.relatedApplicationAreas.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.locationDescription.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.locationDescription.value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Consultation Dates' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.logDate.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.logDate.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.targetDate.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.targetDate.value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Consultation Scope' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.consultationType.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.consultationType.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.applicationType.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.applicationType.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.developmentType.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.developmentType.value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Reference Numbers' %}</h5>
        <div class="final-step-section-block"> 
            <table class="table table-striped reference-number-table">
                <thead class="">
                    <tr>
                        <th class="reference-number">{% trans 'Reference Number' %}</th>
                        <th class="reference-type">{% trans 'Reference Type' %}</th>
                        <th class="reference-agency">{% trans 'Agency' %}</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- ko foreach: { data: reportVals.references, as: 'ref' } -->
                    <tr>
                        <td class="" data-bind="text: ref.referenceNumber.value"></td>
                        <td class="" data-bind="text: ref.referenceType.value"></td>
                        <td class="" data-bind="text: ref.agency.value"></td>
                    </tr>
                    <!-- /ko -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Proposal' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.proposalDescription.name + ':'"></div>
                    <div class="summary-value" data-bind="html: reportVals.proposalDescription.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: relatedFile.name + ':'"></div>
                    <!-- ko if: relatedFile.link -->
                    <div class="summary-value"><a data-bind="attr: {href: relatedFile.link}, text: relatedFile.value"></a></div>
                    <!-- /ko -->
                    <!-- ko ifnot: relatedFile.link -->
                    <div class="summary-value" data-bind="text: relatedFile.value"></div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Contacts' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.planningOfficer.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.planningOfficer.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.consultingContact.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.consultingContact.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.caseworkOfficer.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.caseworkOfficer.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.agent.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.agent.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.owner.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.owner.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.applicant.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.applicant.value"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /ko -->
