{% extends "mobile-layout.html" %} {% macro sentence_case(text) %} {{ text[0]|upper}}{{text[1:] }} {% endmacro %} {%
block content %}
<div id="outer" class="page-header" style="padding: 10px;">
    <div id="inner" style="gap: 20px;display: flex; align-items: center;">

        {% 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 %}
        <div>
            <h3 class="black-text">
                {{ current_user.username }}
            </h3>

            <h5 class="black-text no-margin-bottom" style="font-weight: 400; text-align: center;">
                {{current_user.location}}</h5>
        </div>
    </div>

    <div class="d-flex" style="gap: 15px; margin-top: 15px;">
        <div class="row-gap d-flex align-items-center justify-content-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>
        </div>
        <div class="row-gap d-flex align-items-center justify-content-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="#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>
        </div>
    </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; width: 100%;"
        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>

<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 class="highlight-box d-flex align-items-center"
    style="margin-bottom:20px; margin-top: 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) }}">
        <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) }}">
        <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) }}">
        <div class="black-text">
            GIVEN
        </div>
    </a>
</div>

<div style="background-color: #ffffff20; border-radius: 20px; padding: 20px;">
    <form action="{{ url_for('auth_bp.user_update',username=current_user.username) }}" method="POST"
        enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <h3 style="font-weight: 600; margin-top: 10px; margin-bottom: 20px;">Profile Settings</h3>
            <div class="content-section" style="padding: 20px; margin-bottom: 20px;">
                {{ form.picture.label(class="form-control-label", style="font-size: 18px") }} {{
                form.picture(class="form-control-file") }} {% if form.picture.errors %} {% for error in
                form.picture.errors %}
                <span class="text-danger">{{ error }}</span></br>
                {% endfor %}
                {% endif %}
            </div>
            <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 %} {{ form.email(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: 80%">
                        {{ 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: 80%">
                        {{ 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: 80%">
                        {{ 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: 80%">
                        {{ 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: 80%">
                        {{ form.sub_newsletter.label(class="form-control-label no-margin-bottom") }}
                    </div>
                </div>
            </div>
        </fieldset>

        <div class="d-flex align-items-center justify-content-end" style="width: 100%">
            <div class="form-group d-flex justify-content-end no-margin-bottom" style="width: 100%;">
                {{ form.submit(class="btn btn-success", style="width: 100%; height: 50px; background-color: white;
                color: #007bff; border: none;") }}
            </div>
        </div>
    </form>
</div>
{% endblock content %}