{% load i18n %}

    <div class="row fieldset">
        <div class="col-md-5">
            <formgroup
                data-id="plot_x"
                data-type="select"
                data-label="{% trans 'X axis'%}"
                data-model="service.plot.values.x"
                data-errors="service.plot.errors.x"
                data-options="service.job.columns"
                data-options-id="name"
                data-options-label="name">
            </formgroup>
        </div>
        <div class="col-md-5">
            <formgroup
                data-id="plot_y"
                data-type="select"
                data-label="{% trans 'Y axis'%}"
                data-model="service.plot.values.y"
                data-errors="service.plot.errors.y"
                data-options="service.job.columns"
                data-options-id="name"
                data-options-label="name">
            </formgroup>
        </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 %}
    </p>
