<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.field() }}

        <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=""
                   data-check-url="{{ url_for(".check_valid_name", community_id=g.community.slug) }}"
                   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>
    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 %}
