{% extends "views/components/cards/default.htm" %}
{% load i18n %}

{% block form %}
{% include 'views/components/related-resources-map-editor.htm' %}
{% endblock form %}

{% block config %}
<div>
    <div class="node-config-item">
        <label class="control-label" for="">
            <span data-bind="text: $root.translations.relatedInstanceMapSources"></span>
        </label>
        <input type="text" data-bind="textInput: selectRelatedSource" class="form-control input-md widget-input">
    </div>
    <div class="node-config-item">
        <label class="control-label" for="">
            <span data-bind="text: $root.translations.relatedInstanceMapSourceLayers"></span>
        </label>
        <input type="text" data-bind="textInput: selectRelatedSourceLayer" class="form-control input-md widget-input">
    </div>
    <div>
        <span data-bind="text: $root.translations.intersectionLayerConfiguration"></span>
    </div>
    <div style="padding: 5px 10px 5px; background-color: #eaeaea;">
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.defaultColor"></span>
            </label>
            <input type="text" data-bind="textInput: defaultcolor" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.selectedFeatureColor"></span>
            </label>
            <input type="text" data-bind="textInput: selectioncolor" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.hoveredFeatureColor"></span>
            </label>
            <input type="text" data-bind="textInput: hovercolor" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.layerColorPalette"></span>
            </label>
            <textarea type="text" data-bind="textInput: colorpalette" class="form-control input-md widget-input"></textarea>
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.fillOpacity"></span>
            </label>
            <input type="text" data-bind="textInput: fillopacity" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.overviewZoom"></span>
            </label>
            <input type="text" data-bind="textInput: overviewzoom" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.minZoom"></span>
            </label>
            <input type="text" data-bind="textInput: minzoom" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.pointRadius"></span>
            </label>
            <input type="text" data-bind="textInput: pointradius" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.lineWidth"></span>
            </label>
            <input type="text" data-bind="textInput: linewidth" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.strokeColor"></span>
            </label>
            <input type="text" data-bind="textInput: strokecolor" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.strokeWidth"></span>
            </label>
            <input type="text" data-bind="textInput: strokelinewidth" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.pointStrokeWidth"></span>
            </label>
            <input type="text" data-bind="textInput: strokepointradius" class="form-control input-md widget-input">
        </div>
        <div class="node-config-item">
            <label class="control-label" for="">
                <span data-bind="text: $root.translations.pointStrokeOpacity"></span>
            </label>
            <input type="text" data-bind="textInput: strokepointopacity" class="form-control input-md widget-input">
        </div>
    </div>

</div>
{% endblock config %}
