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

{% block body %}
<!-- Geometry/Map -->
<div class="aher-report-section" data-bind="if: !!dataConfig.protection">
    <h2 class="aher-report-section-title"><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.geospatial)}, onReportSectionToggleAria: visible.geospatial, sectionName: '{% trans "Designation/Protection" %}'" class="fa toggle"></i> {% trans "Designation/Protection " %}</h2>
    <!-- ko if: checkCardsAvailable($data.cards) -->
    <a href="#" class="aher-report-a" data-bind="{if: cards.designations, click: function(){addNewTile(cards.designations)}}">
        <i class="fa fa-mail-reply"></i> {% trans "Add Designation" %}
    </a>
    <!-- /ko -->

    <!-- Collapsible content -->
    <div data-bind="visible: visible.geospatial" class="aher-report-collapsible-container pad-lft">

        <div class="aher-report-subsection" data-bind="if: geojson() && geojson().features.length">
        <h3><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.map)}, onReportSectionToggleAria: visible.map, sectionName: '{% trans "Geometry" %}'" class="fa toggle"></i> {% trans "Geometry " %}</h3>
            <!-- ko if: checkCardsAvailable($data.cards) -->
            <a href="#" class="aher-report-a" data-bind="{if: cards.locationGeometry, click: function(){addNewTile(cards.locationGeometry)}}"><i class="fa fa-mail-reply"></i> {% trans "Edit location" %}</a>
            <!-- /ko -->
            <div data-bind="visible: visible.map">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/map',
                    params: {
                        geojson: geojson,
                        selectedGeometry: selectedGeometry
                    }}">
                </div>
            </div>
        </div>
        <!-- Designation Records -->
        <div class="aher-report-subsection">
            <h3><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.designations)}, onReportSectionToggleAria: visible.designations, sectionName: '{% trans "Designation/Protection Details" %}'" class="fa toggle"></i> {% trans "Designation/Protection Details " %}</h3>
            <div data-bind="visible: visible.designations">
                <!-- ko ifnot: designations().length -->
                <div class="aher-nodata-note">No designation information for this resource</div>
                <!-- /ko -->

                <!-- ko if: designations().length -->
                <div class="firstchild-container">
                    <!-- designation table  -->
                    <div class="aher-table" style="max-width: 100%">
                        <table class="table table-striped designation" cellspacing="0" width="100%">
                            <thead>
                                <tr class="aher-table-header">
                                    <th>{% trans "Designation Name" %}</th>
                                    <th>{% trans "Protection Type" %}</th>
                                    <th class="min-medium">{% trans "Start Date" %}</th>
                                    <th class="min-medium">{% trans "End Date" %}</th>
                                    <th>{% trans "Grade" %}</th>
                                    <th>{% trans "Risk" %}</th>
                                    <th class="none">{% trans "Amendment Date" %}</th>
                                    <th class="none">{% trans "Display Date" %}</th>
                                    <th class="none">{% trans "Reference" %}</th>
                                    <th class="aher-table-control all"></th>
                                </tr>
                            </thead>
                            <tbody data-bind="dataTablesForEach: {data: designations, dataTableOptions: designationTableConfig}">
                                <tr>
                                    <td data-bind="text: name"></td>
                                    <td data-bind="text: protectionType"></td>
                                    <td data-bind="text: startDate"></td>
                                    <td data-bind="text: endDate"></td>
                                    <td data-bind="text: grade"></td>
                                    <td data-bind="text: risk"></td>
                                    <td data-bind="text: amendmentDate"></td>
                                    <td data-bind="text: displayDate"></td>
                                    <td>
                                        <!-- ko if: reference -->
                                        <a data-bind="text: reference, attr: {href: reference, target: '_blank'}"></a>
                                        <!-- /ko -->
                                    </td>
                                    <td class="aher-table-control">
                                        <div data-bind="if: $parent.cards.designations">
                                            <a href="#" data-bind="onEnterkeyClick, onSpaceClick, click: function() {$parent.editTile(tileid, $parent.cards.designations)}">
                                                <i class="fa fa-mail-reply"></i>
                                            </a>
                                            <a href="#" data-bind="if: $parent.cards.designations.cardinality == 'n', onEnterkeyClick, onSpaceClick, click: $parent.deleteTile.bind($data, tileid, $parent.cards.designations, $parent.resource)">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                        </div>
                                        <i data-bind="visible: $parent.currentDesignation() == tileid" class="fa fa-arrow-left"></i>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

<!-- Area Assignments -->
<div class="aher-report-section" data-bind="if: dataConfig.areaAssignment">
    <h2 class="aher-report-section-title"><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.areaAssignment)}, onReportSectionToggleAria: visible.areaAssignment, sectionName: '{% trans "Area Assignment" %}'" class="fa toggle"></i> {% trans "Area Assignment" %}</h2>
    <a class="aher-report-a" data-bind="{if: cards.areaAssignment || locationRoot, click: function(){addNewTile(cards.areaAssignment || locationRoot)}}"><i class="fa fa-mail-reply"></i> <span data-bind="if: areaAssignment().length">{% trans "Edit Area Assignment" %}</span><span data-bind="ifnot: areaAssignment().length">{% trans "Add Area Assignment" %}</span></a>

    <!-- Collapsible content -->
    <div data-bind="visible: visible.areaAssignment" class="aher-report-collapsible-container pad-lft">

        <!-- ko ifnot: areaAssignment().length -->
        <div class="aher-nodata-note">No area assignments for this resource</div>
        <!-- /ko -->

        <!-- ko if: areaAssignment().length -->
        <div class="aher-report-subsection">

            <div class="firstchild-container">
                <!-- Area Table -->
                <div class="aher-table pad-btm">
                    <table class="table table-striped" cellspacing="0" width="100%">
                        <thead>
                            <tr class="aher-table-header">
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Ownership" %}</th>
                                <th>{% trans "Start Date" %}</th>
                                <th>{% trans "End Date" %}</th>
                                <th>{% trans "SHINE Form" %}</th>
                                <th class="none">{% trans "SHINE Significance" %}</th>
                                <th class="none">{% trans "Reference" %}</th>
                                <th class="aher-table-control all"></th>
                            </tr>
                        </thead>
                        <tbody data-bind="dataTablesForEach:{ data: areaAssignment, dataTableOptions: areaAssignmentsTableConfig}" >
                            <tr>
                                <td data-bind="text: status"></td>
                                <td data-bind="text: ownership"></td>
                                <td data-bind="text: startDate"></td>
                                <td data-bind="text: endDate"></td>
                                <td data-bind="text: shineForm"></td>
                                <td data-bind="text: shineSignificance"></td>
                                <td data-bind="text: reference"></td>
                                <td class="aher-table-control">
                                    <div data-bind="if: $parent.cards.areaAssignment">
                                        <a href="#" data-bind="onEnterkeyClick, onSpaceClick, click: function() {$parent.editTile(tileid, $parent.cards.areaAssignment)}">
                                            <i class="fa fa-mail-reply"></i>
                                        </a>
                                        <a href="#" data-bind="if: $parent.cards.areaAssignment.cardinality == 'n', onEnterkeyClick, onSpaceClick, click: $parent.deleteTile.bind($data, tileid, $parent.cards.areaAssignment, $parent.resource)">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>

<!-- Land Use Classification -->
<div class="aher-report-section" data-bind="if: dataConfig.landUse">
    <h2 class="aher-report-section-title"><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.landUse)}, onReportSectionToggleAria: visible.landUse, sectionName: '{% trans "Land Use Classification" %}'" class="fa toggle"></i> {% trans "Land Use Classification" %}</h2>
    <a class="aher-report-a" data-bind="{if: cards.landUse || locationRoot, event:{ mousedown:function(d, e){addNewTile(cards.landUse || locationRoot, e)}}}"><i class="fa fa-mail-reply"></i> <span data-bind="if: landUseClassification().length">{% trans "Edit Classification" %}</span><span data-bind="ifnot: landUseClassification().length">{% trans "Add Classification" %}</span></a>

    <!-- Collapsible content -->
    <div data-bind="visible: visible.landUse" class="aher-report-collapsible-container pad-lft">

        <!-- ko ifnot: landUseClassification().length -->
        <div class="aher-nodata-note">No land use classes for this resource</div>
        <!-- /ko -->

        <!-- ko if: landUseClassification().length -->
        <div class="aher-report-subsection">

            <div class="firstchild-container">
                <!-- Land Use Table -->
                <div class="aher-table pad-btm">
                    <table class="table table-striped" cellspacing="0" width="100%">
                        <thead>
                            <tr class="aher-table-header">
                                <th>{% trans "Land Use" %}</th>
                                <th>{% trans "Start Date" %}</th>
                                <th>{% trans "End Date" %}</th>
                                <th class="none">{% trans "Sub-soil" %}</th>
                                <th class="none">{% trans "Geology" %}</th>
                                <th class="none">{% trans "Reference" %}</th>
                                <th class="aher-table-control all"></th>
                            </tr>
                        </thead>
                        <tbody data-bind="dataTablesForEach: {data: landUseClassification, dataTableOptions: landUseTableConfig}">
                            <tr>
                                <td data-bind="text: classification"></td>
                                <td data-bind="text: startDate"></td>
                                <td data-bind="text: endDate"></td>
                                <td data-bind="text: subSoil"></td>
                                <td data-bind="text: geology"></td>
                                <td data-bind="text: reference"></td>
                                <td class="aher-table-control">
                                    <div data-bind="if: $parent.cards.landUse">
                                        <a href="#" data-bind="onEnterkeyClick, onSpaceClick, click: function() {$parent.editTile(tileid, $parent.cards.landUse)}">
                                            <i class="fa fa-mail-reply"></i>
                                        </a>
                                        <a href="#" data-bind="if: $parent.cards.landUse.cardinality == 'n', onEnterkeyClick, onSpaceClick, click: $parent.deleteTile.bind($data, tileid, $parent.cards.landUse, $parent.resource)">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
{% endblock body %}
{% endblock report %}
{% block summary %}

<div class="model-summary-report">
Do not use - yet.
</div>

{% endblock summary %}