@extends(Theme::viewName('layout'))
@section('title', trans('gallery.explore_users.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 active">@lang('navigation.breadcrumb.explore_users')</li>
@endsection

@section('content')
    <div class="container" id="user-app">
        <div class="row">
            <div class="col">
                @if ($users->count() > 0)
                    <h1>@yield('title')</h1>
                    <p class="mb-1">@lang('gallery.explore_users.intro_p1')</p>
                    <p>@lang('gallery.explore_users.intro_p2')</p>
                    <hr class="mt-4 mb-4"/>

                    @foreach ($users as $user)
                        <div class="row">
                            <div id="user-avatar" class="col-sm-3 col-md-2 col-xl-1 mb-3">
                                <img src="{{ Theme::gravatarUrl($user->email, 64) }}" title="{{ $user->name }}" class="rounded">
                            </div>
                            <div class="col-sm-9 col-md-10 col-xl-11">
                                @if ($user->id != Auth::user()->id)
                                    @if (in_array($user->id, $users_following))
                                        <button class="btn btn-outline-primary pull-right"><i class="fa fa-fw fa-check"></i> @lang('gallery.explore_users.following_button')</button>
                                    @else
                                        <button class="btn btn-primary pull-right">@lang('gallery.explore_users.follow_button')</button>
                                    @endif
                                @endif
                                <h2 class="h3"><a href="{{ $user->profileUrl() }}">{{ $user->name }}</a></h2>
                                <h3 class="h5 text-muted mt-1">{{ $user->profile_alias }}</h3>
                            </div>
                        </div>
                        @if (!$loop->last)
                        <hr class="mt-2 mb-4"/>
                        @endif
                    @endforeach

                    <div class="row mt-3">
                        <div class="col text-center">
                            {{ $users->links() }}
                        </div>
                    </div>
                @else
                    <div class="text-center">
                        <h4 class="text-danger"><b>@lang('gallery.user_activity_feed.no_activity_p1')</b></h4>
                        <p>@lang('gallery.user_activity_feed.no_activity_p2')</p>
                        <p>@lang('gallery.user_activity_feed.no_activity_p3', [
                            'l_explore_start' => sprintf('<a href="%s">', route('exploreUsers')),
                            'l_explore_end' => '</a>'
                        ])</p>
                        <p class="mt-4"><a href="{{ route('exploreUsers') }}" class="btn btn-primary btn-lg"><i class="fa fa-fw fa-search"></i> @lang('gallery.user_activity_feed.explore_photographers_link')</a></p>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        var viewModel = new UserViewModel({
            current_url: '{{ url()->current() }}',
            feed_url: '{{ $user->feedJsonUrl() }}',
            follow_user_url: '{{ $user->followUrl() }}',
            unfollow_user_url: '{{ $user->unFollowUrl() }}'
        });

        var app = new Vue(viewModel);
        app.user_id = '{{ Auth::user()->id }}';
    </script>
@endpush