{% extends "header.html.twig" %}


{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">User Verification Details</h3>
        </div>

        <!-- /.box-header -->
        <div class="box-body">
            <table id="usertable" class="table table-bordered table-striped">
                <thead>
                    {% for user in users %}
                        <tr>
                            <th>Profile Picture</th>
                            <td><img src="{{base_url}}/uploads/user/profile/image/{{user.profilepicture}}" height="100" width="100"></td>
                        </tr>
                        <tr>
                            <th>First name</th>
                            <td>{{user.firstname}}</td>
                        </tr>
                        <tr>
                            <th>Last name</th>
                            <td>{{user.lastname}}</td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>{{user.email}}</td>
                        </tr>
                        <tr>
                            <th>City</th>
                            <td>{{user.city}}</td>
                        </tr>
                        <tr>
                            <th>State</th>
                            <td>{{user.state}}</td>
                        </tr>
                        <tr>
                            <th>Zipcode</th>
                            <td>{{user.zipcode}}</td>
                        </tr>
                        <tr>
                            <th>User Type</th>
                            <td>{%if user.usertype == 2%}Normal{%elseif user.usertype == 3 %}Neighborhood{%elseif user.usertype == 4 %}Professional{%endif%}</td>
                        </tr>
                        <tr>
                            <th>Postal Code</th>
                            <td>{{user.postcode}}</td>
                        </tr>
                        <tr>
                            <th>Linkedin URL</th>
                            <td>
                                <span id="linkedinurl">{{user.linkedinurl}}</span>&nbsp;&nbsp;
                                <button class="btn btn-bg  pull-right"  onClick="copyToClipboard('linkedinurl')">
                                    <i class="fa fa-clone" aria-hidden="true"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th>Instagram URL</th>
                            <td>
                                <span id="instagramurl">{{user.instagramurl}}</span>&nbsp;&nbsp;
                                <button class="btn btn-bg pull-right" onClick="copyToClipboard('instagramurl')">
                                    <i class="fa fa-clone" aria-hidden="true"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th>Facebook URL</th>
                            <td><span id="facebookurl">{{user.facebookurl}}</span>&nbsp;&nbsp;
                                <button class="btn btn-bg pull-right" onClick="copyToClipboard('facebookurl')">
                                    <i class="fa fa-clone" aria-hidden="true"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td><a href="{{url('verify',{id:user.id})}}" class="btn btn-success  pull-right">Confirm</a></td>
                            <td><a href="{{url('declineVerify',{id:user.id})}}" class="btn btn-danger">Decline</a></td>
                        </tr>
                    {% endfor %}

                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>
{% endblock body_content %}

{% block script_content %}
    <script>
        function copyToClipboard(id) {
                var copyText = document.getElementById(id);
                var textArea = document.createElement("textarea");
                textArea.value = copyText.textContent;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand("Copy");
                textArea.remove();
        }
    </script>
{% endblock script_content %}