@extends(Theme::viewName('layout'))
@section('title', trans('admin.about.title'))

@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.about')</li>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>@lang('admin.about.title')</h1>
                <p>@lang('admin.about.intro')</p>

                <ul class="nav nav-tabs mt-5">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#versions-tabpanel" role="tab">@lang('admin.about.versions_header')</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#licence-tabpanel" role="tab">@lang('admin.about.licence_header')</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">@lang('admin.about.links_header')</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="https://showmy.photos" target="_blank">@lang('admin.about.website_link')</a>
                            <a class="dropdown-item" href="https://www.andyheathershaw.uk/software/blue-twilight-php-photo-gallery/manual/" target="_blank">@lang('admin.about.user_guide_link')</a>
                            <a class="dropdown-item" href="https://github.com/pandy06269/blue-twilight" target="_blank">@lang('admin.about.github_link')</a>
                        </div>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="versions-tabpanel" role="tabpanel">
                        <div class="row" id="about-app">
                            <div class="col-md-6 text-center">
                                <p>@lang('admin.about.current_version')</p>
                                <p class="m-0" style="font-size: 2.5rem;">{{ $current_version }}</p>
                            </div>

                            <div class="col-md-6 text-center pt-2">
                                <div v-if="is_loading">
                                    <p><img src="{{ asset('ripple.svg') }}"></p>
                                    <p class="m-0">@lang('admin.about.latest_version_loading')</p>
                                </div>

                                <p v-cloak v-if="!is_loading && !can_upgrade" class="text-success">
                                    <i class="fa fa-check"></i> @lang('admin.about.up_to_date')
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="licence-tabpanel" role="tabpanel">
                        {!! nl2br($licence_text) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function()
        {
            var viewModel = new AboutViewModel({
                latest_release_url: '{{ route('admin.aboutLatestRelease') }}'
            });

            var app = new Vue(viewModel);
            app.$watch('can_upgrade', function(value)
            {
                alert('update available');
            });
            app.init();
        });
    </script>
@endpush