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

{% block form %}
<div class="row widget-wrapper" data-bind="let: {uid: Math.random().toString()}, class: nodeCssClasses">
    <!-- ko if: node -->
    <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
    <!-- /ko -->
    <div class="form-group">
        <div class="widget-inline-tools-collapser" style="max-width: 600px;"
            data-bind="onEnterkeyClick, onSpaceClick,
                click: function() { showEDTFFormats(!showEDTFFormats()); },
                attr: {
                    'aria-expanded': showEDTFFormats().toString(),
                    'aria-label': $root.translations.edtfFormats ,
                    'aria-controls': uid
                }"
            tabindex="0" role="button"
        >
            <span class="control-label widget-input-label" data-bind="text:label"></span><span>
                <i class="fa" data-bind="{
                    css: {
                        'fa-caret-down' : !showEDTFFormats(),
                        'fa-caret-up' : showEDTFFormats(),
                    }
                }"></i>
                <span data-bind="text: $root.translations.edtfFormats"></span>
            </span>
          </div>
          <div class="form-horizontal" data-bind="if: showEDTFFormats, attr: {id: uid}" >
              <article class="edtf-style-tools-panel" aria-label="{% trans 'EDTF Formats and Examples' %}">
                  <div class="widget-help-panel">
                    <p class="widget-help-panel-h2">
                        <span data-bind="text: $root.translations.edtfFormatsExpanded"></span>
                    </p>
                    <p class="widget-help-panel-h3">
                        <span data-bind="text: $root.translations.edtfFormatDescription"></span>
                        <a target="_blank" data-bind="attr: { href: 'https://www.loc.gov/standards/datetime'}, click: function() { return true;}, clickBubble: false" tabindex="-1">
                            <span data-bind="text: $root.translations.edtfDateSpecification"></span>
                        </a>
                    </p>
                    <p class="widget-help-panel-h3">
                        <span data-bind="text: $root.translations.someCommonEncodings"></span>
                    </p>

                    <dl>
                        <dt>
                            2021-04-12
                            <span class="text-thin" data-bind="text: $root.translations.dayPrecisionEncoding"></span>
                        </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.dayPrecisionEncodingExplanation"></span>
                        </dd>

                        <dt>
                            2021-04
                            <span class="text-thin" data-bind="text: $root.translations.monthPrecisionEncoding"></span>
                        </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.monthPrecisionEncodingExplanation"></span>
                        </dd>

                        <dt>
                            2021
                            <span class="text-thin" data-bind="text: $root.translations.yearPrecisionEncoding"></span>
                        </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.yearPrecisionEncodingExplanation"></span>
                        </dd>

                        <dt>1964/2008 </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.timeIntervalYearPrecision"></span>
                        </dd>

                        <dt>2004-06/2006-08 </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.timeIntervalMonthPrecision"></span>
                        </dd>

                        <dt>2004-02-01/2005 </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.timeIntervalYearPrecision"></span>
                        </dd>

                        <dt>Y-100000 </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.negativeYearExplanation"></span>
                        </dd>

                        <dt>2001-21 </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.seasonFormatExplanation"></span>
                        </dd>

                        <dt>1984? </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.yearUncertain"></span>
                        </dd>

                        <dt>2004-06~ </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.yearMonthApproximatea"></span>
                        </dd>

                        <dt>2004-06-11% </dt>
                        <dd class="mar-btm">
                            <span data-bind="text: $root.translations.entireDateApproximate"></span>
                        </dd>
                    </dl>

                  </div>
              </article>
          </div>
        <div class="col-xs-12">
            <input type="text" data-bind="
                textInput: value,
                attr: {placeholder: placeholder, disabled: disabled, 'aria-label': label}"
                class="form-control input-lg widget-input">
        </div>
        <div class="col-xs-12" data-bind="if: value">
            <span class="control-label widget-input-label">
                <span data-bind="text: $root.translations.preview"></span>
            </span>
            <div data-bind="text: transformedEdtf() ? transformedEdtf : $root.translations.notAValidEdtfFormat" style='margin-bottom:2px'>
            </div>
        </div>
    </div>
</div>
{% endblock form %}

{% block config_form %}
<div class="control-label">
    <span data-bind="text: $root.translations.placeholder"></span>
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input
        class="form-control input-md widget-input"
        data-bind="
            attr: {placeholder: $root.translations.placeholder, 'aria-label': $root.translations.placeholder},
            textInput: placeholder
        "
    >
</div>

<div class="control-label">
    <span data-bind="text: $root.translations.defaultValue"></span>
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input
        class="form-control input-md widget-input"
        data-bind="
            attr: {placeholder: $root.translations.defaultValue, 'aria-label': $root.translations.defaultValue},
            textInput: defaultValue
        "
    >
</div>
{% endblock config_form %}
