{% 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 %}
