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

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

{% block config %}
<div>
    <div class="node-config-item">
        <label class="control-label" for="">
            <span data-bind="text: $root.translations.selectDrawingsMapSource"></span>
        </label>
        <input type="text" data-bind="textInput: selectSource" class="form-control input-md widget-input">
    </div>
    <div class="node-config-item">
        <label class="control-label" for="">
            <span data-bind="text: $root.translations.selectDrawingsMapSourceLayer"></span>
        </label>
        <input type="text" data-bind="textInput: selectSourceLayer" class="form-control input-md widget-input">
    </div>
    <div class="node-config-item">
        <label class="control-label" for="">
            <span data-bind="text: $root.translations.selectDrawingsText"></span>
        </label>
        <input type="text" data-bind="textInput: selectText" class="form-control input-md widget-input">
    </div>
    <div class="node-config-item">
        <div class="control-label">
            <span data-bind="text: $root.translations.mapCenterLongitude"></span>
        </div>
        <div class="col-xs-12 pad-no crud-widget-container">
            <input 
                type="number" 
                id="" 
                class="form-control input-md widget-input" 
                data-bind="
                    attr: {placeholder: $root.translations.longitudeXCoordinate},
                    value: centerX, 
                    valueUpdate: 'keyup'
                "
            >
        </div>
    </div>
    <div class="node-config-item">
        <div class="control-label">
            <span data-bind="text: $root.translations.mapCenterLatitude"></span>
        </div>
        <div class="col-xs-12 pad-no crud-widget-container">
            <input 
                type="number" 
                id="" 
                class="form-control input-md widget-input" 
                data-bind="
                    attr: {placeholder: $root.translations.latitudeYCoordinate},
                    value: centerY, 
                    valueUpdate: 'keyup'
                "
            >
        </div>
    </div>
    <div class="node-config-item">
        <div class="control-label">
            <span data-bind="text: $root.translations.defaultZoom"></span>
        </div>
        <div class="col-xs-12 pad-no crud-widget-container">
            <input 
                type="number" 
                min=1 
                max=20
                id="" 
                class="form-control input-md widget-input" 
                data-bind="
                    attr: {placeholder: $root.translations.zoomLevel},
                    value: zoom, 
                    valueUpdate: 'keyup'
                "
            >
        </div>
    </div>
</div>
{% endblock config %}
