{% extends "views/report-templates/default.htm" %}
{% load i18n %}

{% block report %}
{% block report_title_bar %}
<!-- Custom Template Report Title Bar -->
<div class="relative">

    <!-- Title Block -->
    <div class="afs-report-toolbar">
        <h1 class="afs-report-toolbar-title"><span class="afs-report-name">{% trans "Place:" %}</span><span data-bind="text: displayname" class="afs-report-instance-name"></span></h1>
    </div>

</div>
{% endblock report_title_bar %}


{% block body %}
<!-- Link nav -->
<div class="afs-report-anchor-container">
    <ol class="afs-report-anchors breadcrumb">
        <!-- ko foreach: {data: sections, as: 'section'} -->
        <li data-bind="click: function(){$parent.activeSection(section.id)}, css: {active: $parent.activeSection() === section.id}, text: section.title" class="afs-report-a"></li>
        <!-- /ko -->
    </ol>
</div>
<div class="afs-tabbed-report">
    <div class="afs-tabbed-report-content">
        <!-- Names Tab -->
        <div class="afs-report-page" data-bind="if: activeSection() === 'name'">
            <div data-bind="component: {
                name: 'views/components/reports/scenes/name',
                params: {
                    data: resource,
                    cards: nameCards,
                    dataConfig: nameDataConfig
                }
            }"></div>
        </div>
        <!-- Description Tab -->
        <div class="afs-report-page" data-bind="if: activeSection() === 'description'">
            <div data-bind="component: {
                name: 'views/components/reports/scenes/description',
                params: {
                    data: resource,
                    cards: descriptionCards,
                }
            }"></div>
        </div>
        <!-- Documentation Tab -->
        <div class="afs-report-page" data-bind="if: activeSection() === 'documentation'">
            <div data-bind="component: {
                name: 'views/components/reports/scenes/documentation',
                params: {
                    data: resource,
                    cards: documentationCards,
                    dataConfig: documentationDataConfig,
                }
            }"></div>
        </div>
        <!-- Parthood Tab --> 
        <div class="afs-report-page" data-bind="if: activeSection() === 'parthood'">
            <div data-bind="component: {
                name: 'views/components/reports/scenes/default',
                params: {
                    data: parthoodData,
                }
            }"></div>
        </div>
        <!-- Location Tab --> 
        <div class="afs-report-page" data-bind="if: activeSection() === 'location'">
            <div data-bind="component: {
                name: 'views/components/reports/scenes/location',
                params: {
                    geojson: geojson,
                    resourceInstanceId: reportMetadata().resourceinstanceid,
                    cards: locationCards,
                }
            }"></div>
        </div>   
         <!-- JSON Tab -->
        <div class="afs-report-page afs-flex-col" data-bind="if: activeSection() === 'json'">
            <div class="afs-flex-col" data-bind="component: {
                name: 'views/components/reports/scenes/json',
                params: {
                    resourceInstanceId: reportMetadata().resourceinstanceid,
                }
            }"></div>
        </div>
    </div>
</div>
{% endblock body %}
    
{% endblock report %}

{% block summary %}
<div class="afs-summary-report-header">
    <h1 class="afs-summary-report-title"><span data-bind="text: displayname" class="afs-report-instance-name"></span><span class="afs-report-name pad-lft-sm">{% trans "(Place)" %}</span></h1>
</div>
<div class="model-summary-report">
    <div class="afs-report-page">
        <!-- Names -->
        <div class="afs-report-section">
            <h2 class="afs-report-section-title">{% trans "Place Names" %}</h2>
            <div class="afs-report-subsection" >
                <!-- ko ifnot: nameSummary() && nameSummary().length -->
                <h3 class="afs-report-nodata-message">{% trans "There are no names for this resource" %}</h3>
                <!-- /ko -->
                <!-- ko if: nameSummary() && nameSummary().length -->
                <div class="afs-table pad-btm">
                    <table class="table table-striped" cellspacing="0" width="100%">
                        <thead>
                            <tr class="afs-table-header">
                                <th>{% trans "Name" %}</th>
                                <th>{% trans "Name Type" %}</th>
                            </tr>
                        </thead>
                        <tbody data-bind="dataTablesForEach: { data: nameSummary, dataTableOptions: nameSummaryTableConfig }">
                            <tr>
                                <td data-bind="text: content"></td>
                                <td data-bind="text: type"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /ko -->
            </div>
        </div>
        <!-- Geospatial Definition -->
        <div class="afs-report-section">
            <h2 class="afs-report-section-title">{% trans "Geospatial Definitions" %}</h2>
            <div class="afs-report-subsection" >
                <!-- ko if: geojson == '--' -->
                <h3 class="afs-report-nodata-message">{% trans "There is no geospatial definition for this resource" %}</h3>
                <!-- /ko -->
                <!-- ko if: geojson != '--' -->
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/location',
                    params: {
                        geojson: geojson,
                        resourceInstanceId: reportMetadata().resourceinstanceid,
                        mapOnly: true,
                    }
                }"></div>    
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

{% endblock summary %}
