{% extends "apps/base.html" %}
{% load filters_deploys %}
{% load staticfiles %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static "css/deploys.css" %}" />
<link rel="stylesheet" href="{% static "css/dropzone.css" %}" />
{% endblock %}

{% block navbar %}
{% include "apps/navbar.html" with active="deploys" %}
{% endblock %}

{% block app-content %}
<div class="row">
  <div class="col-md-12" id="deploy-box">
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <table class="deploys table" id="list">
      {% for deploy in deploys %}
      <tr class="{% if deploy.Error %}bg-danger{% endif %}">
        <td>
          {{ deploy.Timestamp|string_to_date|date:" d-m-Y H:i:s " }}
          - deployed from: {{ deploy.Origin }}
          <br>
          duration: {{ deploy.Duration|time_to_string }} -
          <a href="{% url 'app-deploy' app.name deploy.ID  %}">view info</a>
          {% if deploy.CanRollback and forloop.counter0 %}
          -
          <a class="rollback" href="#confirmation"
          data-toggle="modal" app-name="{{ app.name }}" rollback-url="{% url 'app-rollback' app.name deploy.Image %}">roll back to here</a>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <div class="alert alert-info" role="alert">
        <span class="icon icon-info-sign"></span> Your app don't have any deploy.
      </div>
      {% endfor %}
    </table>
    {% include "deploys/paginator.html" %}
  </div>
</div>
</div>

<div id="confirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="myModalLabel">Are you sure?</h3>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to rollback your app? </p>
        <p>Please type in the name of your app to confirm.</p>
        <input type="text" placeholder="app's name" class="remove-confirmation" />
      </div>
      <div class="modal-footer">
        <form method="get" action="rollback-url">
          <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
          <button class="btn btn-danger btn-rollback" disabled="disabled">Rollback</button>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="deploy"
class="modal fade"
tabindex="-1"
role="dialog"
data-keyboard="false"
data-backdrop="static"
aria-labelledby="myModalLabel"
aria-hidden="true">
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static "js/confirmation.js" %}"></script>
<script src="{% static "js/jszip.js" %}"></script>
<script src="{% static "js/deploy.js" %}"></script>
<script type="text/javascript">
$(".deploys .rollback").on('click', function(ev) {
  ev.preventDefault();
  var appName = $(this).attr("app-name")
  var rollbackUrl = $(this).attr("rollback-url");
  var confirmationForm = $("#confirmation form");
  confirmationForm.attr("action", rollbackUrl);
  $.confirmation(".btn-rollback", ".remove-confirmation", appName);
});
</script>
{% endblock %}
