<div class="modal fade" id="modal-new-folder" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

      <form method="POST" action="{{ folder_post_url }}"
            enctype="multipart/form-data">
        {{ csrf_token }}

        <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{ _("Create a new folder") }}</h4>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label class="control-label"
                   for="inputName2">{{ _("Name") }}</label>
            <input type="text" id="inputName2" name="title" value=""
                   class="form-control"/>
            <span class="help-block hide"></span>
          </div>
          <div class="form-group">
            <label class="control-label"
                   for="inputDescription2">{{ _("Description") }}</label>
            <textarea rows="5" class="form-control not-resizeable"
                      id="inputDescription2" name="description"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button data-dismiss="modal"
                  class="btn btn-default">{{ _("Cancel") }}</button>
          <button class="btn btn-primary" type="submit" name="action"
                  value="new">{{ _("Create folder") }}</button>
        </div>
      </form>
    </div>
  </div>
</div>


{% deferJS %}
<script type="text/javascript">
 require(
     ['Abilian', 'SBEFolderEditSetup'],
     function(Abilian, setupFolderEdit) {
         Abilian.fn.onAppInit(function() {
             setupFolderEdit($('#modal-new-folder'),
                             '{{ folder.id }}',
                             'new');
         });
         $('#modal-new-folder input[type="text"]').preventEnterKey();

     });
</script>
{%- enddeferJS %}
