pixelfed/pixelfed

<div class="bg-white py-5 border-bottom">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-4 d-flex">
                <div class="profile-avatar mx-auto">
                    <img class="rounded-circle box-shadow" src="/storage/avatars/default.jpg?v=1" width="172px" height="172px">
                </div>
            </div>
            <div class="col-12 col-md-8 d-flex align-items-center">
                <div class="profile-details">
                    <div class="username-bar pb-2 d-flex align-items-center">
                        <span class="font-weight-ultralight h3">{{$user->username}}</span>
                        @auth
                        @if($is_following == true)
                        <span class="pl-4">
                            <button class="btn btn-outline-secondary font-weight-bold px-4 py-0" type="button" onclick="unfollowProfile()">Unfollow</button>
                        </span>
                        @elseif($requested == true)
                        <span class="pl-4">
                            <button class="btn btn-outline-secondary font-weight-bold px-4 py-0" type="button" onclick="unfollowProfile()">Follow Requested</button>
                        </span>
                        @elseif($is_following == false)
                        <span class="pl-4">
                            <button class="btn btn-primary font-weight-bold px-4 py-0" type="button" onclick="followProfile()">Follow</button>
                        </span>
                        @endif
                        <span class="pl-4">
                            <i class="fas fa-cog fa-lg text-muted cursor-pointer" data-toggle="modal" data-target="#ctxProfileMenu"></i>
                            <div class="modal" tabindex="-1" role="dialog" id="ctxProfileMenu">
                                <div class="modal-dialog modal-dialog-centered modal-sm">
                                    <div class="modal-content">
                                        <div class="modal-body p-0">
                                            <div class="list-group-item cursor-pointer text-center rounded text-dark" onclick="window.App.util.clipboard('{{$user->url()}}');$('#ctxProfileMenu').modal('hide')">
                                                Copy Link
                                            </div>
                                            @auth
                                            <div class="list-group-item cursor-pointer text-center rounded text-dark" onclick="muteProfile()">
                                                Mute
                                            </div>
                                            <a class="list-group-item cursor-pointer text-center rounded text-dark text-decoration-none" href="i/report?type=user&id={{$user->id}}">
                                                Report User
                                            </a>
                                            <div class="list-group-item cursor-pointer text-center rounded text-dark" onclick="blockProfile()">
                                                Block
                                            </div>
                                            @endauth
                                            <div class="list-group-item cursor-pointer text-center rounded text-muted" onclick="$('#ctxProfileMenu').modal('hide')">
                                                Close
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                        @endauth
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
@auth
<script type="text/javascript">
    function muteProfile() {
            axios.post('/i/mute', {
                type: 'user',
                item: '{{$user->id}}'
            }).then(res => {
                $('#ctxProfileMenu').modal('hide');
                $('#ctxProfileMenu').hide();
                swal('Muted Profile', 'You have successfully muted this profile.', 'success');
            });
    }

    function blockProfile() {
            axios.post('/i/block', {
                type: 'user',
                item: '{{$user->id}}'
            }).then(res => {
                $('#ctxProfileMenu').modal('hide');
                $('#ctxProfileMenu').hide();
                swal('Blocked Profile', 'You have successfully blocked this profile.', 'success');
            });
    }

    function followProfile() {
        axios.post('/api/v1/accounts/{{$user->id}}/follow')
        .then(res => {
            location.reload();
        })
    }

    function unfollowProfile() {
        axios.post('/api/v1/accounts/{{$user->id}}/unfollow')
        .then(res => {
            location.reload();
        })
    }

</script>
@endauth
@endpush