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

{% block body %}
<!-- Copyright section -->
<div class="aher-report-section" data-bind="visible: !!dataConfig.copyright">
    <h2 class="aher-report-section-title"><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.copyright)}, onReportSectionToggleAria: visible.copyright, sectionName: '{% trans "Copyrights" %}'" class="fa toggle"></i> {% trans "Copyrights" %}</h2>
    <!-- ko if: checkCardsAvailable($data.cards) -->
     <a href="#" data-bind="{if: cards.copyright, click: function(){addNewTile(cards.copyright)}}"  class="aher-report-a"><i class="fa fa-mail-reply"></i> {% trans "Copyright" %}</a>
    <!-- /ko -->
    <!-- Collapsible content -->
    <div data-bind="visible: visible.copyright" class="aher-report-collapsible-container pad-lft">

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

        <!-- ko if: copyright().length -->
        <div class="aher-report-subsection">
            <div class="firstchild-container">
                <div class="aher-table">
                    <table class="table table-striped" cellspacing="0" width="100%">
                        <thead>
                            <tr class="aher-table-header">
                                <th>{% trans "Type" %}</th>
                                <th>{% trans "Statement" %}</th>
                                <th class="aher-table-control all"></th>
                            </tr>
                        </thead>
                        <tbody data-bind="dataTablesForEach: { data: copyright, dataTableOptions: copyrightTableConfig}">
                            <tr>
                                <td data-bind="text: copyrightType"></td>
                                <td data-bind="text: copyrightStatement"></td>
                                <td class="aher-table-control">
                                    <div data-bind="if: $parent.cards.copyright">
                                        <a href="#" data-bind="onEnterkeyClick, onSpaceClick, click: function() {$parent.editTile(tileid, $parent.cards.copyright)}">
                                            <i class="fa fa-mail-reply"></i>
                                        </a>
                                        <a href="#" data-bind="if: $parent.cards.copyright.cardinality == 'n', onEnterkeyClick, onSpaceClick, click: $parent.deleteTile.bind($data, tileid, $parent.cards.copyright, $parent.resource)">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>

<div class="aher-report-section">
    <h2 class="aher-report-section-title"><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.images)}, onReportSectionToggleAria: visible.images, sectionName: '{% trans "Images" %}'" class="fa toggle"></i> {% trans "Images" %}</h2>
    <!-- ko if: checkCardsAvailable($data.cards) -->
     <a href="#" data-bind="{if: cards.images, click: function(){addNewTile(cards.images)}}" class="aher-report-a"><i class="fa fa-mail-reply"></i> {% trans "Add Photo" %}</a>
    <!-- /ko -->

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

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

        <!-- ko if: images().length -->
        <div class="aher-report-subsection">
            <div class="firstchild-container">
                <div class="aher-report-photo-container">
                    <!-- ko foreach: {data: images} -->
                    <div class="aher-report-photo-block">
                        <div class="aher-report-photo" data-bind="click: function(){$parent.editTile(tileid, $parent.cards.images)}">
                            <img data-bind="attr: {src: path}" />
                        </div>
                        <div class="aher-report-photo-caption">
                            <div class="aher-report-subsection-item flex column-order pad-top pad-btm">
                                <div class="aher-block-attributes">
                                    <span class="aher-block-key">Caption: </span>
                                    <div class="aher-block-value" data-bind="text: caption"></div>
                                </div>
                                <div class="aher-block-attributes">
                                    <span class="aher-block-key">Copyright holder: </span>
                                    <div class="aher-block-value" data-bind="text: copyrightHolder"></div>
                                </div>
                                <div class="aher-block-attributes">
                                    <span class="aher-block-key">Copyright type: </span>
                                    <div class="aher-block-value" data-bind="text: copyrightType"></div>
                                </div>
                                <div class="aher-block-attributes">
                                    <span class="aher-block-key">Copyright note: </span>
                                    <div class="aher-block-value" data-bind="text: copyrightNote"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
{% endblock body %}
{% endblock report %}