{% extends "projects/base.html" %}

{% load blocktrans trans from i18n %}
{% load is_admin from privacy_tags %}

{% block title %}
  {{ build.project.name }}
{% endblock title %}

{% block content-header %}
  {% include "projects/partials/header.html" with builds_active="active" %}
{% endblock content-header %}

{% block content %}
  <div data-bind="using: BuildDetailView({}, '{% url "build-detail" build.id %}', '{% url "projects-builds-notifications-list" build.project.slug build.id %}')">

    {% block build_detail_metadata %}
      <div class="ui top attached segment">
        <div class="ui stackable grid">

          {# Build progress on the left #}
          {% block build_detail_metadata_left %}
            <div class="ui eleven wide column">
              <div class="ui truncating header">
                {% comment %}
                  The state icon expects the build API response directly instead, so
                  we recreate the used fields here.

                  The `data_bind` attribute is used when the build has not finished
                  yet -- when we can expect the page might update with a new build
                  state. Otherwise, it's skipped and we can assume there is no data
                  binding.
                {% endcomment %}
                <span data-bind="with: {state: {code: state()}, success: success()}">
                  {% include "builds/includes/status_icon.html" with build=build size="small" circular=True data_bind=True %}
                </span>
                <div class="content">
                  {% include "builds/includes/build_name.html" with build=build is_page_title=True %}
                </div>
              </div>

              <div class="ui basic segment loading padded"
                   data-bind="css: { loading: is_loading() }">
                <div class="ui active progress"
                     data-bind="semanticui: {progress: progress_config()}">
                  <div class="bar">
                    <div class="progress"></div>
                  </div>
                  <div class="label"></div>
                </div>
              </div>
            </div>
          {% endblock build_detail_metadata_left %}

          {# Build metadata on the right #}
          {% block build_detail_metadata_right %}
            <div class="ui five wide middle aligned column">
              <div class="ui relaxed list ko hidden"
                   data-bind="css: { hidden: is_loading() }">
                <div class="item">
                  <i class="grey fa-duotone fa-calendar icon"></i>
                  <div class="content">
                    <span class="sub header">{% trans "Started" %}</span>
                    <time data-bind="attr: { 'data-tooltip': date_display() }, text: date_display_since"></time>
                  </div>
                </div>

                <div class="item">
                  <i class="grey fa-duotone fa-clock icon"></i>
                  <div class="content">
                    <span class="sub header">{% trans "Duration" %}</span>
                    <span data-bind="text: length_display"></span>
                  </div>
                </div>

                {# Version type is static, and some of these attributes are not in the APIv2 response  #}
                <div class="item">
                  <i class="grey fa-duotone {{ build.is_external | yesno:"fa-code-pull-request,fa-code-branch" }} icon"></i>
                  <div class="content">
                    {% if build.is_external %}
                      <span class="sub header">
                        {{ build.external_version_name | lower | capfirst }}
                      </span>
                      <a href="{{ build.version.vcs_url }}"><code>#{{ build.get_version_name }}</code></a>
                    {% else %}
                      <span class="sub header">{{ build.get_version_type | lower | capfirst }}</span>
                      {{ build.get_version_name }}
                    {% endif %}
                    <code class="ko hidden" data-bind="css: { hidden: !commit() }">
                      <a data-bind="attr: {href: commit_url}">
                        {% spaceless %}
                          <span>(</span>
                          <span data-bind="text: commit_short">{{ build.commit }}</span>
                          <span>)</span>
                        {% endspaceless %}
                      </a>
                    </code>
                  </div>
                </div>

              </div>
            </div>
          {% endblock build_detail_metadata_right %}

        </div>
      </div>
    {% endblock build_detail_metadata %}

    <div class="ui attached stackable menu">
      <a class="active item">
        <i class="fa-duotone fa-terminal icon"></i>
        {% trans "Output" %}
      </a>
      <a class="item" href="{% url "build-detail" build.pk "txt" %}">
        <i class="fa-duotone fa-memo-circle-info icon"></i>
        {% trans "Raw log" %}
      </a>
      <a class="ui item"
         data-bind="click: toggle_debug, css: {active: show_debug()}">
        <i class="fa-duotone fa-microscope icon"></i>
        {% trans "Debug" %}
      </a>
      <div class="item">
        <div class="ui small checkbox">
          <input type="checkbox" data-bind="checked: is_wrapped" />
          <label>Wrap output</label>
        </div>
      </div>
      <div class="right menu">

        {% if request.user|is_admin:project %}
          <a class="item ko hidden"
             data-bind="click: $root.post_child_form, css: { hidden: !can_cancel() }">
            <form method="post"
                  action="{% url "builds_detail" build.project.slug build.pk %}">
              {% csrf_token %}
            </form>
            <i class="fas fa-xmark-large red icon"></i>
            {# Translators: this refers to cancelling a build #}
            {% trans "Cancel" %}
          </a>

          {% if object.project and object.version %}
            <readthedocs-menu-build-rebuild class="link item ko hidden"
                                            data-bind="css: { hidden: !can_retry() }"
                                            url="{% url "projects-versions-builds-list" object.project.slug object.version.slug %}"
                                            csrf-token="{{ csrf_token }}">
              <i class="fa-duotone fa-refresh icon"></i>
              {# Translators: this refers to rebuilding a version build #}
              {% trans "Rebuild" %}
            </readthedocs-menu-build-rebuild>
          {% endif %}
        {% endif %}

        {% trans "View documentation for this build" as text_view_docs %}
        <a class="disabled item"
           data-bind="css: {disabled: !can_view_docs()}, attr: {href: docs_url}"
           aria-label="{{ text_view_docs }}"
           target="_blank"
           title="{{ text_view_docs }}">
          <i class="fa-duotone fa-book icon"></i>
          {% trans "View docs" %}
        </a>
      </div>
    </div>

    {% if build.output %}
      {% comment %}
        This is a very old build type, before we supported individual build
        commands. It is very not supported anymore so we'll just throw an error
        so we're not silently failing.
      {% endcomment %}
      <div class="ui inverted notification error message">
        <div class="header">
          <i class="fas fa-exclamation-circle icon"></i>
          {% trans "Build output unavailable" %}
        </div>
        <p>
          {% blocktrans %}
            Due to the age of this build, the output of this build is no longer available.
          {% endblocktrans %}
        </p>
      </div>
    {% else %}

      {% block build_detail_notifications %}
        {% comment %}
          Build notification and error list

          This uses ``readthedocs-notification`` directly, so that the build
          detail view can handle all of the API requests in one place.

          We pass the entire API notification response object into the web
          component, which handles the data the same way as the notification
          list element.
        {% endcomment %}
        <div class="ko hidden ui attached fitted inverted basic segment"
             data-bind="css: { hidden: !has_notifications() }, foreach: notifications">
          <readthedocs-notification inverted="true"
                                    csrf-token="{{ csrf_token }}"
                                    data-bind="webcomponent: {notification: $data}">
          </readthedocs-notification>
        </div>

        {% comment %}
          Support for old style build errors, without notifications. In these
          builds, ``error`` is a string and there is no header, so we use a
          generic header instead.
        {% endcomment %}
        <div class="ko hidden ui attached fitted inverted basic segment"
             data-bind="css: { hidden: !error() }">
          <div class="ui inverted error notification message">
            <div class="header">
              <i class="fad fa-circle-exclamation icon"></i>
              {% trans "There was an error with this build" %}
            </div>
            <p data-bind="text: error"></p>
          </div>
        </div>
      {% endblock build_detail_notifications %}

      <div class="ui inverted bottom attached horizontally scrolling segment transition slide">

        {% comment %}
          This is a loading placeholder. The extra element is to fill out the
          extra space in the div
        {% endcomment %}
        <div class="ui hidden active dimmer" data-bind="visible: is_loading()">
          <div class="ui text loader">Loading</div>
        </div>
        <div class="ui basic segment very padded"
             data-bind="visible: is_loading()"></div>

        <table class="ko hidden ui small very basic compact inverted selectable command unstackable table"
               data-bind="css: { hidden: !commands(), 'single line': !is_wrapped() }, foreach: commands">
          <tbody>
            <tr class="top aligned command"
                data-bind="visible: is_visible() || $parent.show_debug()">
              <td class="collapsing">
                <a class="ui icon left floated" data-bind="click: toggle_expanded">
                  <i class="grey fa-solid fa-angle-right icon"
                     data-bind="class: is_expanded() ? 'fa-angle-down' : 'fa-angle-right'"></i>
                </a>
              </td>
              <td class="command">
                <code class="ui text"
                      data-bind="text: command, class: !finished() && $parent.is_finished() ? 'red' : command_class, click: toggle_expanded"></code>
                <a class="ui mini inverted label"
                   data-bind="text: '{% trans "Running" %}', visible: !finished() && !$parent.is_finished()"></a>
                <a class="ui mini inverted label"
                   data-bind="text: '{% trans "Killed" %}', visible: !finished() && $parent.is_finished()"></a>
                <a class="ui mini inverted label"
                   data-bind="text: run_time() + 's', visible: finished()"></a>
                <a class="ui mini inverted label"
                   data-bind="text: '{% trans "Exit" %}: ' + exit_code(), visible: finished() && exit_code() > 0"></a>
              </td>
            </tr>
          </tbody>
          <tbody data-bind="visible: (is_visible() || $parent.show_debug()) && is_expanded(), foreach: output_lines">
            <tr data-bind="css: {'left olive marked': is_selected()}"
                class="top aligned">
              <td class="collapsing line number">
                <a class="ui small grey left floated text"
                   data-bind="attr: {href: '#' + anchor_id(), 'data-selected': is_selected()}, click: function() { $parents[1].set_selected_line($data) }">
                  <code data-bind="text: line_number()"></code>
                </a>
              </td>
              <td class="stdout">
                <code data-bind="text: output"></code>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="ko hidden"
             data-bind="css: { hidden: is_loading() || !is_polling() }">
          <div data-bind="visible: is_polling"
               class="ui active inverted mini centered inline text loader">
          </div>
        </div>

      </div>
    {% endif %}

  </div>
{% endblock content %}