{% load i18n %}
{% load template_tags %}

<div>
    <div class="upload-dataset-related-widget">
        <h4>{% trans "Related Datasets" %}</h4>
        <p style="padding-left: 26px; margin-top: -5px;">{% trans "We found the following datasets for the object you selected" %}</p>
    </div>

    <div style="padding: 5px; margin-bottom: 15px; width: 700px">
        <div class="widget-input-label" style="margin-bottom: 5px;">{% trans "Physical Thing" %}*</div>
        <div data-bind="component: {
            name: 'resource-instance-select-widget',
            params: {
                graphids: [
                    '9519cb4f-b25b-11e9-8c7b-a4d18cec433a',
                ],
                renderContext: 'workflow', 
                value: physicalThingResourceId,
                disabled: false
            }
        }"></div>
    </div>
    <div class="col-xs-12" style="padding-left: 30px;">
        <!-- ko if: dataLoaded() === true -->
        <div class="pad-hor rows option-input" data-bind="foreach: relatedDigitalResources">
            <label class="form-checkbox form-normal form-primary form-text" style="overflow: visible;" data-bind="css: {active: $data.selected} ">
                <input type="checkbox" data-bind="checked: $data.selected">
                <span data-bind="text:displayname"></span>
            </label>
        </div>
        <!-- /ko -->

        <!-- ko if: !relatedDigitalResources().length != 0 && physicalThingResourceId() != undefined -->
        <div class="rows option-input">
            <div style="margin-bottom: 10px; border: 1px solid #ddd; padding: 5px 15px; background-color: #fde9ad;color: #666;">
                <span>
                    {% trans "This physical thing has no digital resources.  Select another or run through the upload dataset workflow."%}
                </span>
            </div>
        </div>
        <!-- /ko -->
    </div>

</div>