{% extends "base.html" %}
{% load staticfiles %}

{% load bootstrap4 %}

{% block content %}

<!-- Pagination -->
<div class="row mt-3">
    <div class="col">
        <nav>
            <ul class="pagination d-flex flex-row" id="topPagination">
                <li class="page-item flex-shrink-1 page-control">
                    <a class="page-link" href="#" id="gob" onclick="submit_and_go('prev')">
                        <i class="fas fa-backward"></i> Back
                    </a>
                </li>
                <li class="page-item flex-grow-1">
                    <a class="page-link disabled" href="#">
                        <i class="far"></i>
                    </a>
                </li>
                <li class="page-item flex-shrink-1 page-control">
                    <a class="page-link text-right" href="#" id="gof" onclick="submit_and_go('next')">
                        Next <i class="fas fa-forward"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- Top header -->
<div class="row">
    <div class="col">
        <div id="iframe_header" class="row view-header">
            <div class="col-lg-12">
                <h1 class="d-inline-block" id="view_title"></h1>
                <span class="description text-muted" id="view_desc"></span>
                <p id="view_message"></p>
            </div>
        </div>
    </div>
    <div class="col-auto align-self-center d-flex">
        <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="pop_workflow()">Cancel</button>
    </div>
</div>
<div class="row d-flex flex-column flex-grow-1 mt-3">
    <div class="col flex-grow-1">
        <div id="formContainer" class="h-100 w-100"></div>
    </div>
</div>
{% csrf_token %}
<script type="text/javascript">
    function submit_and_go(to) {
        submitStepForm(to);
    }

    $(document).ready(function(){
        $.ajax({
            url: "/workflow/manager/",
            dataType: "json",
            success: update_page
        });
    });
</script>
<!-- lazy load scripts -->
<script type="text/javascript" src="/static/js/mxClient.min.js" ></script>
<!-- end lazy load scripts -->
<div class="d-none" id="workflow_pop_form_div">
    <form id="workflow_pop_form" action="/workflow/finish/" method="post">
        {% csrf_token %}
    </form>
</div>
{% endblock content %}