{% extends "base.html" %}

{% load i18n permissions translations %}

{% block breadcrumbs %}
  {% path_object_breadcrumbs object %}

  <li class="breadcrumb-item">
    <a href="{% url 'show_progress' path=object.get_url_path %}">{% translate "Progress" %}</a>
  </li>
{% endblock breadcrumbs %}

{% block content %}

  {% perm 'component.edit' object as user_can_edit_component %}

  <div class="card"
       data-progress-url="{% url 'api:task-detail' pk=object.background_task %}">
    <div class="card-header">{% translate "Component is being updated…" %}</div>
    <div class="card-body">

      <div class="progress">
        <div class="progress-bar progress-bar-success"
             role="progressbar"
             aria-valuenow="{{ progress }}"
             aria-valuemin="0"
             aria-valuemax="100"
             style="width: {{ progress }}%"></div>
      </div>

      <pre class="update-log">
{{ log }}
</pre>
    </div>
    <div class="card-footer">
      <form class="form-inline">
        <div class="form-group">
          <a href="{% url return_url path=return_target.get_url_path %}"
             class="btn btn-primary"
             id="progress-return">{% blocktranslate %}Continue to {{ return_target }}{% endblocktranslate %}</a>
          {% if user_can_edit_component %}
            <a href="#" class="btn btn-danger" id="terminate-task-button">{% translate "Abort the update" %}</a>
          {% endif %}
        </div>
        <div class="form-group">
          <input type="checkbox" id="progress-redirect" checked="checked">
          <label for="progress-redirect">{% translate "Continue after completion" %}</label>
        </div>
      </form>
    </div>
  </div>

{% endblock content %}