pixelfed/pixelfed

@extends('layouts.blank')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 offset-md-3 pt-5">
            <p class="h3 text-center font-weight-lighter py-3 mb-4 text-secondary">Follow <span class="text-dark">{{$profile->username}}</span> on Pixelfed</p>
            <div class="card">
                <div class="card-header p-0 m-0">
                    <div style="width: 100%;height: 140px;background: #0070b7"></div>
                </div>
                <div class="card-body">
                    <div class="text-center mt-n5 mb-4">
                        <img
                            class="rounded-circle p-1 border mt-n4 bg-white shadow"
                            src="{{$profile->avatarUrl()}}"
                            width="90"
                            height="90"
                            loading="lazy"
                            onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;">
                    </div>
                    <p class="text-center lead font-weight-bold mb-1">{{$profile->username}}</p>
                    <p class="text-center text-muted small text-uppercase mb-4">{{$profile->followerCount()}} followers</p>
                    <div class="d-flex justify-content-center">
                    @if($following == true)
                        <button
                            id="unfollow"
                            type="button"
                            class="btn btn-outline-secondary btn-sm py-1 px-4 text-uppercase font-weight-bold mr-3"
                            style="font-weight: 500"
                            onclick="unfollowProfile()">
                            Unfollow
                        </button>
                    @else
                        <button
                            id="follow"
                            type="button"
                            class="btn btn-primary btn-sm py-1 px-4 text-uppercase font-weight-bold mr-3"
                            style="font-weight: 500"
                            onclick="followProfile()">
                            Follow
                        </button>
                    @endif
                        <a class="btn btn-outline-primary btn-sm py-1 px-4 text-uppercase font-weight-bold" href="{{$profile->url()}}" style="font-weight: 500">View Profile</a>
                    </div>
                </div>
            </div>
            @auth
            <div class="d-flex justify-content-between pt-4 small">
                <a class="text-lighter text-decoration-none" href="/{{$user->username}}">Logged in as: <span class="font-weight-bold text-muted">{{$user->username}}</span></a>
                <span>
                    <a class="text-decoration-none text-muted font-weight-bold mr-3" href="/site/help">Help</a>
                    <a class="text-decoration-none text-muted font-weight-bold" href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();">Logout</a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </span>
            </div>
            @endauth
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    function followProfile() {
        let btn = document.querySelector('#follow');
        btn.setAttribute('disabled', 'disabled');
        axios.post('/api/v1/accounts/{{$profile->id}}/follow')
        .then(res => {
            setTimeout(() => location.reload(), 1000);
        })
        .catch(err => {
            location.href = '/login?next=' + encodeURI(location.href);
        })
    }

    function unfollowProfile() {
        let btn = document.querySelector('#unfollow');
        btn.setAttribute('disabled', 'disabled');
        axios.post('/api/v1/accounts/{{$profile->id}}/unfollow')
        .then(res => {
            setTimeout(() => location.reload(), 1000);
        })
        .catch(err => {
            location.href = '/login?next=' + encodeURI(location.href);
        })
    }

</script>
@endpush