@section('media-manager')
<div>
    <div v-if="hidden_element" class="dd">
        <ol id="files" class="dd-list">
            <li v-for="file in getSelectedFiles()" class="dd-item" :data-url="file">
                <div class="file_link selected" aria-hidden="true" data-toggle="tooltip" data-placement="auto" :title="file">
                    <div class="link_icon">
                        <template v-if="fileIs(file, 'image')">
                            <div class="img_icon" :style="imgIcon('{{ Storage::disk(config('voyager.storage.disk'))->url('') }}'+file)"></div>
                        </template>
                        <template v-else-if="fileIs(file, 'video')">
                            <i class="icon voyager-video"></i>
                        </template>
                        <template v-else-if="fileIs(file, 'audio')">
                            <i class="icon voyager-music"></i>
                        </template>
                        <template v-else-if="fileIs(file, 'zip')">
                            <i class="icon voyager-archive"></i>
                        </template>
                        <template v-else-if="fileIs(file, 'folder')">
                            <i class="icon voyager-folder"></i>
                        </template>
                        <template v-else>
                            <i class="icon voyager-file-text"></i>
                        </template>
                    </div>
                    <div class="details" v-if="!hidden_element">
                        <div class="folder">
                            <h4>@{{ getFileName(file) }}</h4>
                        </div>
                    </div>
                    <i class="voyager-x dd-nodrag" v-on:click="removeFileFromInput(file)"></i>
                </div>
            </li>
        </ol>
    </div>
    <div v-if="hidden_element">
        <div class="btn btn-sm btn-primary" v-on:click="expanded = !expanded" data-toggle="modal" :data-target="'#media_picker_modal_'+this._uid">
            選擇圖片
        </div>
    </div>

    <div class="media-picker-modal" :class="hidden_element ? 'modal' : ''" :id="'media_picker_modal_' + this._uid">
        <div class="media-picker-dialog">
            <div class="media-picker-content">
                <div class="modal-header" v-if="hidden_element">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" v-on:click="expanded = !expanded">&times;</button>
                    <h4 class="modal-title"><i class="voyager-folder"></i> {{ __('voyager::media.library') }}</h4>
                </div>
                <div id="toolbar" v-if="showToolbar" :style="expanded ? 'display:block' : 'display:none'">
                    <div class="btn-group offset-right">
                        <button type="button" class="btn btn-primary" id="upload" v-if="allowUpload">
                            <i class="voyager-upload"></i>
                            {{ __('voyager::generic.upload') }}
                        </button>
                        <button type="button" class="btn btn-primary" v-if="allowCreateFolder" data-toggle="modal" :data-target="'#create_dir_modal_'+this._uid">
                            <i class="voyager-folder"></i>
                            {{ __('voyager::generic.add_folder') }}
                        </button>
                    </div>
                    <button type="button" class="btn btn-default" v-on:click="getFiles()">
                        <i class="voyager-refresh"></i>
                    </button>
                    <div class="btn-group offset-right">
                        <button type="button" v-if="showFolders && allowMove" class="btn btn-default" data-toggle="modal" :data-target="'#move_files_modal_'+this._uid">
                            <i class="voyager-move"></i>
                            {{ __('voyager::generic.move') }}
                        </button>
                        <button type="button" v-if="allowDelete" :disabled="selected_files.length == 0" class="btn btn-default" data-toggle="modal" :data-target="'#confirm_delete_modal_'+this._uid">
                            <i class="voyager-trash"></i>
                            {{ __('voyager::generic.delete') }}
                        </button>
                        <button v-if="allowCrop" :disabled="selected_files.length != 1 || !fileIs(selected_file, 'image')" type="button" class="btn btn-default" data-toggle="modal" :data-target="'#crop_modal_'+this._uid">
                            <i class="voyager-crop"></i>
                            {{ __('voyager::media.crop') }}
                        </button>
                    </div>
                    <button :class="toggleList ? 'btn-primary' : 'btn-default'" type="button" class="btn" v-on:click="toggleList = !toggleList">
                        <i class="voyager-list"></i>
                        List
                    </button>
                </div>
                <div id="uploadPreview" style="display:none;" v-if="allowUpload"></div>
                <div id="uploadProgress" class="progress active progress-striped" v-if="allowUpload">
                    <div class="progress-bar progress-bar-success" style="width: 0"></div>
                </div>
                <div id="content" :style="expanded ? 'display:block' : 'display:none'">
                    <div class="breadcrumb-container">
                        <ol class="breadcrumb filemanager">
                            <li class="media_breadcrumb" v-on:click="setCurrentPath(-1)">
                                <span class="arrow"></span>
                                <strong>{{ __('voyager::media.library') }}</strong>
                            </li>
                            <li v-for="(folder, i) in getCurrentPath()" v-on:click="setCurrentPath(i)">
                                <span class="arrow"></span>
                                @{{ folder }}
                            </li>
                        </ol>
                    </div>
                    <div class="flex">
                        <div id="left">
                            <ul id="files" :class="toggleList ? 'toggleList' : ''">
                                <li v-for="(file) in files" v-on:click="selectFile(file, $event)" v-on:dblclick="openFile(file)" v-if="filter(file)">
                                    <div :class="'file_link ' + (isFileSelected(file) ? 'selected' : '')">
                                        <div class="link_icon">
                                            <template v-if="fileIs(file, 'image')">
                                                <div class="img_icon" :style="imgIcon(file.path)"></div>
                                            </template>
                                            <template v-else-if="fileIs(file, 'video')">
                                                <i class="icon voyager-video"></i>
                                            </template>
                                            <template v-else-if="fileIs(file, 'audio')">
                                                <i class="icon voyager-music"></i>
                                            </template>
                                            <template v-else-if="fileIs(file, 'zip')">
                                                <i class="icon voyager-archive"></i>
                                            </template>
                                            <template v-else-if="fileIs(file, 'folder')">
                                                <i class="icon voyager-folder"></i>
                                            </template>
                                            <template v-else>
                                                <i class="icon voyager-file-text"></i>
                                            </template>
                                        </div>
                                        <div class="details">
                                            <div :class="file.type">
                                                <h4>@{{ file.name }}</h4>
                                                <small v-if="!fileIs(file, 'folder')">
                                                    <span class="file_size">@{{ bytesToSize(file.size) }}</span>
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div id="file_loader" v-if="is_loading">