{% load i18n horizon humanize %}

{% block help_message %}
{% endblock %}

<style>
  #actions_available, #actions_selected {
      position: relative;
      min-height: 100px;
  }
</style>

<div class="row">
    <div class="col-sm-12">
        <p>{% blocktrans %}Drag actions in the order they will be executed on the client.{% endblocktrans %}</p>
    </div>
</div>

<div class="sortable_lists row">

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">{% blocktrans %}Available Actions{% endblocktrans %}</div>
            <div class="panel-body">
                <ul id="actions_available" class="connectedSortable list-group dark_stripe">
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">{% blocktrans %}Selected Actions In Order{% endblocktrans %}</div>
            <div class="panel-body">
                <ul id="actions_selected" class="connectedSortable list-group dark_stripe">
                </ul>
            </div>
        </div>
    </div>

</div>

<div class="col-sm-6">
    {% include "horizon/common/_form_fields.html" %}
    {{ table.render }}
</div>
<div class="col-sm-12">
    {{ step.get_help_text }}
</div>

<script type='text/javascript' src='{{ STATIC_URL }}freezer/js/freezer.common.js'></script>
<script type='text/javascript' src='{{ STATIC_URL }}freezer/js/freezer.jobs.sortable.js'></script>