{% load i18n %}

<p>
    On this page, you can find an overview about a submitted query job. For a table view of the results, the plotting tool, and to access the download form, please use the tabs at the top of the page.
</p>

<div class="panel panel-default" ng-show="service.job.query">
    <div class="panel-heading">
        {% trans 'Query' %}
    </div>
    <div class="panel-body">
        <div class="cm-s-default" id="query">
            {$ service.job.query $}
        </div>
    </div>
    <div class="panel-footer">
        <a href="" ng-click="service.forms.sql.copy_query(service.job.query_language, service.job.query)">
            {% trans 'Open new query form with this query' %}
        </a>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        {% trans 'Job parameters' %}
    </div>
    <div class="panel-body">
        <dl class="dl-horizontal">
            <dt>{% trans 'Job status' %}</dt>
            <dd ng-class="{
                'text-success': service.job.phase == 'COMPLETED',
                'text-warning': service.job.phase == 'TIMEOUT',
                'text-danger': service.job.phase == 'ERROR',
                'text-info': service.job.phase == 'QUEUED'}">
                {$ (service.phases|filter: {'id': service.job.phase})[0].text $}
            </dd>

            <div ng-show="service.job.phase == 'ERROR'">
                <dt>{% trans 'Error' %}</dt>
                <dd class="text-danger">{$ service.job.error_summary $}</dd>
            </div>

            <dt>{% trans 'Full database table name' %}</dt>
            <dd>{$ service.job.schema_name $}.{$ service.job.table_name $}</dd>

            <dt>{% trans 'Internal job id' %}</dt>
            <dd>{$ service.job.id $}</dd>

            <dt>{% trans 'Time submitted' %}</dt>
            <dd>{$ service.job.creation_time $}</dd>

            <div ng-show="service.job.queue">
                <dt>{% trans 'Queue' %}</dt>
                <dd>{$ (service.queues|filter: {'id': service.job.queue})[0].text $}</dd>
            </div>

            <div ng-show="service.job.start_time && service.job.creation_time">
                <dt>{% trans 'Time in queue' %}</dt>
                <dd>{$ service.job.time_queue $} s</dd>
            </div>

            <div ng-show="service.job.end_time && service.job.start_time">
                <dt>{% trans 'Time for query' %}</dt>
                <dd>{$ service.job.time_query $} s</dd>
            </div>

            <div ng-show="service.job.nrows != null">
                <dt>{% trans 'Number of rows' %}</dt>
                <dd>{$ service.job.nrows $}</dd>
            </div>

            <div ng-show="service.job.size != null">
                <dt>{% trans 'Size of the table' %}</dt>
                <dd>{$ service.job.size | bytes $}</dd>
            </div>

            <div ng-show="service.job.sources.length">
                <dt>{% trans 'Source tables' %}</dt>
                <dd ng-repeat="source in service.job.sources">
                    <a href="{$ source.url $}" target="blank">
                        {$ source.schema_name $}.{$ source.table_name $}
                    </a>
                </dd>
            </div>
        </dl>
    </div>
    <div class="panel-footer">
        <div ng-show="service.job.phase == 'COMPLETED'">
            <a href="" ng-click="service.modal('update-job-modal')">
                {% trans 'Rename the job\'s result table or run id' %}
            </button>
        </div>
        <div ng-show="service.job.phase == 'EXECUTING' || service.job.phase == 'PENDING' || service.job.phase == 'QUEUED'">
            <a href="" ng-click="service.modal('abort-job-modal')">
                {% trans 'Abort the job' %}
            </a>
        </div>
        <div ng-hide="service.job.phase == 'EXECUTING' || service.job.phase == 'PENDING' || service.job.phase == 'QUEUED'">
            <a href="" ng-click="service.modal('archive-job-modal')">
                {% trans 'Archive the job' %}
            </a>
        </div>
    </div>
</div>

<div class="panel panel-default" ng-show="service.job.native_query">
    <div class="panel-heading">
        {% trans 'Native query' %}
    </div>
    <div class="panel-body">
        <div class="cm-s-default" id="native-query">
            {$ service.job.native_query $}
        </div>
    </div>
</div>

<div class="panel panel-default" ng-show="service.job.actual_query">
    <div class="panel-heading">
        {% trans 'Actual query' %}
    </div>
    <div class="panel-body">
        <div class="cm-s-default" id="actual-query">
            {$ service.job.actual_query $}
        </div>
    </div>
</div>
