{% load static %}
{% include "header.html" %}
{% include "navigation.html" %}
{% include "logo.html" %}

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      {% if data.mode == 'new_task' %}
      <h1>New Task</h1>
      {% elif data.mode == 'new_container' %}
      <h1>Add software container</h1>
      {% else %}
      <h1>Importing repository</h1>
      {% endif %}
      <hr>

      <div id="importing">
      Importing repository <code>{{ data.repository_url }}</code>...
      <br>
      <br>
      <br>
      <br>
      <center><img src="/static/img/ajax-loader.gif"></center>
      </div>

      <div id="import_succeded" style="display:none">
      Ok, software container added. Go to <a href="/software">software</a>.
      </div>


      <div id="import_failed" style="display:none">
      FAILED: <span id="import_failed_text"></span>
      </div>

        <script type="text/javascript">
            var apiUrl = '/api/v1/import_repository/?repository_url={{data.repository_url}}&repository_tag={{data.repository_tag}}&container_name={{data.container_name}}&container_description={{data.container_description}}';
            fetch(apiUrl).then(response => {
              console.log(response)
              if (response.status != 200){
            	  // Throw the error catched below
            	  throw response.statusText;
              }
              return response.json();
            }).then(data => {
              // Work with JSON data here
              console.log(data)

              if (data.results.import_succeded){

            	  // Terrbile django templating mixed with javascript
                  {% if data.mode == 'new_task' %}

            	    window.location.replace("/new_task/?step=two&task_container_uuid="+data.results.container_uuid)

                  {% else %}

                    $("#importing").hide();
                    $("#import_succeded").show();

                  {% endif %}

              } else {
            	  throw data.results.error_message
              }

            }).catch(error => {
              // Do something for an error here
              console.log(error)
              $("#importing").hide();
              $("#import_failed").show();
              $("#import_failed_text").html(error);
            });
        </script>

    </div>
  </div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
{% include "footer.html" %}







