{% load fullpath %}

<div id="widgetinteract-{{widget.pk}}" rel="{{widget.pk}}" class="widgetinteractdialog"
     title="{{widget.name}} interaction" width="700" height="600">
    <div>
        <form>
            <div class="form-group form-group-sm">
                <label class="control-label">Target table:</label>
                <select class="form-control" name="target_table{{widget.pk}}">
                    {% for table in context.tables %}
                    <option value="{{table}}" {% if forloop.first %}selected="selected" {% endif %}>{{table}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group form-group-sm">
                <label class="control-label">Target attribute:</label>
                <select class="form-control" name="target_att{{widget.pk}}">
                    {% for col in target_cols %}
                    <option value="{{col}}" {% if forloop.first %}selected="selected" {% endif %}>{{col}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group form-group-sm">

                <label class="control-label">Select tables to be used:</label>
                <select class="form-control" multiple name="tables{{widget.pk}}">
                    {% for table in context.tables %}
                    <option value="{{table}}" selected="selected">{{table}}</option>
                    {% endfor %}
                </select>
            </div>
            {% for table, cols in context.cols.items %}
            <div class="form-group form-group-sm">
                <label class="control-label">Select columns for {{table}}:</label>
                <select class="form-control" multiple name="{{table}}_columns{{widget.pk}}">
                    {% for col in cols %}
                    <option value="{{col}}" selected="selected">{{col}}</option>
                    {% endfor %}
                </select>
            </div>
            {% endfor %}
            <div class="form-group form-group-sm">
                <label class="control-label">Detected connections between tables:</label>
                <table id="connections{{widget.pk}}" class="table table-striped">
                    <thead>
                    <tr>
                        <th>Table</th>
                        <th>Referenced table</th>
                        <th>Column</th>
                        <th>Referenced column</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for tables, cols in connections.items %}
                    {% for cols_inner in cols %}
                    <tr>
                        <td>{{tables.0}}</td>
                        <td>{{tables.1}}</td>
                        <td>{{cols_inner.0}}</td>
                        <td>{{cols_inner.1}}</td>
                    </tr>
                    {% endfor %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <input type="hidden" name="widget_id" value="{{widget.pk}}"/>
        </form>
        <script src="{% static_fullpath request 'rdm.db/js/jquery-1.7.1.min.js' %}" type="text/javascript"></script>
        <script type="text/javascript">
            // Columns data.
            var cols = {{ cols | safe }};

            $('select[name="target_table{{widget.pk}}"]').change(function () {
                var selected_table = $(this).first('option:selected').val();
                var available_cols = cols[selected_table];
                // Change the list of options as the target attribute
                var att_select = $('select[name="target_att{{widget.pk}}"]');
                att_select.empty();
                for (idx in available_cols) {
                    var col = available_cols[idx];
                    att_select.append($('<option></option>').attr('value', col).text(col));
                }
            });
        </script>
    </div>
</div>