{% 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 "Digital Object" %}:</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>
            <!-- 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,
                    }
                }"></div>
            </div>
            <!-- Publication Details Tab -->
            <div id="tabcontent_publication" class="aher-report-page" data-bind="if: activeSection() === 'publication'" aria-live="polite" role="tabpanel">
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/copyright',
                    params: {
                        data: resource,
                        cards: copyrightCards,
                    }
                }"></div>
            </div>
            <!-- File Tab -->
            <div id="tabcontent_file" class="aher-report-page" data-bind="if: activeSection() === 'file'" aria-live="polite" role="tabpanel">
                <div class="aher-report-section">
                    <h2 class="aher-report-section-title"><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.files)}, onReportSectionToggleAria: visible.files, sectionName: '{% trans "Files" %}'" class="fa toggle"></i> {% trans "Files" %}</h2>
                    <a data-bind="{if: cards['file'], click: function(){addNewTile(cards['file'])}}" class="aher-report-a">
                        <i class="fa fa-mail-reply"></i>
                        <span data-bind="if: cards.file.tiles().length">{% trans "Edit Files" %}</span>
                        <span data-bind="ifnot: cards.file.tiles().length">{% trans "Add Files" %}</span>
                    </a>

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

                        <!-- ko ifnot: files().length -->
                        <div class="aher-nodata-note">{% trans "No files" %}</div>
                        <!-- /ko -->

                        <!-- ko if: files().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>
                                                <th>{% trans "Filename" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody data-bind="dataTablesForEach: { data: files, dataTableOptions: createTableConfig(1)}">
                                            <tr>
                                                <td><a class="aher-table-link" data-bind="text: name, attr: {href: link}" target="_blank"></a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
                <div data-bind="component: {
                    name: 'views/components/reports/scenes/default',
                    params: {
                        data: fileData,
                    }
                }"></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 "(Digital Object)" %}</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,
            }
        }"></div>
    </div>
</div>

{% endblock summary %}
