{% load i18n %}

    <div class="row fieldset">
        <div class="col-md-5">
            <div class="form-group" ng-class="{'has-error': service.plot.errors.x }">
                <label class="control-label" for="plot_x">{% trans 'X axis'%}</label>

                <select class="form-control" id="plot_x" ng-model="service.plot.values.x" ng-change="service.plot.errors.x = null">
                    <option value="">---</option>
                    <option value="{$ option.name $}"
                        ng-repeat="option in service.job.columns">
                        {$ option.name $}
                    </option>
                </select>

                <ul class="help-block list-unstyled">
                    <li ng-show="service.plot.errors.x">
                        <span ng-show="service.plot.errors.x == 'empty'">
                            {% trans 'No column selected' %}
                        </span>
                        <span ng-show="service.plot.errors.x != 'empty'">
                            {% blocktrans with datatype='{$ service.plot.errors.x $}' %}
                            Columns of the type {{ datatype }} can not be plotted
                            {% endblocktrans%}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group" ng-class="{'has-error': service.plot.errors.y }">
                <label class="control-label" for="plot_y">{% trans 'Y axis'%}</label>

                <select class="form-control" id="plot_y" ng-model="service.plot.values.y" ng-change="service.plot.errors.y = null">
                    <option value="">---</option>
                    <option value="{$ option.name $}"
                        ng-repeat="option in service.job.columns">
                        {$ option.name $}
                    </option>
                </select>

                <ul class="help-block list-unstyled">
                    <li ng-show="service.plot.errors.y">
                        <span ng-show="service.plot.errors.y == 'empty'">
                            {% trans 'No column selected' %}
                        </span>
                        <span ng-show="service.plot.errors.y != 'empty'">
                            {% blocktrans with datatype='{$ service.plot.errors.y $}' %}
                            Columns of the type {{ datatype }} can not be plotted
                            {% endblocktrans%}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-2">
            <button class="btn btn-default daiquiri-query-plot-button" ng-click="service.plot.update()">
                {% trans 'Update plot' %}
            </button>
        </div>
    </div>

    <div id="canvas" class="daiquiri-query-plot-canvas"></div>

    <p class="text-muted small" ng-show="service.plot.ready && !service.plot.errors.x && !service.plot.errors.y">
        {% blocktrans with page_size='{$ service.plot.params.page_size $}' trimmed %}
        For performance reasons, we plot only the first {{ page_size }} rows.
        {% endblocktrans %}

        <span ng-show="service.plot.webgl">
        {% blocktrans with page_size='{$ service.plot.params.page_size $}' trimmed %}
        WebGL is enabled (<a href="" ng-click="service.plot.toggle_webgl()">disable</a>).
        {% endblocktrans %}
        </span>

        <span ng-hide="service.plot.webgl">
        {% blocktrans with page_size='{$ service.plot.params.page_size $}' trimmed %}
        WebGL is disabled (<a href="" ng-click="service.plot.toggle_webgl()">enable</a>).
        {% endblocktrans %}
        </span>
    </p>
