{% 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 'Application Area Resource Instance' %})'">
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Application Area Name' %}</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.applicationAreaName.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.applicationAreaName.value"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Location Description' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-label">{% trans 'Description Type: '  %}</div>
                    <div class="summary-value" data-bind="text: reportVals.locationDescriptionType.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label">{% trans 'Description: '  %}</div>
                    <div class="summary-value" data-bind="html: reportVals.locationDescription.value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Area Map' %}</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 -->
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Related Resources' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <!--ko foreach: relatedResources().related_resources -->
                <div class="block-item">
                    <div class="summary-value" data-bind="text: $data.displayname"></div>
                </div>
                <!--/ko-->
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Application Area Description' %}</h5>
        <div class="final-step-section-block">
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-value" data-bind="html: reportVals.applicationAreaDescription.value"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Application Area Designations' %}</h5>
        <!-- ko foreach: reportVals.designations -->
        <div class="final-step-section-block" style="margin: 10px;">
            <div class="final-step-section-block-item">
                <div class="block-item">
                    <div class="summary-label" data-bind="text: $data.designationName.name + ':'"></div>
                    <div class="summary-value" data-bind="text: $data.designationName.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: $data.designationNameUseType.name + ':'"></div>
                    <div class="summary-value" data-bind="text: $data.designationNameUseType.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: $data.designationType.name + ':'"></div>
                    <div class="summary-value" data-bind="text: $data.designationType.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: $data.designationGrade.name + ':'"></div>
                    <div class="summary-value" data-bind="text: $data.designationGrade.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: $data.designationRiskStatus.name + ':'"></div>
                    <div class="summary-value" data-bind="text: $data.designationRiskStatus.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: $data.designationReference.name + ':'"></div>
                    <!--ko ifnot: $data.designationReference.link -->
                    <div class="summary-value" data-bind="text: $data.designationReference.value"></div>
                    <!-- /ko -->
                    <!--ko if: $data.designationReference.link -->
                    <a class="summary-value" data-bind="text: $data.designationReference.value, attr: {href: $data.designationReference.link}"></a>
                    <!-- /ko -->
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: $data.designationDigitalFiles.name + ':'"></div>
                    <div class="summary-value" data-bind="text: $data.designationDigitalFiles.value"></div>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->
