{% extends "base.html" %}

{% block preTitle %}
  {{ project.display_name }} (Build) -
{% endblock %}

{% block bodyclass %}job_view{% endblock %}

{% block extra_head %}
  <link rel="stylesheet" href="/styles/plugin-status-compiled.css">
{% endblock %}

{% block bodyContent %}
  {% set page = "build" %}
  <div class="app ng-cloak" ng-app="job-status">
    <script>
      var project = {{ project | scriptjson() | raw }};
      var jobs = {{ jobs | scriptjson() | raw }};
      var job = {{ job | scriptjson() | raw }};
      var showStatus = {{ showStatus | scriptjson() | raw }};
      var canAdminProject = {{ canAdminProject === true ? 'true' : 'false' }};
    </script>

    <base href="/{{ page_base }}/"></base>
    <div id="build-page" class="main" ng-view></div>

    <script id="/build-tpl.html" type="text/ng-template">
      <div class="span8">
        <div class="row-fluid job-page-intro">
          <div class="job-title">
            {% pluginblock JobPagePreTitle %}{% endpluginblock %}
            <h3 class="clearfix">
              {% if currentUser %}
                <button ng-hide="job.running || job.project.access_level < 1"
                      ng-click="startDeploy(job)"
                      title="Test &amp; Deploy"
                      class="button is-outlined test-and-deploy-action">
                  <span class='icon'>
                    <i class="fa fa-cloud-upload"></i>
                  </span>
                  <span>Test &amp; Deploy</span>
                </button>
                <button ng-hide="job.running || job.project.access_level < 1"
                      ng-click="startTest(job)"
                      title="Test" class="button is-outlined test-only-action">
                  <span class='icon'>
                    <i class="fa fa-refresh"></i>
                  </span>
                  <span>Test</span>
                </button>
              {% endif %}
              <span class='job-repo'>{{ project.display_name }}</span>
              <div class='pull-right'>
                <a href="[[ project.display_url ]]" class='button'target="_blank">
                  <i class="fa fa-[[ project.provider.id ]]"></i>
                </a>
                {% if currentUser %}
                  <a href="/[[ project.name ]]/config" ng-hide="job.project.access_level < 2" title="Configure" class="button is-dark is-outlined">
                    <span class="icon">
                      <i class="fa fa-wrench"></i>
                    </span>
                    <span>
                      Configure
                    </span>
                  </a>
                {% endif %}
              </div>
            </h3>
            {% pluginblock JobPagePostTitle %}{% endpluginblock %}
          </div>
        </div>

        <div class="job-main">
            <div class="row-fluid job-wrap">
              {% pluginblock JobPagePreCols %}
              {% endpluginblock %}
              <div class="job-left-col">
                <div class="row-fluid [[ job.status ]]" id="build-metadata">
                  {% if jobs.length === 0 %}
                    <div class="span12">
                      <p class="lead">
                        No builds have been triggered yet.
                      </p>
                    </div>
                  {% else %}
                    {% include "partials/build_metadata.html" %}
                  {% endif %}

                  <div class="build-error" ng-show="job.status === 'errored' && job.error">
                    <div class="alert alert-error">
                      <i class="fa fa-exclamation-triangle"></i>
                      [[ job.error.message.substr(0,10000) ]]
                      <a href="#" class="pull-right" ng-click="toggleErrorDetails()" ng-if="job.error.stack">
                        <i class="fa fa-ellipsis-h"></i>
                      </a>
                      <pre ng-if="showErrorDetails" ng-show="job.error.stack">[[ job.error.stack ]]</pre>
                    </div>
                  </div>
                </div>

                <div class="row job-pre-console">
                  <div class="span12 job-pre-console-inner">
                    {% pluginblock JobPagePreConsole %}
                    {% endpluginblock %}
                  </div>
                </div>

                {% for block in statusBlocks.runner %}
                  <div class="status-{{ loop.key }} plugin-status runner-status {{ block.attrs.class }}"
                       plugin-status="{{ loop.key }}"{% for val in block.attrs %}{% if loop.key != 'class' %} {{ loop.key }}="{{ val }}"{% endif %}{% endfor %}>
                    {{ block.html | raw }}
                  </div>
                {% endfor %}

                {% if statusBlocks.provider[project.provider.id] %}
                  <div class="status-{{ loop.key }} plugin-status provider-status {{ block.attrs.class }}"
                       plugin-status="{{ loop.key }}"{% for val in block.attrs %}{% if loop.key != 'class' %} {{ loop.key }}="{{ val }}"{% endif %}{% endfor %}>
                    {{ block.html | raw }}
                  </div>
                {% endif %}

                {% for block in statusBlocks.job %}
                  <div class="status-{{ loop.key }} plugin-status job-plugin-status {{ block.attrs.class }}"
                       plugin-status="{{ loop.key }}"{% for val in block.attrs %}{% if loop.key != 'class' %} {{ loop.key }}="{{ val }}"{% endif %}{% endfor %}>
                    {{ block.html | raw }}
                  </div>
                {% endfor %}

                <div class="console-output">
                  <i class="fa fa-gear fa-light fa-spin loading-icon" ng-show="loading"></i>
                  {% include "build/console.html" %}
                </div>
              </div>
            </div>
        </div>
      </div>

      <div class="span4">
        <div class='job-detail-sidebar'>
          {% include "build/history.html" %}
        </div>
      </div>
    </script>
  </div>
  {% pluginblock AfterJobPage %}{% endpluginblock %}
{% endblock %}
