{% extends "chart/base.twig" %}

{% block content %}

{{ parent() }}

{{ hook('describe_before_content') }}

<link rel="stylesheet" type="text/css" href="/static/vendor/handsontable/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/handsontable-bootstrap/handsontable.bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/static/vendor/codemirror/lib/codemirror.css" />
<link rel="stylesheet" media="screen" type="text/css" href="/static/vendor/codemirror/addon/hint/show-hint.css" />


<script type="text/javascript">
dw.backend.ready(function() {
    require(['dw/chart/describe'], function(describe) {
        describe.init(dw.backend.currentChart.get('language') || "{{ chartLocale }}");
    });
});

</script>

<div class="dw-create-describe chart-editor" {% if readonly %}disabled style="pointer-events:none" {% endif %}>

    <div class="row">

        {% if readonly %}
        <div class="span12">
            <div class="alert">
                <div>{% trans "note / readonly data" %}</div>
            </div>
        </div>
        {% endif %}

        <div class="span4">
            <div class="sidebar">
                <div id="table-options">

                    <h3 class="first">{% trans "Make sure the data looks right" %}</h3>

                    <p>{% trans "Please make sure that Datawrapper interprets your data correctly. In the table number columns should be shown in blue, dates in green and text in black." %}</p>

                    <div>
                        <p>
                            <label class="checkbox"><input id="has-headers" type="checkbox" checked="checked"> {% trans "First row as label" %}</label>
                        </p>
                    </div>

                    {{ hook('describe_before_source') }}

                    

                    {# 
                    <h3 style="margin-top:20px">{% trans "Where did you get the data?" %}</h3>
                    <div>
                        <label>{% trans "Who published the data in the first place?" %}</label>
                        <input id="describe-source-name" type="text" placeholder="name of the organisation">
                    </div>

                    <div>
                        <label>{% trans "If possible, please provide a link the source data" %}</label>
                        <input id="describe-source-url" type="text" placeholder="http://">
                    </div>
                    #}

                </div>

                <div id="column-options">
                    <h3>{% trans "Column options for" %} <span class="selected-columns"></span></h3>

                    <div class="form-horizontal compact">
                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Column type" %}</label>

                            <div class="controls">
                                <select id="column-type" class="select" style="width:90%">
                                    <option data-label="{% trans "auto" %}" value="-"></option>
                                    {% for type, typeLabel in columntypes %}
                                        <option value="{{ type }}">{% trans typeLabel %}</option>
                                    {% endfor %}
                                </select>
                                {# the following line ensures that the column type names are detected
                                   by the xgettext parser, triggered by update-messages.sh #}
                                <!--{% trans 'Text' %} {% trans 'Number' %}{% trans 'Date' %} -->
                            </div>
                        </div>

                    </div>

                    <div id="number-column-options" class="form-horizontal compact">
                        <label class="separator">{% trans "Number format" %}</label>

                        {# <p>
                            <label class="checkbox" for="automatic-format"><input id="automatic-format" type="checkbox"> {% trans "Automatic number formatting" %}</label>
                        </p> #}

                        <div class="control-group number-format">
                            <label class="control-label" for="text-title">{% trans "Divide numbers by" %}</label>

                            <div class="controls">
                                <select class="number-format" id="number-divisor" style="width:90%">
                                    <option value="0">-</option>
                                    <option value="3">{% trans "1000" %}</option>
                                    <option value="6">{% trans "1 million" %}</option>
                                    <option value="9">{% trans "1 billion" %}</option>
                                    <optgroup label="─────────────"></optgroup>
                                    <option value="-2">{% trans "1 hundredth (deci)" %}</option>
                                    <option value="-3">{% trans "1 thousandth (milli)" %}</option>
                                    <option value="-6">{% trans "1 millionth (micro)" %}</option>
                                    <option value="-9">{% trans "1 billionth (nano)" %}</option>
                                    <option value="-12">{% trans "1 trillionth (pico)" %}</option>
                                </select>
                            </div>
                        </div>

                        <div class="control-group number-format">
                            <label class="control-label" for="text-title">{% trans "Round numbers to" %}</label>

                            <div class="controls">
                                <select id="number-format" class="select number-format" style="width:90%">
                                    <option value="-">{% trans "keep original" %}</option>
                                    <optgroup label="{% trans "Decimal places" %}">
                                    {% for id, format in numberformats %}
                                        <option value="{{ id }}">{{ format }}</option>
                                    {% endfor %}
                                    </optgroup>
                                    <optgroup label="{% trans "Significant digits" %}">
                                    {% for id, format in significantdigits %}
                                        <option value="{{ id }}">{{ format }}</option>
                                    {% endfor %}
                                    </optgroup>
                                </select>
                            </div>
                        </div>

                        <div class="control-group number-format">
                            <label class="control-label" for="text-title">{% trans "Prepend/Append" %}</label>

                            <div class="controls">
                                <input type="text" id="number-prepend" style="width:3em;text-align:right"/> # <input type="text" id="number-append" style="width:3em"/>
                            </div>
                        </div>

                    </div>

                    <div style="margin-bottom:15px;">
                        <label class="separator">{% trans "Hide column" %}</label>

                        <p>
                            <label class="checkbox"><input id="column-options-hide" type="checkbox"> {% trans "Hide column from visualization" %}</label>
                        </p>
                    </div>

                    <div class="clearfix"></div>
                </div>
                
                <div class="btn-group">
                    <a class="btn submit" href="upload"><i class="icon-chevron-left"></i> {% trans "Back" %}</a>
                    <a href="visualize" class="submit btn btn-primary" id="describe-proceed">{% trans "Proceed" %} <i class="icon-chevron-right icon-white"></i></a>
                </div>
                <div class="clearfix"></div>
            </div>

            {{ hook('describe_after_sidebar' )}}



        </div>
        <div class="span8">

            <div class="transpose-help help">⤹ <span>{% trans "Transpose data table" %}</span></div>
            <div class="customize-help help"><span>{% trans "Customize column format" %}</span> ⤵︎</div>
            <div id="data-preview" style="width: 770px; max-height: 500px; overflow: auto"></div>

            <div class="buttons below-table pull-right">
                <a class="btn transpose">{% trans "Transpose dataset" %}</a>
                <a class="btn computed-columns"><i class="fa fa-calculator"></i> {% trans "computed columns / add-btn" %}...</a>
                <a class="btn disabled" id="reset-data-changes"><i class="fa fa-undo"></i> {% trans "Revert changes" %}...</a>
            </div>
            
        </div>

    </div>

    <div class="row">
        <div class="span12">
        </div>
    </div>
</div>

{% include "chart/describe/computed-columns.twig" %}</li>

{% endblock %}
