<style>

    .nav-pills > .nav-item > .nav-link {
        height: 5rem;
        display: flex;
        align-items: center;
    }

    .nav-pills > .sub-item > .nav-link {
        height: 3rem;
        padding-left: 3rem;
    }

    .nav-pills > li.active > a, .nav-pills > li:hover > a {
        background-color: #ddd;
        border-radius: 0;
        color: #333844;
    }


    .carousel-image {
        height: 50vh;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .carousel-indicators {
        bottom: 0;
    }

    .carousel-label, .carousel-label:hover {
        position: absolute;
        bottom: 0;
        background: linear-gradient(transparent 10px, rgba(0, 0, 0, .4), rgba(0, 0, 0, .5));
        padding: 40px 20px 30px;
        width: 100%;
        color: white;
        word-break: break-word;
        text-align: center;
    }

    .carousel-control-background {
        border-radius: 50%;
        width: 25px;
        height: 25px;
        box-shadow: 0 0 10px #666;
        background-color: #666;
    }

    #uploadForm > .dz-default.dz-message {
        border: 2px dashed #ccc;
        border-radius: 5px;
        color: #aaa;
        margin: 0;
        padding: 3rem 0;
    }
    #lfm_empty {
        padding-bottom: 0.8em;
    }
    .messages-card {
        overflow: visible;
    }
    .badge.indicator_before {
        margin-right: 0.3em;
        width: 0.8em;
        height: 0.8em;
        margin-bottom: 0.3em;

        /*-webkit-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);*/
    }
    .file-manager-row-view .file-item-changed {
        width: auto;
    }
    .default-style .file-manager-row-view .file-item-name {
        width: auto;
    }

    .file-item-actions.btn-group .btn-default {
        border-right: 1px solid rgba(24, 28, 33, 0.3);
        border-left: 1px solid rgba(24, 28, 33, 0.3);
    }
    .file-item-checkbox .custom-control-label::before{
        border:1px solid rgba(24, 28, 33, 0.3);
    }

    .file-item {
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .file-item:hover {
        border: 1px solid #f2bf24;
        background-color: rgba(242, 191, 36, 0.1);
    }

    .modal-xl .modal-long {
        padding: 0.5rem;
    }


</style>
@if(!$modal)
    <h4 class="font-weight-bold mb-4">
        Medien
    </h4>
@endif

<div id="alerts"></div>

<div class="card messages-card">
    <div class="row no-gutters">

        <!-- content list -->
        <div class="col">
            <div class="file-manager-actions container-p-x py-2">
                <div>
                    <button id="lfm_upload" type="button" class="btn btn-primary mr-2"><i class="fas fa-upload"></i>&nbsp; Hochladen</button>
                    <button id="lfm_add-file" type="button" class="btn btn-default mr-2"><i class="fas fa-file"></i> Neue Datei</button>
                    <button id="lfm_add-folder" type="button" class="btn btn-secondary mr-2"><i class="fas fa-folder"></i> Neuer Ordner</button>
                    <div class="btn-group mr-2 d-none media-multi-settings">
                        <button type="button" class="btn btn-default md-btn-flat dropdown-toggle px-2" data-toggle="dropdown"><i class="ion ion-ios-settings"></i> Optionen</button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:void(0)" data-action="selected_items_move"><i class="fa fa-reply-all"></i> verschieben</a>
                            <a class="dropdown-item" href="javascript:void(0)" data-action="selected_items_remove"><i class="fa fa-trash-alt"></i> löschen</a>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                        <label class="btn btn-default icon-btn md-btn-flat active">
                            <input type="radio" name="file-manager-view" value="file-manager-col-view" checked> <span class="ion ion-md-apps"></span>
                        </label>
                        <label class="btn btn-default icon-btn md-btn-flat">
                            <input type="radio" name="file-manager-view" value="file-manager-row-view"> <span class="ion ion-md-menu"></span>
                        </label>
                    </div>
                </div>
            </div>
            <!-- <a class="navbar-brand d-block d-lg-none" id="current_folder"></a> -->

            <div class="container-m-nx container-m-ny bg-lightest mb-2" id="lfm_breadcrumbs">

                <ol class="breadcrumb text-big container-p-x py-3 m-0">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0)">home</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0)">projects</a>
                    </li>
                    <li class="breadcrumb-item active">site</li>
                </ol>

                <hr class="m-0">
            </div>
            <div id="lfm_loading" class="d-none text-center mb-4"><i class="fas fa-spinner fa-spin"></i></div>
            <div id="lfm_empty" class="text-center d-none">
                <i class="fa fa-folder-open"></i>
                {{ trans('laravel-filemanager::lfm.message-empty') }}
            </div>

            <div id="lfm_item-template" class="file-item d-none">
                <div class="file-item-select-bg bg-primary"></div>
                <label class="file-item-checkbox custom-control custom-checkbox lfm-click-disable">
                    <input type="checkbox" class="custom-control-input lfm-control-input lfm-click-disable">
                    <span class="custom-control-label lfm-click-disable"></span>
                </label>
                <a href="javascript:void(0)" class="file-item-name">

                </a>
                <div class="file-item-changed"></div>
                <div class="file-item-actions btn-group lfm-click-disable">
                    <button type="button" class="btn btn-default btn-sm rounded-pill icon-btn md-btn-flat hide-arrow dropdown-toggle lfm-click-disable" data-toggle="dropdown"><i class="ion ion-ios-more lfm-click-disable"></i></button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="javascript:void(0)" data-action="item_rename"><i class="fa fa-sync-alt"></i> umbenennen</a>
                        <a class="dropdown-item" href="javascript:void(0)" data-action="item_move"><i class="fa fa-reply"></i> verschieben</a>
                        <a class="dropdown-item link-item-download" href="javascript:void(0)" data-action="item_download"><i class="fa fa-download"></i> download</a>
                        <a class="dropdown-item link-item-crop" href="javascript:void(0)" data-action="item_crop"><i class="fa fa-crop"></i> zuschneiden</a>
                        <!-- <a class="dropdown-item link-item-resize" href="javascript:void(0)" data-action="item_resize"><i class="fa fa-crop"></i> Größe ändern</a> -->
                        <a class="dropdown-item link-item-color" href="javascript:void(0)" data-action="item_color"><i class="fa fa-paint-brush"></i> Farbe</a>
                        <a class="dropdown-item" href="javascript:void(0)" data-action="item_trash"><i class="fa fa-trash"></i> löschen</a>
                    </div>
                </div>
            </div>
            <div class="file-manager-container file-manager-col-view" id="file-manager-content">
            </div>
        </div>
    </div><!-- / .row -->
</div><!-- / .card -->

<div id="previewTemplate" class="d-none bg-light text-center">
    <div class="ui-bordered">
        <img src="#" alt="" class="img-fluid media-preview d-none" style="background-color: #fff;">
        <div class="file-manager-col-view d-none"></div>
        <div class="embed-responsive embed-responsive-16by9 d-none">
            <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
        </div>
        <div class="p-3">
            <h5 class="media-name"> </h5>
            <div class="form-group d-none">
                <input type="text" class="form-control media-content-title" placeholder="Title">
            </div>
            <div class="form-group d-none">
                <textarea type="text" class="form-control media-content-description" placeholder="Description"></textarea>
            </div>
            <div class="form-group d-none">
                <select class="custom-select media-content-author">
                    <option value="">kein Autor</option>
                    {!!  HTMLHelper::getAuthorOptions() !!}
                </select>
            </div>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="ion ion-md-link"></i></span>
                </div>
                <input type="text" class="form-control media-url" placeholder="Link" readonly>
                <div class="input-group-append">
                    <span class="input-group-text"><a href="#" class="media-download"><i class="fas fa-external-link-alt"></i></a></span>
                </div>
            </div>
        </div>
    </div>
</div>