@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"><a href="{{ route('albums.index') }}">@lang('navigation.breadcrumb.albums')</a></li>
    <li class="breadcrumb-item active">@lang('navigation.breadcrumb.create_album')</li>
@endsection

@section('content')
    <div class="container" id="create-album-app">
        <div class="row">
            <div class="col">
                <h1>@lang('admin.create_album')</h1>
                <p>@lang('admin.create_album_intro')</p>
                <p>@lang('admin.create_album_intro2')</p>
                <hr/>

                <form action="{{ route('albums.store') }}" method="POST">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <label class="form-control-label" for="album-name">@lang('forms.name_label')</label>
                        <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="album-name" name="name" value="{{ old('name') }}">

                        @if ($errors->has('name'))
                            <div class="invalid-feedback">
                                <strong>{{ $errors->first('name') }}</strong>
                            </div>
                        @endif
                    </div>

                    <div class="form-group">
                        <label class="form-control-label" for="album-description">@lang('forms.description_label')</label>
                        <textarea class="form-control" id="album-description" name="description" rows="5">{{ old('description') }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-control-label" for="parent-album">@lang('forms.parent_album_label')</label>
                        <select class="form-control" name="parent_album_id" id="parent-album" v-model="parent_id">
                            <option value="">@lang('forms.parent_album_placeholder')</option>
                            @foreach ($parent_albums as $key => $value)
                                <option value="{{ $key }}">{{ $value->display_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-control-label" for="album-source">@lang('forms.album_source_label')</label>
                        <select class="form-control" name="storage_id" id="album-source">
                            @foreach ($album_sources as $key => $value)
                                <option value="{{ $key }}"{{ $key == old('storage_id', $default_storage_id) ? ' selected="selected"' : '' }}>{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="mt-3 form-check">
                            <input type="checkbox" class="form-check-input" id="inherit-permissions" name="is_permissions_inherited" v-model="is_inherit_permissions" />
                            <label class="form-check-label" for="inherit-permissions">
                                @lang('forms.inherit_album_permissions')
                            </label>
                        </div>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_private" id="is-private" v-bind:disabled="isPrivateDisabled" v-model="is_private">
                        <label class="form-check-label" for="is-private">
                            <i class="fa fa-fw fa-lock"></i> @lang('forms.private_album_label')
                        </label>
                    </div>

                    <div class="text-right">
                        <a href="{{ route('albums.index') }}" class="btn btn-link">@lang('forms.cancel_action')</a>
                        <button class="btn btn-success" type="submit"><i class="fa fa-fw fa-check"></i> @lang('forms.create_action')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        var createAlbumViewModel = new CreateAlbumViewModel();
        createAlbumViewModel.data.parent_id = '{{ old('parent_album_id') }}';

        var app = null;

        $(document).ready(function()
        {
            app = new Vue(createAlbumViewModel);
            app.$watch('is_private', function()
            {
                // If user chooses to make the album private, it cannot then inherit permissions (secure by default)
                if (app.is_private)
                {
                    app.is_inherit_permissions = false;
                }
            });

            app.$watch('is_inherit_permissions', function()
            {
                // If user chooses to inherit permissions, it cannot also be private
                if (app.is_inherit_permissions)
                {
                    app.is_private = false;
                }
            });
        });
    </script>
@endpush