{% 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 'Site Visit Details' %}</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.consultationName.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.consultationName.value"></div>
                </div>
                <div class="block-item">
                    <div class="summary-label" data-bind="text: reportVals.date.name + ':'"></div>
                    <div class="summary-value" data-bind="text: reportVals.date.value"></div>
                </div>
                    <div class="summary-label" data-bind="text: reportVals.locatinDescription.name + ':'"></div>
                <div class="block-item">
                    <div class="summary-value" data-bind="html: reportVals.locatinDescription.value"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Visit Attendees' %}</h5>
        <div class="final-step-section-block"> 
            <table class="table table-striped attendee-table">
                <thead>
                    <tr>
                        <th class="attendee-name">{% trans 'Attendee' %}</th>
                        <th class="attendee-type">{% trans 'Type' %}</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- ko foreach: reportVals.attendees -->
                    <tr>
                        <td data-bind="text: $data.attendee.value"></td>
                        <td data-bind="text: $data.attendeeType.value"></td>
                    </tr>
                    <!-- /ko -->
                </tbody>
            </table>
        </div>
    </div>

    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Observations' %}</h5>
        <div class="final-step-section-block">
            <table class="table table-striped attendee-table">
                <thead>
                    <tr>
                        <th>{% trans 'Observation' %}</th>
                        <th>{% trans 'Observed by' %}</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- ko foreach: reportVals.observations -->
                    <tr>
                        <td data-bind="text: $data.observation.value.replace(/<\/?[^>]+(>|$)/g, '')"></td>
                        <td data-bind="text: $data.observedBy.value"></td>
                    </tr>
                    <!-- /ko -->
                </tbody>
            </table>
        </div>
    </div>

    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Recommendations' %}</h5>
        <div class="final-step-section-block">
            <table class="table table-striped attendee-table">
                <thead>
                    <tr>
                        <th>{% trans 'Recommendation' %}</th>
                        <th>{% trans 'Recommended by' %}</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- ko foreach: reportVals.recommendations -->
                    <tr>
                        <td data-bind="text: $data.recommendation.value.replace(/<\/?[^>]+(>|$)/g, '')"></td>
                        <td data-bind="text: $data.recommendedBy.value"></td>
                    </tr>
                    <!-- /ko -->
                </tbody>
            </table>
        </div>
    </div>

    <div class="her-final-step-section">
        <h5 class="summary-value">{% trans 'Photographs' %}</h5>
        <div style="flex-direction: unset; flex-wrap: wrap;">
            <!-- ko foreach: reportVals.photographs -->
            <div class="summary-image-container">
                <img class="summary-image" alt="Image" data-bind="attr: {src: $data.photo.value}">
                <div class="summary-image-metadata">
                    <div class="block-item">
                        <div class="summary-label" data-bind="text: $data.caption.name + ':'"></div>
                        <div class="summary-value" data-bind="text: $data.caption.value"></div>
                    </div>
                    <div class="block-item">
                        <div class="summary-label" data-bind="text: $data.copyrightType.name + ':'"></div>
                        <div class="summary-value" data-bind="text: $data.copyrightType.value"></div>
                    </div>
                    <div class="block-item">
                        <div class="summary-label" data-bind="text: $data.copyrightHolder.name + ':'"></div>
                        <div class="summary-value" data-bind="text: $data.copyrightHolder.value"></div>
                    </div>
                    <div class="block-item">
                        <div class="summary-label" data-bind="text: $data.copyrightNotes.name + ':'"></div>
                        <div class="summary-value" data-bind="text: $data.copyrightNotes.value"></div>
                    </div>
                </div>
            </div>
            <!-- /ko -->
        </div>
    </div>
</div>
<!-- /ko -->
