{% extends 'base.html' %}

{% block content %}
<h1>Migration progress for {{ migration.username }}</h1>

<div class="mt-4">
  <ul class="list-group">
    {% for repository in migration.repositories.all %}
    <li id="revision-{{ repository.id }}" class="list-group-item">
      <div class="d-flex flex-row">
        <div class="d-inline-block mr-auto">
          {{ repository.path_with_namespace }}
        </div>
        <div class="d-inline-block">
          <span class="status status-{{ repository.result }}">
          </span>
        </div>
      </div>
      <pre style="height:140px" class="error_msg form-control is-invalid mt-2 mb-0{% if repository.result != 4 %} d-none{% endif %}">{{ repository.error_message }}</pre>
    </li>
    {% endfor %}
  </ul>
</div>
{% endblock %}

{% block javascript %}
<style>
  .status-1::after { content: "pending"; color: #998800; }
  .status-2::after { content: "success"; color: #339933; font-weight: bold; }
  .status-3::after { content: "exists"; color: #666666; }
  .status-4::after { content: "error"; color: #992222; }
  .status-5::after { content: "in progress"; color: #998800; }
</style>
<script type="text/javascript">
  $(document).ready(function() {
      var PENDING = 1;
      var intervalId;
      function updateStatus() {
          $.getJSON("{% url 'migration_status' migration.id %}", function(status) {
              var alldone = true;

              status.forEach(function (item) {
                  if(item.status == PENDING) { alldone = false; }
                  $('#revision-'+item.id+' span.status').attr('class','status status-'+item.status);
                  if(typeof(item.message) !== "undefined") {
                      $('#revision-'+item.id+' .error_msg').text(item.message).removeClass('d-none');
                  }
              });

              if(alldone) {
                  clearInterval(intervalId);
              }
          });
      }

      intervalId = setInterval(updateStatus, 10000);
  });
</script>
{% endblock %}