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

{% block form %}
<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
    <div class="form-group">
        <!-- ko if: node -->
        <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
        <!-- /ko -->
        <div class="control-label">
            <label class="control-label widget-input-label" for="">
                <span data-bind="text: $root.translations.linkText"></span>
            </label>
        </div>
        <div class="col-xs-12">
            <input type="string" data-bind="textInput: url_label, attr: {placeholder: url_label_placeholder}" class="form-control input-lg widget-input" style="margin-bottom: 5px">
        </div>
        <div class="control-label">
            <label class="control-label widget-input-label" for="">
                <span data-bind="text: $root.translations.urlForLink"></span>
            </label>
        </div>
        <div class="col-xs-12">
            <input type="string" data-bind="textInput: url, attr: {placeholder: url_placeholder}" class="form-control
            input-lg widget-input" style="margin-bottom: 5px">
        </div>
        <div class="col-xs-12">
            <label class="control-label widget-input-label" for="">
                <span data-bind="text: $root.translations.preview"></span>
            </label>
            <div style='margin-bottom:2px'>
                <a target="_blank" data-bind="attr: {href: url}, style: { color: link_color }">
                    <span data-bind="text: urlPreviewText()"></span>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock form %}


{% block config_form %}
<div class="control-label">
    <span data-bind="text: $root.translations.urlPlaceholder"></span>
</div>
<div class="col-xs-12 crud-widget-container">
    <input type="" id="" class="form-control input-md widget-input"
    data-bind="textInput: url_placeholder">
</div>
<div class="control-label">
    <span data-bind="text: $root.translations.urlLabelPlaceholder"></span>
</div>
<div class="col-xs-12 crud-widget-container">
    <input type="" id="" class="form-control input-md widget-input"
    data-bind="textInput: url_label_placeholder">
</div>
<div class="control-label">
    <span data-bind="text: $root.translations.urlLinkColor"></span>
</div>
<div class="col-xs-12 crud-widget-container">
    <input type="" id="" class="form-control input-md widget-input"
    data-bind="textInput: link_color">
</div>
{% endblock config_form %}


{% block report %}
<dt data-bind="text: label, class: nodeCssClasses"></dt>
<dd data-bind="class: nodeCssClasses">
    <div style='margin-bottom:2px'>
        <a data-bind="attr: {href: url}, style: { color: link_color }">
            <span data-bind="text: urlPreviewText()"></span>
        </a>
    </div>
</dd>
{% endblock report %}

{% block display_value %}
<a data-bind="attr: {href: url}, style: { color: link_color }, class: nodeCssClasses">
    <span data-bind="text: urlPreviewText()"></span>
</a>
{% endblock display_value %}
