{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template core/filemanager_page_generallayout

    This template renders the html for displaying one file manager

    Example context (json):
    {
        "client_id": "Unique-string",
        "restrictions": "<span>Maximum size for new files: Unlimited</span>",
        "helpicon": "<a class='btn'><i class='icon fa fa-question-circle'></i></a>"
    }
}}
<div id="filemanager-{{{client_id}}}" class="filemanager w-100 fm-loading">
    <div class="fp-restrictions">
        {{{restrictions}}}
        <span class="dnduploadnotsupported-message"> - {{#str}}dndnotsupported_insentence{{/str}}{{{helpicon}}}</span>
    </div>
    <div class="fp-navbar bg-faded card mb-0">
        <div class="filemanager-toolbar icon-no-spacing">
            <div class="fp-toolbar">
                <div class="fp-btn-add">
                    <a role="button" title="{{#str}}addfile, repository{{/str}}" class="btn btn-secondary btn-sm" href="#">
                        {{#pix}}a/add_file{{/pix}}
                    </a>
                </div>
                <div class="fp-btn-mkdir">
                    <a role="button" title="{{#str}}makeafolder{{/str}}" class="btn btn-secondary btn-sm" href="#">
                        {{#pix}}a/create_folder{{/pix}}
                    </a>
                </div>
                <div class="fp-btn-download">
                    <a role="button" title="{{#str}}download, repository{{/str}}" class="btn btn-secondary btn-sm" href="#">
                        {{#pix}}a/download_all{{/pix}}
                    </a>
                </div>
                <div class="fp-btn-delete">
                    <a role="button" title="{{#str}}delete{{/str}}" class="btn btn-secondary btn-sm" href="#">
                        {{#pix}}i/trash{{/pix}}
                    </a>
                </div>
                <span class="fp-img-downloading">
                    <span class="sr-only">{{#str}}loadinghelp{{/str}}</span>
                    {{#pix}}i/loading_small{{/pix}}
                </span>
            </div>
            <div class="fp-viewbar btn-group float-sm-right">
                <a title="{{#str}}displayicons, repository{{/str}}" class="fp-vb-icons btn btn-secondary btn-sm" href="#">
                    {{#pix}}fp/view_icon_active, theme{{/pix}}
                </a>
                <a title="{{#str}}displaydetails, repository{{/str}}" class="fp-vb-details btn btn-secondary btn-sm" href="#">
                    {{#pix}}fp/view_list_active, theme{{/pix}}
                </a>
                <a title="{{#str}}displaytree, repository{{/str}}" class="fp-vb-tree btn btn-secondary btn-sm" href="#">
                    {{#pix}}fp/view_tree_active, theme{{/pix}}
                </a>
            </div>
        </div>
        <div class="fp-pathbar">
            <span class="fp-path-folder"><a class="fp-path-folder-name aalink" href="#"></a></span>
        </div>
    </div>
    <div class="filemanager-loading mdl-align">{{#pix}}i/loading_small{{/pix}}<span class="sr-only">{{#str}}loadinghelp{{/str}}</span></div>
    <div class="filemanager-container card" >
        <div class="fm-content-wrapper">
            <div class="fp-content"></div>
            <div class="fm-empty-container">
                <div class="dndupload-message">{{#str}}dndenabled_inbox{{/str}}<br/>
                    <div class="dndupload-arrow d-flex">
                        <i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i>
                    </div>
                </div>
            </div>
            <div class="dndupload-target">{{#str}}droptoupload{{/str}}<br/>
                <div class="dndupload-arrow d-flex">
                    <i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i>
                </div>
            </div>
            <div class="dndupload-progressbars"></div>
            <div class="dndupload-uploadinprogress">{{#pix}}i/loading_small{{/pix}}<span class="sr-only">{{#str}}loadinghelp{{/str}}</span></div>
        </div>
        <div class="filemanager-updating">{{#pix}}i/loading_small{{/pix}}<span class="sr-only">{{#str}}loadinghelp{{/str}}</span></div>
    </div>
</div>