{% extends 'horizon/common/_workflow.html' %}
{% load i18n %}
{% block modal-footer %}
      {% if workflow.wizard %}
      <div class="row">
        <div class="col-sm-6 back">
            <button type="button" class="btn btn-default button-previous">&laquo; {% trans "Back" %}</button>
        </div>
        <div class="col-sm-6 next">
            {% if modal %}<a class="btn btn-default cancel">{% trans "Cancel" %}</a>{% endif %}
            <button type="button" class="btn btn-primary button-next">{% trans "Next" %} &raquo;</button>
            <button type="submit" class="btn btn-primary button-final">{{ workflow.finalize_button_name }}</button>
        </div>
      </div>
      {% else %}
        <input class="btn btn-primary pull-right" type="submit" value="{{ workflow.finalize_button_name }}" />
        {% if modal %}<a class="btn btn-default cancel">{% trans "Cancel" %}</a>{% endif %}
      {% endif %}
{% endblock %}

{% block modal-js %}
    {{ block.super }}

    <script>

        var $checkbox = $('#id_restart'),
            $footer = $('.modal-footer'),
            $finalBtn = $footer.find('.button-final'),
            $nextBtn = $footer.find('.button-next'),
            $previousBtn = $footer.find('.button-previous');

        $('.wizard-tabs').hide();

        buttons(false);

        $checkbox.on('change', function(event) {
            var $this = $(this);
            buttons($this.is(':checked'));
        });

        function buttons(checked) {
            checked ? $finalBtn.hide(): $finalBtn.show();
            checked ? $nextBtn.show(): $nextBtn.hide();
            checked ? $previousBtn.show(): $previousBtn.hide();
        }

    </script>

{% endblock %}