@extends(Theme::viewName('layout'))
@section('title', 'Gallery Admin')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
    <li class="breadcrumb-item active">@lang('navigation.breadcrumb.metadata_upgrade')</li>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>@lang('admin.metadata_upgrade.title')</h1>
                <div class="alert alert-info mb-4">
                    <i class="fa fa-fw fa-info"></i> @lang('admin.metadata_upgrade.intro')
                </div>

                <p>@lang('admin.metadata_upgrade.intro_2')</p>
                <p class="mb-4">@lang('admin.metadata_upgrade.intro_3')</p>

                @if (count($albums) == 0)
                    <div class="text-center">
                        <h4 class="text-danger"><b>@lang('admin.no_albums_title')</b></h4>
                        <p>@lang('admin.no_albums_text')</p>
                        <p style="margin-top: 40px;">
                            <a href="{{ route('albums.create') }}" class="btn btn-lg btn-success"><i class="fa fa-fw fa-plus"></i> @lang('admin.create_album')</a>
                        </p>
                    </div>
                @else
                    <table class="table table-hover table-striped">
                        <tbody>
                            @foreach ($albums as $album)
                                @include (Theme::viewName('partials.metadata_single_album_admin'))
                            @endforeach
                        </tbody>
                    </table>

                    <div class="text-center">
                        {{ $albums->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $('.album-expand-handle').click(function() {
            var parent = $(this).closest('tr');

            var handle = $('.album-expand-handle', parent);
            var albumID = parent.data('album-id');
            $('tr[data-parent-album-id=' + albumID + ']').toggle();

            if (handle.hasClass('fa-plus'))
            {
                handle.addClass('fa-minus');
                handle.removeClass('fa-plus');
            }
            else
            {
                // Toggle all children
                $('tr[data-parent-album-id=' + albumID + ']').each(function(index, element)
                {
                    var childHandle = $('.album-expand-handle', element);
                    if (childHandle.hasClass('fa-minus'))
                    {
                        childHandle.click();
                    }
                });

                handle.addClass('fa-plus');
                handle.removeClass('fa-minus');
            }
        })
    })
</script>
@endpush