{% extends "views/components/widgets/base.htm" %}
{% load template_tags %}
{% load i18n %}

{% block form %}
<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
    <div class="form-group">
        <label class="control-label widget-input-label" for="" data-bind="text:label"></label>
        <!-- ko if: node -->
        <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
        <!-- /ko -->
        <div class="col-xs-12">
            {% include 'views/components/iiif-widget-annotation.htm' %}
        </div>
    </div>
</div>
{% endblock form %}

{% block config_form %}
<div class="control-label">
    <span data-bind="text: $root.translations.defaultManifestUrl"></span>
</div>
<div class="col-xs-12 crud-widget-container">
    <input
        type=""
        id=""
        class="form-control input-md widget-input"
        data-bind="
            attr: {placeholder: $root.translations.enterManifestUrl},
            textInput: defaultManifest
        "
    >
</div>
{% endblock config_form %}

{% block report %}
<dt data-bind="text: label, class: nodeCssClasses"></dt>
<!-- ko if: canvasConfigs.length === 0 -->
<dd data-bind="text: displayValue() || $root.translations.none, class: nodeCssClasses"></dd>
<!-- /ko -->
<!-- ko if: canvasConfigs.length > 0 -->
<div class="iiif-widget-report" data-bind="class: nodeCssClasses">
<!-- ko foreach: canvasConfigs -->
    <div class="iiif-leaflet" data-bind="leaflet: $data"></div>
<!-- /ko -->
</div>
<!-- /ko -->
{% endblock report %}

{% block display_value %}
<span data-bind="text: displayValue(), class: nodeCssClasses"></span>
<span data-bind="text: $root.translations.annotations, class: nodeCssClasses"></span>
{% endblock display_value %}
