{# modals included in Folder templates (folder.html and permissions.html) #}
{%- set folder_post_url = url_for(".folder_post", folder_id=folder.id, community_id=folder.community.slug) %}

<div class="modal fade" id="modal-upload-files" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST"
            class="b-upload b-upload_multi"
            action="{{ folder_post_url }}"
            enctype="multipart/form-data" style="margin-bottom: 0;">
        {{ csrf_token }}

        <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <h3>{{ _("Upload new files") }}</h3>
        </div>

        <div class="modal-body">
          <div class="multiupload">
            <div class="btn btn-default btn-small btn-file js-fileapi-wrapper">
              <span class="glyphicon glyphicon-plus"></span>
              <span>{{ _('Add files to selection') }}</span>
              <input name="file" type="file">
            </div>

            <ul class="list-group js-files b-upload__files">

              <li class="list-group-item js-file-tpl">
                <div class="media b-thumb" data-id="<%=uid%>" title="<%-name%> (<%-sizeText%>)">
                  <div class="pull-left b-thumb__preview">
                    <div class="media-object b-thumb__preview__pic" style="width: 40px; height: 40px"></div>
                  </div>

                  <div class="pull-right">
                    <div style="display: inline-block; width: 10em;">
                      <div class="progress">
                        <div class="progress-bar" role="progressbar">
                        </div>
                      </div>
                    </div>

                    <div class="hidden btn btn-default pull-right statusicon">
                      <span class="glyphicon"></span>
                    </div>

                    <div class="btn btn-danger b-thumb__del" data-fileapi="file.remove">
                      <span class="glyphicon glyphicon-minus"></span>
                    </div>
                  </div>

                  <div class="media-body">
                    <div class="b-thumb__name">
                      <h4 class="list-group-item-heading"><%-name%></h4>
                      <span>(<%-sizeText%>)</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" name="uncompress_files" value="true" />
              {{ _('Uncompress ZIP files') }}
            </label>
          </div>
        </div> <!-- modal-body -->

        <div class="modal-footer">
          <button data-dismiss="modal" class="btn btn-default">{{ _("Cancel") }}</button>
          <div class="js-upload btn btn-success btn-small">
            <span>{{ _("Upload") }}</span>
          </div>
        </div>
        {%- deferJS %}
        <script type="text/javascript">
         var form_data = {action: "upload"};
         form_data[Abilian.csrf_fieldname] = Abilian.csrf_token;
         $('#modal-upload-files').fileapi({
           multiple: true,
           url: {{ folder_post_url|tojson }},
           data: form_data,
           dataType: null, {# not JSON #}
           clearOnComplete: false,
           elements: {
             ctrl: { upload: '.js-upload' },
             empty: { show: '.b-upload__hint' },
             emptyQueue: { hide: '.js-upload' },
             list: '.js-files',
             file: {
               tpl: '.js-file-tpl',
               preview: {
                 el: '.b-thumb__preview',
                 width: 40,
                 height: 40
               },
               upload: { hide: '.b-thumb__rotate' },
               progress: '.progress .progress-bar',
               complete: { },
             }
           },
           onComplete: function (evt, ui) { location.reload(); }
         }).on('fileupload.fileapi filecomplete.fileapi', function(evt, ui) {
           var type = evt.type,
           uid = FileAPI.uid(ui.file),             
           widget = $(this).fileapi('widget'),
           $file_ui = widget.$file(uid),
           $status_el = $file_ui.find('.statusicon');
           $icon = $status_el.find('.glyphicon');
           
           if (type == 'fileupload') {
             $icon.addClass('glyphicon-upload');
             $status_el.removeClass('hidden');
           }
           else if (type == 'filecomplete') {
             $icon.removeClass('glyphicon-upload');
             $icon.addClass('glyphicon-ok');
             $status_el.removeClass('btn-default');
             $status_el.addClass('btn-success');
             $file_ui.find('.progress .progress-bar').width('100%');
           }
         }).on('hidden.bs.modal', function(evt) {
           /* clear file selection when modal is hidden (cancel button) */
           $(this).fileapi('widget').clear();
         });

         form_data = null;
        </script>
            {%- enddeferJS %}
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-move-files" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST"
            name="modal-move-files"
            action="{{ folder_post_url }}"
            enctype="multipart/form-data" style="margin-bottom: 0;">

            {{ csrf_token }}  
            <div class="modal-header">{{ _("Move files or documents") }}</div>

            <div id="modal-move-files-directory-listing" class="modal-body">
              <ul class="breadcrumb">
              </ul>
              <table class="table table-striped table-condensed">
                <thead>
                  <tr>
                    <th style="width: 1%;"></th>
                  </tr>
                </thead>
                <tbody>        
                </tbody>
              </table>
            </div>
            <div class="modal-footer">
              <div id="modal-move-files-inputs" class="hide"></div>
              <button data-dismiss="modal" class="btn btn-default">{{ _('Cancel') }}</button>
              <button id="modal-move-button-submit" class="btn btn-primary" type="submit" name="action"
                      value="move">{{ _("Move to selected folder") }}</button>
            </div>
            
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-edit" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">      
      <form method="POST" class="form-horizontal"
            action="{{ folder_post_url }}"
            enctype="multipart/form-data" style="margin-bottom: 0;" role="form">
            {{ csrf_token }}
            <div class="modal-header">
              <button class="close" data-dismiss="modal">&times;</button>
              <h3>{{ _("Edit folder properties") }}</h3>
            </div>

            <div class="modal-body">
              <div class="form-group">
                <label class="control-label" for="inputName">{{ _('Name') }}</label>
                <input type="text" class="form-control" id="inputName" name="title" value="{{ folder.title }}" />
                <span class="help-block"></span>
              </div>

              <div class="form-group">
                <label class="control-label" for="inputDescription">{{ _("Description") }}</label>
                <textarea rows="5" class="form-control not-resizeable" id="inputDescription" name="description">{{ folder.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="edit">{{ _("Save changes") }}</button>
            </div>
      </form>
    </div>
  </div>
</div>

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

      <form method="POST" class="form-horizontal"
            action="{{ folder_post_url }}"
            enctype="multipart/form-data" style="margin-bottom: 0;">
            {{ csrf_token }}  
            <div class="modal-header">
              <button class="close" data-dismiss="modal">&times;</button>
              <h3>{{ _("Create a new folder") }}</h3>
            </div>

            <div class="modal-body">
              <div class="control-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="control-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>
