{% extends "base.html" %}
{% load i18n %}
{% load translations %}
{% load permissions %}

{% block breadcrumbs %}
<li><a href="{{ object.project.get_absolute_url }}">{{ object.project }}</a></li>
{% include "snippets/component-breadcrumb.html" %}
<li><a href="{% url 'component_progress' project=object.project.slug component=object.slug %}">{% trans "Progress" %}</a></li>
{% endblock %}

{% block content %}

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

<div class="panel panel-default" data-progress-url="{% url 'api:task-detail' pk=object.background_task %}">
<div class="panel-heading">{% trans "Component is being updated…" %}</div>
<div class="panel-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="panel-footer">
<form class="form-inline">
  <div class="form-group">
<a href="{% url return_url project=object.project.slug component=object.slug %}" class="btn btn-primary" id="progress-return">{% trans "Return to the component" %}</a>
{% if user_can_edit_component %}
<a href="#" class="btn btn-danger" id="terminate-task-button">{% trans "Abort the update" %}</a>
{% endif %}
  </div>
  <div class="form-group">
    <input type="checkbox" class="form-control" id="progress-redirect" checked="checked">
    <label for="progress-redirect">{% trans "Return to the component after completion" %}</label>
  </div>
</form>
</div>
</div>

{% endblock %}
