@extends(Theme::viewName('layout'))
@section('title', $user->name)

@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">{{ $user->name }}</li>
@endsection

@section('content')
    <div class="container" id="user-app">
        <div class="row">
            <div id="user-avatar" class="col-sm-4 col-md-3 col-xl-2 mb-3">
                <img class="rounded" src="{{ Theme::gravatarUrl($user->email, 160) }}" title="{{ $user->name }}" />
            </div>

            <div class="col-sm-8 col-md-9 col-xl-10">
                @if ($can_follow)
                    @if ($is_following)
                        <a class="pull-right btn btn-lg btn-outline-primary" href="#" v-on:click="unFollowUser"><i class="fa fa-check fa-fw"></i> @lang('gallery.user_profile.following_button')</a>
                    @else
                        <a class="pull-right btn btn-lg btn-primary" href="#" v-on:click="followUser">@lang('gallery.user_profile.follow_button')</a>
                    @endif
                @endif
                <h1>{{ $user->name }}</h1>
                @if (!empty($user->profile_alias))
                    <h2 class="text-muted">{{ $user->profile_alias }}</h2>
                @endif
            </div>
        </div>

        <div class="row mt-3">
            <div class="col">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url()->current() }}" v-bind:class="{ active: isProfile }" v-on:click="switchToProfile"><i class="fa fa-fw fa-info-circle"></i> @lang('gallery.user_profile.profile_tab')</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url()->current() }}" v-bind:class="{ active: isFeed }" v-on:click="switchToFeed"><i class="fa fa-fw fa-clock-o"></i> @lang('gallery.user_profile.feed_tab')</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row mt-5" v-if="selected_view === 'profile'">
            <div class="col">
                @if (count($albums) == 0)
                    <h4 class="text-danger"><b>@lang('gallery.user_profile.no_albums_p1')</b></h4>
                    <p>@lang('gallery.user_profile.no_albums_p2', ['user_name' => $user->name])</p>
                @else
                    <h3 class="mb-4 text-muted">@lang('gallery.user_profile.albums', ['user_name' => $user->name])</h3>

                    <div class="row">
                        @foreach ($albums as $childAlbum)
                            @include(Theme::viewName('partials.gallery_child_album'), ['show_text' => true])
                        @endforeach
                    </div>
                @endif

                <h3 class="mt-5 mb-4 text-muted">@lang('gallery.user_profile.activity')</h3>

                <div>
                    {{-- Nav tabs --}}
                    <ul class="nav nav-tabs" role="tablist">
                        @include(Theme::viewName('partials.tab'), ['active_tab' => 'activity-taken', 'tab_name' => 'activity-taken', 'tab_icon' => 'camera', 'tab_text' => trans('gallery.user_profile.activity_taken_tab')])
                        @include(Theme::viewName('partials.tab'), ['active_tab' => 'activity-taken', 'tab_name' => 'activity-uploaded', 'tab_icon' => 'upload', 'tab_text' => trans('gallery.user_profile.activity_uploaded_tab')])
                    </ul>

                    {{-- Tab panes --}}
                    <div class="tab-content">
                        {{-- Photos taken --}}
                        <div role="tabpanel" class="tab-pane active" id="activity-taken-tab">
                            <p>@lang('gallery.user_profile.activity_taken_p1', ['user_name' => $user->name])</p>
                            @include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_taken])
                        </div>
                        {{-- Photos uploaded --}}
                        <div role="tabpanel" class="tab-pane" id="activity-uploaded-tab">
                            <p>@lang('gallery.user_profile.activity_uploaded_p1', ['user_name' => $user->name])</p>
                            @include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_uploaded])
                        </div>
                    </div>
                </div>

                @if (count($cameras) > 0)
                    <h3 class="mb-4 mt-5 text-muted">@lang('gallery.user_profile.cameras')</h3>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>@lang('admin.album_camera_make')</th>
                                <th>@lang('admin.album_camera_model')</th>
                                <th>@lang('admin.album_camera_software')</th>
                                <th>@lang('admin.album_camera_photo_count')</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($cameras as $camera)
                                <tr>
                                    <td>{{ $camera->camera_make }}</td>
                                    <td>{{ $camera->camera_model }}</td>
                                    <td>{{ $camera->camera_software }}</td>
                                    <td>{{ $camera->photo_count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>

        <div class="row mt-5" v-if="selected_view === 'feed'">
            <div class="col">
                <div v-if="is_loading">
                    <p class="text-center mb-1">
                        <img src="{{ asset('ripple.svg') }}" alt="@lang('global.please_wait')" title="@lang('global.please_wait')"/>
                    </p>
                    <p class="text-center">
                        @lang('global.please_wait')
                    </p>
                </div>
                <div v-if="feed_items.length > 0">
                    <div class="card mb-2" v-for="feed_item in feed_items">
                        <div class="card-body row">
                            <div class="col-2 col-md-1 pr-0" style="max-width: 47px;">
                                <img class="rounded-circle" v-bind:src="feed_item.avatar"/>
                            </div>
                            <div class="col-10 col-md-11">
                                <span v-html="feed_item.description"></span><br/>
                                <span class="text-muted" style="font-size: smaller;" v-html="feed_item.activity_at"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center" v-if="!is_loading && feed_items.length == 0">
                    <h4 class="text-danger"><b>@lang('gallery.user_profile.no_feed_activity_p1')</b></h4>
                    <p>@lang('gallery.user_profile.no_feed_activity_p2', ['user_name' => $user->name])</p>
                </div>
            </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 = '{{ $user->id }}';
        app.loadFeedItems();

        @if ($active_tab == 'feed')
            app.selected_view = 'feed';
        @elseif ($active_tab == 'profile')
            app.selected_view = 'profile';
        @endif
    </script>
@endpush