{% extends "layout-right.html" %} {% macro sentence_case(text) %} {{
text[0]|upper}}{{text[1:] }} {% endmacro %} {% block header %}
<script src="{{url_for('static', filename='cities.json')}}"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="{{url_for('static', filename='cropper.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename='cropper.js')}}"></script>
<script src="{{url_for('static', filename='email_confirm.js')}}"></script>
<link rel="stylesheet" href="{{url_for('static', filename='crop.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename='crop.js')}}"></script>

{% endblock header %} {% block content %}

<script>
    $(document).ready(function () {
        if ("{{toastMessage|safe}}" != "") {
            vt.error("{{toastMessage|safe}}", { position: 'top-right' });
        }

        $('#password').attr('readonly', true)

        setInterval(function () { $('#password').attr('readonly', false) }, 1000);
    });
</script>

<div class="highlight-box d-flex align-items-center"
    style="margin-bottom:20px; background-color: #EDF0FA; border-radius: 15px; padding: 1%; gap: 1%;">
    <a class="button-tab-clear no-underline d-flex justify-content-center" style=" width: 32.6%"
        href="{{ url_for('profile_bp.user_profile', username=current_user.username) }}">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px"
            height="20px" viewBox="0 0 51 51.3" style="fill:#2D355F">
            <path class="st0"
                d="M11.7,28.8c0.9-1.8,2.1-4.1,2.5-5.1l-1.8-5.4c-0.3-0.9,0-1.9,0.9-2.4c1-0.5,2.3-1,3.3-1l2.4,0.1C24.2,8.1,32.3,2,48.1,0c0.8-0.1,1.6,0.2,2.2,0.7C50.8,1.3,51.1,2.2,51,3c-1.9,15.8-8,23.9-15,29.1l0.1,2.4c0,1-0.5,2.3-1,3.3c-0.4,0.9-1.5,1.2-2.4,0.9l-5.4-1.8c-1,0.4-3.3,1.6-5.1,2.5c-1.4,0.7-3,0.5-4.1-0.6l-5.8-5.8C11.2,31.9,11,30.2,11.7,28.8z M38.1,13c-1.8-1.8-4.8-1.8-6.6,0c-0.9,0.9-1.4,2.1-1.4,3.3s0.5,2.4,1.4,3.3c1.8,1.8,4.8,1.8,6.6,0C39.9,17.8,39.9,14.8,38.1,13z M0.4,50.9C0.2,50.9,0,50.7,0,50.5c0-0.2,0.1-0.4,0.3-0.5c3.8-2,7.4-5.6,6.9-6.9c-0.3-1-1.6-1-2.6-0.6C3.3,42.8,1.9,44,1.9,44c-0.1,0.2-0.3,0.3-0.6,0.3c-0.2,0-0.4-0.2-0.4-0.5c-0.2-1.7,0.5-4.4,2.9-6.4c2.8-2.3,6.7-2.1,9.2,0.5c2.6,2.6,2.6,6.8-0.1,9.7c-1.8,1.9-4.3,3.2-7,3.5C2.6,51.5,0.5,51,0.4,50.9z" />
        </svg>
        <div class="black-text">
            PROJECTS
        </div>
    </a>
    <a class="button-tab-clear no-underline d-flex justify-content-center" style=" width: 32.6%"
        href="{{ url_for('profile_bp.profile_incoming_activity', username=current_user.username) }}">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#2D355F" class="bi bi-arrow-down-circle"
            viewBox="0 0 16 16">
            <path fill-rule="evenodd"
                d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z" />
        </svg>
        <div class="black-text">
            RECEIVED
        </div>
    </a>
    <a class="button-tab-clear no-underline d-flex justify-content-center" style=" width: 32.6%"
        href="{{ url_for('profile_bp.profile_outgoing_activity', username=current_user.username) }}">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#2D355F" class="bi bi-arrow-up-circle"
            viewBox="0 0 16 16">
            <path fill-rule="evenodd"
                d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z" />
        </svg>
        <div class="black-text">
            GIVEN
        </div>
    </a>
</div>

<!-- Delete Account Validation Modal -->
{% if current_user.is_google_auth() %}
<div class="modal fade" id="deleteuser_modal" tabindex="-1" role="dialog" aria-labelledby="deleteuser_modalModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title black-text" id="deleteuser_modalModalLabel">Confirm account deletion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ url_for('auth_bp.user_delete_g') }}">
                {{ form.hidden_tag() }}
                <div class="modal-body" style="padding-top: 15px; padding-bottom: 10px;">
                    <fieldset class="form-group">
                        <div class="form-group">
                            {{ DeleteValidationForm.email.label(class="form-control-label", style="color:black;") }}
                            {% if DeleteValidationForm.email.errors %}
                            {{ DeleteValidationForm.email(class="form-control form-control-lg is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in DeleteValidationForm.email.errors %}
                                <span>{{ error }}</span> {% endfor %}
                            </div>
                            {% else %} {{ DeleteValidationForm.email(class="form-control form-control-lg") }} {% endif
                            %}
                        </div>
                    </fieldset>
                    <div class="form-group d-flex justify-content-end">
                        {{ DeleteValidationForm.submit(class="btn btn-success", style="width:120px;") }}
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{% else %}
<div class="modal fade" id="deleteuser_modal" tabindex="-1" role="dialog" aria-labelledby="deleteuser_modalModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title black-text" id="deleteuser_modalModalLabel">Confirm account deletion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ url_for('auth_bp.user_delete') }}" autocomplete="off">
                {{ form.hidden_tag() }}
                <div class="modal-body" style="padding-top: 15px; padding-bottom: 10px;">
                    <fieldset class="form-group">
                        <div class="form-group">
                            {{ loginform.email.label(class="form-control-label", style="color:black;") }}
                            {% if loginform.email.errors %}
                            {{ loginform.email(class="form-control form-control-lg
                            is-invalid",autocomplete="false", value="") }}
                            <div class="invalid-feedback">
                                {% for error in loginform.email.errors %}
                                <span>{{ error }}</span> {% endfor %}
                            </div>
                            {% else %} {{ loginform.email(class="form-control form-control-lg",
                            autocomplete="false", value="") }} {% endif %}
                        </div>
                        <div class="form-group row-gap d-flex align-items-center">
                            {{ loginform.password.label(class="form-control-label", style="width:340px; color:black;")
                            }}
                            {% if loginform.password.errors %}
                            {{ loginform.password(class="form-control form-control-lg is-invalid",
                            autocomplete="false") }}
                            <div class="invalid-feedback">
                                {% for error in loginform.password.errors %}
                                <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                            {% else %} {{ loginform.password(class="form-control form-control-lg") }} {% endif %}
                        </div>
                    </fieldset>
                    <div class="form-group d-flex justify-content-end">
                        {{ loginform.submit(class="btn btn-success", style="width:120px;") }}
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<div style="background-color: #ffffff20; border-radius: 20px; padding: 20px;">
    <form action="{{ url_for('profile_bp.user_settings') }}" method="POST" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <div class="form-group">
                {{ form.username.label(class="form-control-label") }} {% if form.username.errors %} {{
                form.username(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.username.errors %}
                    <div class="d-flex align-items-center"
                        style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
                        <div style="display:inline-block; width:100%;"><svg xmlns="http://www.w3.org/2000/svg"
                                style="float: left" width="14" height="14" fill="#ff3464" class="bi bi-pencil-fill"
                                viewBox="0 0 16 16">
                                <path
                                    d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                            </svg>
                            <h6 class="no-margin-bottom" style="color: #ff3464;"><span>&#8203; &#8203; {{ error
                                    }}</span></h6>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                {{ form.username(class="form-control form-control-lg") }} {% endif %}
            </div>
            <div class="form-group">
                {{ form.email.label(class="form-control-label") }}
                {% if form.email.errors %}
                {{form.email(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.email.errors %}
                    <div class="d-flex align-items-center"
                        style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
                        <div style="display:inline-block; width:100%;"><svg xmlns="http://www.w3.org/2000/svg"
                                style="float: left" width="14" height="14" fill="#ff3464" class="bi bi-pencil-fill"
                                viewBox="0 0 16 16">
                                <path
                                    d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                            </svg>
                            <h6 class="no-margin-bottom" style="color: #ff3464;"><span>&#8203; &#8203; {{ error
                                    }}</span></h6>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                {% if not current_user.email_confirmed %}
                {{ form.email(class="form-control form-control-lg red") }}
                {% else %}
                {{ form.email(class="form-control form-control-lg") }}
                {% endif %}
                {% endif %}

                {% if not current_user.email_confirmed %}
                <p style="color: white; margin-top: 15px;">Email not confirmed
                    <button type="button" class="button-add" style="float: right; height: auto;"
                        onclick="sendConfirmationEmail('{{current_user.email}}'); this.disabled=true;">Resend
                        confirmation email
                    </button>
                </p>
                {% endif %}
            </div>
            <div class="form-group">
                {{ form.location.label(class="form-control-label") }} {% if form.location.errors %}
                {{form.location(class="form-control form-control-lg is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.location.errors %}
                    <div class="d-flex align-items-center"
                        style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
                        <div style="display:inline-block; width:100%;"><svg xmlns="http://www.w3.org/2000/svg"
                                style="float: left" width="14" height="14" fill="#ff3464" class="bi bi-pencil-fill"
                                viewBox="0 0 16 16">
                                <path
                                    d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                            </svg>
                            <h6 class="no-margin-bottom" style="color: #ff3464;"><span>&#8203; &#8203; {{ error
                                    }}</span></h6>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %} {{ form.location(class="form-control form-control-lg") }} {% endif %}
            </div>
            <div style="width: 100%; height: 2px; background-color: #ffffff20; margin-top: 30px;"></div>
            <h3 style="font-weight: 600; margin-top: 30px; margin-bottom: 20px;">Email Settings</h3>
            <div class="form-group">
                <div class="d-flex justify-content-start row-gap align-items-center">
                    <div style="width: 32px;">
                        {{ form.sub_stars(style="width: 30px; height: 30px;") }}
                    </div>
                    <div style="width: 90%">
                        {{ form.sub_stars.label(class="form-control-label no-margin-bottom") }}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex justify-content-start row-gap align-items-center">
                    <div style="width: 32px;">
                        {{ form.sub_comments(style="width: 30px; height: 30px;") }}
                    </div>
                    <div style="width: 90%">
                        {{ form.sub_comments.label(class="form-control-label no-margin-bottom") }}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex justify-content-start row-gap align-items-center">
                    <div style="width: 32px;">
                        {{ form.sub_project_posts(style="width: 30px; height: 30px;") }}
                    </div>
                    <div style="width: 90%">
                        {{ form.sub_project_posts.label(class="form-control-label no-margin-bottom") }}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex justify-content-start row-gap align-items-center">
                    <div style="width: 32px;">
                        {{ form.sub_updates(style="width: 30px; height: 30px;") }}
                    </div>
                    <div style="width: 90%">
                        {{ form.sub_updates.label(class="form-control-label no-margin-bottom") }}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="d-flex justify-content-start row-gap align-items-center">
                    <div style="width: 32px;">
                        {{ form.sub_newsletter(style="width: 30px; height: 30px;") }}
                    </div>
                    <div style="width: 90%">
                        {{ form.sub_newsletter.label(class="form-control-label no-margin-bottom") }}
                    </div>
                </div>
            </div>
            <div style="display: flex; align-items: center; margin-bottom: -15px;">
                <div class="d-flex">
                    <a class="no-underline" href="" data-toggle="modal" data-target="#deleteuser_modal"
                        class="d-flex justify-content-center align-items-center small-button">
                        <h5 class="bold no-margin-bottom" style="text-align: center;color:#e7473c; font-size: 15px;">
                            Delete Account
                        </h5>
                    </a>
                </div>
                <div class="" style="float: right; margin-left:auto; ">
                    {{ form.submit(class="btn btn-success", id="helloworld", style="width:180px; height: 50px;
                    background-color:
                    white; color: #007bff; border: none; ") }}
                </div>
            </div>
        </fieldset>
    </form>
</div>
<script>
    var states = JSON.parse(data);
    $("#location").autocomplete({
        source: function (request, response) {
            var results = $.ui.autocomplete.filter(states, request.term);
            response(results.slice(0, 10));
        }
    });
</script>
{% endblock content %} {% block sidebar %}
<div id="outer" class="page-header">
    <div id="inner" class="d-flex justify-content-center">
        <div class="container" style="text-align: center;">
            <label class="label" data-toggle="tooltip" title="Change your avatar">
                <div class="container1">
                    <div class="overlay" style="height: 200px;">
                        <a class="icon" title="User Profile">
                            <i class="fa fa-camera"></i>
                        </a>
                    </div>
                    {% if '2k-thumb' in current_user.image_file %}
                    <img class="rounded-circle"
                        style="width: 200px; height:200px; margin-top: 20px; border: #e7e9f4 1px solid;"
                        src="{{ url_for('static', filename='profile_pics/' + (current_user.image_file | replace("
                        2k-thumb.webp", "2k.webp" ))) }}">
                    {% else %}
                    <img class="rounded-circle"
                        style="width: 200px; height:200px; margin-top: 20px; border: #e7e9f4 1px solid;"
                        src="{{ url_for('static', filename='profile_pics/' + current_user.image_file) }}">
                    {% endif %}
                    <input type="file" class="sr-only" id="input" name="image" accept="image/*">
                </div>
            </label>
            <br>
            <br>
            <br>
            <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="display:inline-block;">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel" style="color: black;">Crop profile picture</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="img-container">
                                <img id="image"
                                    src="{{ url_for('static', filename='profile_pics/' + current_user.image_file) }}">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="crop">Crop</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h3 class="black-text" style="text-align: center; margin-top:-40px; margin-bottom:24px;">{{ current_user.username }}
    </h3>
    <div class="row-gap d-flex align-items-center justify-content-center" style="width: 100%; margin-bottom: 34px;">
        <div class="row-gap d-flex justify-content-center" style="width: 100%;"><svg xmlns="http://www.w3.org/2000/svg"
                width="20" height="20" fill="#157ffb" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
            </svg>
            <h5 class="black-text no-margin-bottom" style="font-weight: 400; text-align: center;">
                {{current_user.location}}</h5>
        </div>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
    <div class="row-gap d-flex align-items-center"
        style="padding: 15px; border: solid; border-radius: 20px; border-color:#EDF0FA; border-width: 2px; gap: 10px; width: 100%;">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#FFB900" class="bi bi-star-fill"
            viewBox="0 0 16 16">
            <path
                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
        </svg>
        <h4 class="bold black-text" style="margin-bottom:0px; margin-left: 4px;">{{ current_user.star_count }}</h4>
        <h5 class="black-text grey-text no-margin-bottom" style="font-weight: 600;">stars received</h5>
    </div>
    <div class="row-gap d-flex align-items-center"
        style="padding: 15px; border: solid; border-radius: 20px; border-color:#EDF0FA; border-width: 2px; gap: 10px; margin-top: 20px; width: 100%;">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#00D1FF" class="bi bi-chat-fill"
            viewBox="0 0 16 16">
            <path
                d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z" />
        </svg>
        <h4 class="bold black-text" style="margin-bottom:0px; margin-left: 4px;">{{ current_user.comment_count }}</h4>
        <h5 class="black-text grey-text no-margin-bottom" style="font-weight: 600;">comments received</h5>
    </div>
    <a href="{{ url_for('auth_bp.logout') }}"
        style="border: 2px solid #edf0fa; padding: 12px 8px; margin-top: 20px; margin-left: 0px; border-radius: 20px;"
        class="d-flex justify-content-center align-items-center small-button">
        <div class="row-gap d-flex align-items-center no-underline">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#007bff" class="bi bi-box-arrow-right"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" />
                <path fill-rule="evenodd"
                    d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
            </svg>
            <h5 class="bold no-margin-bottom" style="text-align: center;color:#007bff;">Sign Out</h5>
        </div>
    </a>
    <div class="row-gap d-flex justify-content-center align-items-center" style="margin-top: 20px;">
        <a class="nav-item bold no-margin-bottom no-underline small-button" href=" " data-toggle="modal"
            data-target="#share_Modal">
            <i class="fa fa-share " style="color: #157ffb; padding-bottom: 3px; margin-right: 8px;"></i>Share Profile
        </a>
        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
            data-text="Check out this profile on Crowd.Inc" data-via="crowdinc_" data-hashtags="crowdinc"
            data-show-count="false">Tweet</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
</div>

{% endblock sidebar %}