{% extends "webgateway/base/base_main.html" %}

{% block title %}Dataset split view{% endblock %}

{% block link %}
<!-- block overrides base css etc -->
<!-- Following jquery links etc are not needed when this is a plugin loaded into webclient -->
<!-- In fact, re-importing jQuery will overwrite $.jstree etc -->
<!-- {% include "webgateway/base/includes/script_src_jquery.html" %} -->
<script type="text/javascript" src="{% static "webclient/javascript/jquery.form.js" %}"></script>
{% endblock %}

{% block script %}

<!-- this page is designed to work without jQuery, but use jQuery when this page is loaded E.g. into webclient -->
<script>
    $(document).ready(function() {
        
        $("#split_dataset_form").ajaxForm({
            success: function(data) {
                $("#split_dataset_table").html(data);
            }
        });
    });
</script>

<style type="text/css">

body {
    /** font-family: arial; **/
}
form dir {
    padding:0px;
    margin:0px;
}
.img_panel {
    border-width: 0px;
    margin: 5px;
}
.ch_toggle {
    padding:3px; margin:3px; border-radius: 6px; text-align:right; min-width:120px
}

</style>

{% endblock %}


{% block body %}
<div>
    <form id="split_dataset_form" method='get' action="{% url 'webtest_dataset_split_include' dataset.id %}">
        <div>
            <table width="100%">
            <tr>
                <td width="16%"></td>
                <td width="16%">
                    {% for c in channels %}
                    <div class="ch_toggle" style="background:#{{c.colour}}">
                        <span style="background:#fff; opacity:0.8; padding:1px">{{ c.name }}</span>
                        <input type="checkbox" name="cActiveLeft{{c.index}}" {% if c.active_left %} checked="true" {% endif %} />
                    </div>
                    {% endfor %}
                </td>
                <td width="33%"></td>
                <td width="16%">
                    {% for c in channels %}
                    <div class="ch_toggle" style="background:#{{c.colour}}">
                        <span style="background:#fff; opacity:0.8; padding:1px">{{ c.name }}</span>
                        <input type="checkbox" name="cActiveRight{{c.index}}" {% if c.active_right %} checked="true" {% endif %} />
                    </div>
                    <div style="display:none">
                        <input type="text" size='3' name="cStart{{c.index}}" value="{{ c.start }}" />
                        -
                        <input type="text" size='3' name="cEnd{{c.index}}" {% if c.end %} value="{{ c.end }}" {% endif %} />
                    </div>
                    {% endfor %}
                </td> 
                <td width="16%" style="vertical-align: bottom">
                    <div style="float:right; clear: both">Image Size: </div>
                    <input type="text" name="size" style="float:right; clear: both" size="10" {% if size %} value="{{ size }}" {% endif %} />
                    <input type="submit" value='update' style="float:right; clear: both" />
                </td>
                <td style="display:none">
                    <input type="checkbox" name="cRenderAll{{c.index}}" {% if c.render_all %} checked="true" {% endif %} />
                </td>
            </tr>
            </table>
        </div>
        <div style="clear: both"></div>
    </form>
</div>
    
<div id="split_dataset_table">

    {% include "webtest/webclient_plugins/dataset_split_include.html" %}

</div>
{% endblock %}