{% load staticfiles %}
<!--
The drop down button that will allow a user to add a new
-- File
-- File URL link
-- New Folder
-->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="new_document_item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        + New Item
    </button>
    <div class="dropdown-menu" aria-labelledby="new_document_item">
        <!-- Give the user the ability to upload the document -->
        <a class="dropdown-item" href="javascript:void(0)" data-toggle="modal" data-target="#document_upload_modal">New File Upload</a>
        <a class="dropdown-item" href="javascript:void(0)" data-toggle="modal" data-target="#new_url_modal">New File URL Link</a>
        <a class="dropdown-item" href="javascript:void(0)" data-toggle="modal" data-target="#new_folder_modal">New Folder</a>
    </div>
</div>

<!--
The table that will display the current directory.
-->
<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th scope="col" width="70%">Name</th>
            <th scope="col" width="20%">Date Uploaded</th>
            {% if permission_results >= 3 %}
                <th scope="col" width="10%">Delete</th>
            {% endif %}
        </tr>
    </thead>
    <tbody>
        <!-- PARENT FOLDER
        If the parent folder id is none - then just reload with the location and destination.
        -->
        {% if current_folder_results %}
            <tr>
                <td>
                    {% if current_folder_results.parent_folder_id %}
                        <a href="javascript:void(0)" onclick="load_document_tree_list({{ location_id }},'{{ destination }}',{{ current_folder_results.parent_folder_id.folder_id }})">../</a>
                    {% else %}
                        <a href="javascript:void(0)" onclick="load_document_tree_list({{ location_id }},'{{ destination }}')">../</a>
                    {% endif %}
                </td>
            </tr>
            <td></td>
            {% if permission_results >= 3 %}
                <td></td>
            {% endif %}
        {% endif %}
        <!-- LOOP FOR FOLDERS -->
        {% for row in folder_results %}
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="load_document_tree_list({{ location_id }},'{{ destination }}',{{ row.folder_id }})">
                        <img src="{% static 'NearBeach/widgets/feather/folder.svg' %}">{{ row.folder_description }}
                    </a>
                </td>
                <td></td>
                {% if permission_results >= 3 %}
                    <td><img src="{% static 'NearBeach/widgets/feather/trash-2.svg' %}" onclick="confirm_delete_folder('{{ row.folder_id }}',{{ location_id }},'{{ destination }}', {{ folder_id }})"></td>
                {% endif %}
            </tr>
        {% endfor %}
        <!-- LOOP FOR DOCUMENTS -->
        {% for row in document_permission_results %}
            <tr>
                <td><a href="{% url 'private' row.document_key.document_key %}" target="_blank">{{ row.document_key.document_description }}</a></td>
                <td>2018-10-03</td>
                {% if permission_results %}
                    <td><img src="{% static 'NearBeach/widgets/feather/trash-2.svg' %}" onclick="confirm_delete_document('{{ row.document_key.document_key }}',{{ location_id }},'{{ destination }}', {{ folder_id }})"></td>
                {% endif %}
            </tr>
        {% endfor %}
    </tbody>
</table>


<!-- DOCUMENT FILE UPLOAD -->
<div class="modal" tabindex="-1" role="dialog" id="document_upload_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- HEADER -->
            <div class="modal-header">
                <h5 class="modal-title">Document File Upload</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- BODY -->
            <div class="modal-body">
                <form id="document_upload_form" enctype="multipart/form-data">
                    {{ document_upload_form.document }}
                    {{ document_upload_form.document_description }}
                </form>
            </div>
            <div class="progress">
                <div id="document_upload_progress" class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

            <!-- FOOTER -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="upload_document({{ location_id }},'{{ destination }}', {{ folder_id }})">Upload Document</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



<!-- New File URL -->
<div class="modal" tabindex="-1" role="dialog" id="new_url_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- HEADER -->
            <div class="modal-header">
                <h5 class="modal-title">New File URL</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- BODY -->
            <div class="modal-body">
                Please copy the URL and paste into the URL Field. Place a description of the document in the description field
                <form id="document_url_form" enctype="multipart/form-data">
                    {{ document_url_form.document_url_location }}
                    {{ document_url_form.document_description }}
                </form>
            </div>


            <!-- FOOTER -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="upload_url({{ location_id }},'{{ destination }}', {{ folder_id }})">Link URL</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



<!-- New Folder -->
<div class="modal" tabindex="-1" role="dialog" id="new_folder_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- HEADER -->
            <div class="modal-header">
                <h5 class="modal-title">New Folder</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- BODY -->
            <div class="modal-body">
                <form id="new_folder_form" enctype="multipart/form-data">
                    {{ new_folder_form.folder_description }}
                </form>
            </div>


            <!-- FOOTER -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="new_folder({{ location_id }},'{{ destination }}', {{ folder_id }})">New Folder</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



<!-- CONFIRM DELETION OF DOCUMENT -->
<div class="modal" tabindex="-1" role="dialog" id="confirm_document_delete">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- HEADER -->
            <div class="modal-header">
                <h5 class="modal-title">Delete Document?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- BODY -->
            <div class="modal-body">
                <p>Are you sure you want to delete the file?</p>
            </div>


            <!-- FOOTER -->
            <div class="modal-footer">
                <button id="remove_document_confirmed" disabled type="button" class="btn btn-danger btn-ok">Delete Document</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<!-- CONFIRM DELETION OF FOLDER -->
<div class="modal" tabindex="-1" role="dialog" id="confirm_folder_delete">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- HEADER -->
            <div class="modal-header">
                <h5 class="modal-title">Delete Folder?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- BODY -->
            <div class="modal-body">
                <p>Are you sure you want to delete the folder?</p>
            </div>


            <!-- FOOTER -->
            <div class="modal-footer">
                <button id="remove_folder_confirmed" disabled type="button" class="btn btn-danger btn-ok">Delete Document</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    /*
    The following will prevent the "Enter" key from submitting the
    forms by mistake. This will limit it to getting the user to press
    the button instead.
     */
    $("#document_upload_form").on("submit", function(e){
        e.preventDefault();
    });
    $("#document_url_form").on("submit", function(e){
        e.preventDefault();
    });
    $("#new_folder_form").on("submit", function(e){
        e.preventDefault();
    });
</script>