<div class="row">
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-body text-center">
                <img src="<%= userProfile.image %>" alt="avatar" class="rounded-circle img-fluid" style="width: 150px;">
                <h5 class="my-3"><%= userProfile.displayName %></h5>
                <p class="text-muted mb-1">@<%= userProfile.username %></p>
                <p class="text-muted mb-4">Bay Area, San Francisco, CA</p>
                <div class="d-flex justify-content-center mb-2">

                    <% if (userProfile._id.toString() == user.id) { %>
                        <form action="/users/<%= user._id %>" method="POST">
                            <input type="hidden" name="_method" value="DELETE">
                            <a href="<%= user.id %>/edit" class="btn btn-primary"><i class ="fas fa-edit"></i> Edit</a>

                            <a class="btn btn-outline-danger ml-2" href="#" data-toggle="modal" data-target="#deleteProjectModal"><i class="fa fa-trash"></i> Remove Account</a>

                            <div class="modal fade" id="deleteProjectModal" tabindex="-1" role="dialog" aria-labelledby="deleteProjectModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="deleteProjectModalLabel">Remove this Account?</h5>
                                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">Ã—</span>
                                            </button>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    <% } %>

                </div>
            </div>
        </div>
    </div>
</div>
