@if(isset($documents))
    <div id='carousel' class='carousel slide' data-ride='carousel'>
        <!-- Wrapper for slides -->
        <div class='carousel-outer'>
            <div class='carousel-inner'>
                @foreach($documents as $document)
                    @if($document->filetype == 'image')
                    <div class='carousel-item @if($loop->first) active @endif'>
                        <img src='{{ $document->path }}' alt='' class="d-block w-100"/>
                    </div>
                    @endif
                @endforeach
            </div>

            <!-- Controls -->
            <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">zurück</span>
            </a>
            <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">weiter</span>
            </a>
        </div>

        <!-- Indicators -->
        <ol class='carousel-indicators'>
            @foreach($documents as $document)
                @if($document->filetype == 'image')
                <li data-target='#carousel' data-slide-to='{{ $loop->index }}' class='@if($loop->first) active @endif'>
                </li>
                @endif
            @endforeach
        </ol>
    </div>

    @foreach($documents as $document)
        @if($document->filetype != 'image')
            <a href="{{ $document->path }}">
                <img height='48' width='48' src='{{ $document->previewpath }}' alt='' />
                <p>
                    {{ $document->filename }}
                </p>
            </a>
        @endif
    @endforeach
@endif