{% 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="aher-report-toolbar">
            <h1 class="aher-report-toolbar-title"><span class="aher-report-name">{% trans "Place" %}:</span><span data-bind="text: displayname" class="aher-report-instance-name"></span></h1>
        </div>

    </div>
    {% endblock report_title_bar %}

    
    {% block body %}
    <!-- Link nav -->
    <div class="aher-report-anchor-container">
        <ol class="aher-report-anchors breadcrumb">
            <!-- ko foreach: {data: sections, as: 'section'} -->
            <li tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function(){$parent.activeSection(section.id)},
                css: {active: $parent.activeSection() === section.id},
                text: section.title, attr: {'aria-controls': 'tabcontent_' + section.id, 'aria-expanded': $parent.activeSection() === section.id ? 'true' : 'false'}"
                class="aher-report-a" aria-expanded="false" role="tab"></li>
            <!-- /ko -->
        </ol>
    </div>
    <div class="aher-tabbed-report">
        <div class="aher-tabbed-report-content">
            <!-- Names Tab -->
            <div id="tabcontent_name" class="aher-report-page" data-bind="if: activeSection() === 'name'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/name',
                    params: {
                        data: resource,
                        cards: nameCards,
                        dataConfig: nameDataConfig
                    }
                }"></div>
            </div>

            <!-- Classification Tab -->
            <div id="tabcontent_classifications" class="aher-report-page" data-bind="if: activeSection() === 'classifications'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/classifications',
                    params: {
                        data: resource,
                        dataConfig: classificationDataConfig,
                        cards: classificationCards,
                    }
                }"></div>

                <div data-bind="component: {
                    name: 'views/components/reports/scenes/default',
                    params: {
                        data: currencyData,
                    }
                }"></div>
            </div>
            <!-- Description Tab -->
            <div id="tabcontent_description" class="aher-report-page" data-bind="if: activeSection() === 'description'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/description',
                    params: {
                        data: resource,
                        cards: descriptionCards,
                        dataConfig: descriptionDataConfig
                    }
                }"></div>
            </div>
            <!-- Resources Tab -->
            <div id="tabcontent_resources" class="aher-report-page" data-bind="if: activeSection() === 'resources'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/resources',
                    params: {
                        data: resource,
                        cards: resourcesCards,
                        dataConfig: resourceDataConfig
                    }
                }"></div>
            </div>
            <!-- People Tab -->
            <div id="tabcontent_people" class="aher-report-page" data-bind="if: activeSection() === 'people'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/default',
                    params: {
                        data: peopleData,
                    }
                }"></div>
            </div>
            <!-- Contact Details Tab -->
            <div id="tabcontent_contact" class="aher-report-page" data-bind="if: activeSection() === 'contact'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/contact',
                    params: {
                        data: resource,
                        cards: contactCards,
                    }
                }"></div>
            </div>
            <!-- Location Tab -->
            <div id="tabcontent_location" class="aher-report-page" data-bind="if: activeSection() === 'location'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/location',
                    params: {
                        data: resource,
                        cards: locationCards,
                        dataConfig: locationDataConfig
                    }
                }"></div>
            </div>
             <!-- JSON Tab -->
            <div id="tabcontent_json" class="aher-report-page aher-flex-col" data-bind="if: activeSection() === 'json'" aria-live="polite" role="tabpanel">
                <div class="aher-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="aher-summary-report-header">
    <h1 class="aher-summary-report-title"><span data-bind="text: displayname" class="aher-report-instance-name"></span><span class="aher-report-name pad-lft-sm">{% trans "(Place)" %}</span></h1>
</div>
<div class="model-summary-report">
    <div class="aher-report-page">
        <!-- Names -->
        <div data-bind="component: {
            name: 'views/components/reports/scenes/name',
            params: {
                data: resource,
                cards: nameCards,
                dataConfig: nameDataConfig
            }
        }"></div>
        <!-- Description -->
        <div data-bind="component: {
            name: 'views/components/reports/scenes/description',
            params: {
                data: resource,
                cards: descriptionCards,
                dataConfig: descriptionDataConfig
            }
        }"></div>
    </div>
</div>

{% endblock summary %}
