<!-- form as modal panel -->
<div class="modal fade bs-example-modal-lg"
     id="new-work-area-modal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Cancel</span>
                </button>
                <p class="modal-title"
                   style="font-size: 2.5vmin; font-weight: bold;">New Area</p>
            </div>
            <div class="modal-body">
                <div class="container-fluid"
                     style="padding: 0px;">
                    {% form_theme new_area_form _self %}
                    <form id="new-area-form"
                          action="{{ path('work_area_new') }}" {{ form_enctype(new_area_form) }}
                          method="POST">
                        <div class="container-fluid">
                            <div class="col-lg-5"><label class="form-label">Area name:</label>
                                {{ form_widget(new_area_form.name, { 'attr': {
                                'tabindex' : 1,
                                'class': 'form-control for-desktop',
                                'placeholder': 'Area Name'} }) }}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button form="new-area-form" id="new-area-modal-create-button"
                        type="submit" class="btn btn-primary">
                    Create
                </button>
                <button id="new-area-modal-cancel-button"
                        type="button"
                        class="btn btn-warning"
                        data-dismiss="modal">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>