{% extends "infrastructure/overview/deployment_base.html" %}

{% load i18n %}
{% load url from future%}
{% load horizon %}

{% block deployment-icon %}
{% if plan_invalid %}fa-exclamation-circle{% else %}fa-check-circle{% endif %}
{% endblock %}

{% block deployment-title %}
  {% trans "Deployment Checklist" %}
{% endblock %}

{% block deployment-info %}
<a data-toggle="collapse" href="#messages"  aria-expanded="false" aria-controls="messages" id="collapse-steps">{{ steps_message }}</a>
<ul class="fa-ul collapse" id="messages">
    {% for message in plan_messages %}
    <li style="margin-left:{{ message.indent|default:0 }}em">
        <i class="fa-li fa {{ message.classes }}" ></i>
        {{ message.text }}
    </li>
    {% endfor %}
</ul>
{% endblock %}

{% block deployment-buttons %}
<a href="{% url 'horizon:infrastructure:overview:deploy_confirmation' %}"
class="btn btn-primary ajax-modal btn-default {% if plan_invalid %}disabled{% endif %}">
<i class="fa fa-lg fa-rocket"></i> {% trans "Verify and Deploy" %}
</a>
{% endblock %}

{% block templates %}
<script type="text/html" id="title-template">{% spaceless %}{% jstemplate %}
<h4>
[[#validating]]{% trans "Validating the Plan..." %}[[/validating]]
[[^validating]]{% trans "Deployment Checklist" %}[[/validating]]
</h4>
{% endjstemplate %}{% endspaceless %}</script>
<script type="text/html" id="message-template">{% spaceless %}{% jstemplate %}
<ul class="fa-ul collapse" id="messages">
[[#messages]]
  <li style="margin-left: [[indent]]em">
    <i class="fa-li fa [[classes]]"></i>
    [[text]]
  </li>
[[/messages]]
</ul>
{% endjstemplate %}{% endspaceless %}</script>
{% endblock %}
