{% extends "workflow/viewport-element.html" %}
{% load staticfiles %}

{% load bootstrap3 %}

{% block content %}

<style>
#{{select_type}}_form_div {
        width: 100%;
        padding: 5%;
    }

    .panel {
        border: none;
    }
    .select_panels {
        width: 100%;
        display: grid;
        grid-template-columns: 45% 10% 45%;

    }

    .panel_center {
        text-align: center;
        border: none;

    }
    .panel_center p{
        font-size: 20pt;
    }
</style>

<div id="{{select_type}}_form_div">
    <div class="select_panels">
        <div class="panel_chooser panel">
            <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform">
            {% csrf_token %}
            {{ form|default:"<p>no form loaded</p>" }}
            {% buttons %}

            {% endbuttons %}
            </form>
        </div>
        <div class="panel_center panel"><p>OR</p></div>
        <div class="panel_add panel">
            <button class="btn {% if disabled %} disabled {% endif %}"
                style="width: 100%; height: 100%;"
                {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})"
                {% endif %}>Create {{select_type_title}}
            </button>
        </div>
    </div>
</div>
<script>
    {% if disabled %}
    disable();
    {% endif %}
</script>

{% endblock content %}
{% block onleave %}
var form = $("#{{select_type}}_select_form");
var formData = form.serialize();
var req = new XMLHttpRequest();
req.open("POST", "/wf/workflow/", false);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onerror = function() { alert("problem with form submission"); }
req.send(formData);
{% endblock %}