
<div class="modal hide" id="computed-columns">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal">×</button>

        <h3>{% trans "computed columns / modal / title" %}</h3>

        <p>{% trans "computed columns / modal / intro" %} <a target="_blank" href="http://docs.datawrapper.de/computed-columns/">{% trans "computed columns / modal / learn more" %}</a>

        <div class="row" style="margin-bottom:20px; margin-top: 20px;">
            <div class="span2">
                <label><span class="badge">1</span> {% trans "computed columns / modal / select/add column" %}</label>
                <ul class="nav nav-stacked nav-tabs" data-untitled="{% trans "Untitled" %}" data-add-new="{% trans "computed columns / modal / add new" %}">
                </ul>
                <p class="empty-note hint hide">
                    {% trans "computed columns / modal / add new note" %}
                </p>
            </div>
            <div class="span3">
                <div class="control-group">
                    <label><span class="badge">2</span> {% trans "computed columns / modal / column name" %}</label>
                    <input class="col-name" type="text" class="span3" />
                    <div class="col-name-error hide">{% trans "computed columns / modal / column name exists" %}</div>
                </div>
                <div class="control-group">
                    <label><span class="badge">3</span> {% trans "computed columns / modal / formula" %}</label>
                    <div class="code"></div>
                    <div class="col-select">
                        <label>{% trans "computed columns / modal / available columns" %}:</label>
                    </div>
                    
                </div>
            </div>
            <div class="span2">
                <label>{% trans "computed columns / modal / value preview" %}</label>
                <div class="value-preview well"></div>
                <p class="hint">
                    {% trans "computed columns / modal / autocomplete hint" %}
                </p>
                <a class="btn-remove"><i class="fa fa-trash"></i> {% trans "computed columns / modal / remove" %}</a>
            </div>
        </div>

        <a class="btn btn-close btn-primary"><i class="fa fa-check"></i> {% trans "Close" %}</a> 
             
    </div>

</div>
