{% extends 'profile/base.html' %}
{% load crispy_forms_tags %}
{% load humanize %}
{% load static %}

{% block content %}


<!DOCTYPE html>


<html class="html__responsive ">

<head>

    <title>User - {{request.user}} - Edit - Stack Overflow</title>
    <link href="{% static 'notification/css/notification.css' %}" type="text/css" media="all" rel="stylesheet" />


</head>

<body class="user-page unified-theme">
    <div id="notify-container"></div>
    <div id="custom-header"></div>


    <div class="container">



        <div id="left-sidebar" data-is-here-when="md lg" class="left-sidebar js-pinned-left-sidebar ps-relative">
            <div class="left-sidebar--sticky-container js-sticky-leftnav">
                <nav role="navigation">
                    <ol class="nav-links">
                        <li class="">
                            <a href="/" class="pl8 nav-links--link">
                                <div class="d-flex ai-center">
                                    <div class="flex--item truncate">
                                        Home
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <ol class="nav-links">
                                <li class="fs-fine tt-uppercase ml8 mt16 mb4 fc-light">Public</li>

                                <li class="">
                                    <a id="nav-questions" href="/questions"
                                        class="pl8 nav-links--link -link__with-icon">
                                        <svg aria-hidden="true" class="svg-icon iconGlobe" width="18" height="18"
                                            viewBox="0 0 18 18">
                                            <path
                                                d="M9 1C4.64 1 1 4.64 1 9c0 4.36 3.64 8 8 8 4.36 0 8-3.64 8-8 0-4.36-3.64-8-8-8ZM8 15.32a6.46 6.46 0 01-4.3-2.74 6.46 6.46 0 01-.93-5.01L7 11.68v.8c0 .88.12 1.32 1 1.32v1.52Zm5.72-2c-.2-.66-1-1.32-1.72-1.32h-1v-2c0-.44-.56-1-1-1H6V7h1c.44 0 1-.56 1-1V5h2c.88 0 1.4-.72 1.4-1.6v-.33a6.45 6.45 0 013.83 4.51 6.45 6.45 0 01-1.51 5.73v.01Z" />
                                        </svg> <span class="-link--channel-name">Questions</span>
                                    </a>
                                </li>


                                <li class="">
                                    <a id="nav-tags" href="{% url 'profile:tagsPage' %}" class="nav-links--link">
                                        <div class="d-flex ai-center">
                                            <div class="flex--item truncate">
                                                Tags
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class=" youarehere">
                                    <a id="nav-users" href="{% url 'profile:usersPage' %}" class="nav-links--link">
                                        <div class="d-flex ai-center">
                                            <div class="flex--item truncate">
                                                Users
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>




        <div id="content" class="snippet-hidden">

            <div id="mainbar-full" class="user-show-new">

                <div class="ps-relative mb16">


                    <div class="d-flex ai-center fw-wrap gs16">
                        <a class="flex--item" href="{{user.id.profile.get_absolute_url}}">
                            <div class="md:d-none">
                                <div class="bar-md bs-sm"><img src="{{request.user.profile.profile_photo.url}}" alt=""
                                        width="128" height="128" class="bar-sm bar-md d-block"></div>
                            </div>
                            <div class="d-none md:d-block sm:d-none">
                                <div class="bar-md bs-sm"><img src="{{request.user.profile.profile_photo.url}}" alt=""
                                        width="96" height="96" class="bar-sm bar-md d-block"></div>
                            </div>
                            <div class="d-none sm:d-block">
                                <div class="bar-md bs-sm"><img src="{{request.user.profile.profile_photo.url}}" alt=""
                                        width="64" height="64" class="bar-sm bar-md d-block"></div>
                            </div>
                        </a>
                        <div class="flex--item">
                            <div class="d-flex ai-center fw-wrap gs8 wmx4">
                                <div class="flex--item mb12 fs-headline2 lh-xs">
                                    {{profileData.full_name}}
                                </div>
                                <div class="flex--item">
                                    <div class="d-flex ai-center fw-nowrap gs4">
                                    </div>
                                </div>
                            </div>
                            <div class="mb8 fc-light fs-title lh-xs">{{profileData.title}}</div>

                            <ul class="list-reset s-anchors s-anchors__inherit d-flex fc-light gs8 mln4 fw-wrap">


                                <li class="flex--item">
                                    <div class="d-flex gs4 gsx ai-center">
                                        <div class="flex--item fc-black-350">
                                            <i class="fas fa-birthday-cake fa-2x" aria-hidden="true"></i>
                                        </div>
                                        <div class="flex--item">
                                            Member for <span
                                                title="2021-10-12 04:36:58Z">{{profileData.user.date_joined|naturaltime}}</span>
                                        </div>
                                    </div>
                                </li>


                                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
                                    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
                                    crossorigin="anonymous">
                                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css 
    " crossorigin="anonymous">

                                {% if not profileData.is_high_moderator %}
                                <li class="flex--item">
                                    <div class="d-flex gs4 gsx ai-center">
                                        <div class="flex--item fc-black-350"><i class="fa fa-clock-o fa-2x"
                                                aria-hidden="true"></i></div>
                                        <div class="flex--item">
                                            <b> Last Seen </b> {{ online_user_activity.last_activity|naturaltime }}
                                        </div>
                                    </div>
                                </li>
                                {% endif %}

                                <!--                     <li class="flex--item">
                        <div class="d-flex gs4 gsx ai-center">
                            <div class="flex--item fc-black-350"><svg aria-hidden="true" class="svg-icon iconCalendar" width="18" height="18" viewBox="0 0 18 18"><path d="M14 2h1a2 2 0 012 2v11a2 2 0 01-2 2H3a2 2 0 01-2-2V4c0-1.1.9-2 2-2h1V0h2v2h6V0h2v2ZM3 6v9h12V6H3Zm2 2h2v2H5V8Zm0 3h2v2H5v-2Zm3 0h2v2H8v-2Zm3 0h2v2h-2v-2Zm0-3h2v2h-2V8ZM8 8h2v2H8V8Z"/></svg></div>
                            <div class="flex--item">Visited 45 days, 3 consecutive</div>
                        </div>
                    </li> -->
                            </ul>

                        </div>
                    </div>


                    <div class="ps-absolute t0 r0 d-flex gs6 fw-wrap">
                        <a class="flex--item s-btn s-btn__outlined s-btn__muted s-btn__icon s-btn__sm"
                            href="{% url 'profile:userProfileEdit_Settings' profileData.id %}"><svg aria-hidden="true"
                                class="svg-icon iconPencil" width="18" height="18" viewBox="0 0 18 18">
                                <path
                                    d="m13.68 2.15 2.17 2.17c.2.2.2.51 0 .71L14.5 6.39l-2.88-2.88 1.35-1.36c.2-.2.51-.2.71 0ZM2 13.13l8.5-8.5 2.88 2.88-8.5 8.5H2v-2.88Z" />
                            </svg> Edit profile</a>
                    </div>
                </div>


                <div class="d-flex ai-center jc-space-between fw-wrap mb16 js-user-header">
                    <div class="flex--item s-navigation">
                        <a href="{% url 'profile:activityPageTabProfile' profileData.user.id profileData.user.username %}"
                            class="s-navigation--item" data-shortcut="P">Profile</a>
                        <a href="{% url 'profile:ActivityTabSummary' profileData.user.id profileData.user.username %}"
                            class="s-navigation--item" data-shortcut="A">Activity</a>
                        {% if request.user == profileData.user %}
                        <a href="{% url 'profile:userProfileEdit_Settings' profileData.user.id %}"
                            class="s-navigation--item is-selected">Settings</a>
                        {% endif %}
                    </div>
                    <div class="flex--item ml-auto">
                        <div class="s-navigation s-navigation__muted ai-center">
                        </div>
                    </div>
                </div>

            </div>

            <div class="d-none md:d-block">
                <nav class="mb24">
                    <div class="d-flex gs4 gsy fd-column">
                        <label class="flex--item s-label" for="js-select-menu">
                            Navigation
                            <p class="mt2 s-description">View all settings pages</p>
                        </label>
                        <div class="flex--item s-select">
                            <select id="js-select-menu">
                                <optgroup label="Personal information">
                                    <option value="/users/edit/17131560" selected="selected">Edit profile</option>
                                    <!-- <option value="/questions">Developer Story preferences</option> -->
                                    <option value="{% url 'profile:userProfileJonPrefrences_Settings' user.id %}">Job
                                        preferences</option>
                                </optgroup>
                                <optgroup label="Email Settings">
                                    <option value="/users/email/settings/17131560">Edit email settings</option>
                                    <!-- <option value="/users/tag-notifications/17131560">Tag watching &amp; ignoring</option> -->
                                    <!-- <option value="/users/email/digests/17131560">Community digests</option> -->
                                    <!-- <option value="/users/email/question-subscriptions/17131560">Question subscriptions</option> -->
                                    <!-- <option value="https://stackoverflow.com/users/email/job-alerts/17131560">Saved job search alerts</option> -->
                                </optgroup>
                                <optgroup label="Site settings">
                                    <!-- <option value="/users/preferences/17131560">Preferences</option> -->
                                    <!-- <option value="/users/17131560/van/flair">Flair</option> -->
                                    <!-- <option value="/users/apps/17131560">Applications</option> -->
                                    <!-- <option value="/users/mylogins/17131560">My logins</option> -->
                                    <!-- <option value="/users/hidecommunities/17131560">Hide communities</option> -->
                                    <!-- <option value="/users/delete/17131560">Delete profile</option> -->
                                </optgroup>
                                <!--                             <optgroup label="Collectives">
                                    <option value="/users/my-collectives/17131560">Your Collectives</option>
                            </optgroup> -->
                            </select>
                        </div>
                    </div>
                </nav>
            </div>

            <div class="d-flex mb48">
                <nav class="flex--item fl-shrink0 mr32 md:d-none js-settings-nav" role="navigation">
                    <ul class="s-navigation s-navigation__vertical">
                        <li class="s-navigation--title">
                            Personal information
                        </li>
                        <li>
                            <a href="{% url 'profile:userProfileEdit_Settings' user.id %}"
                                class="s-navigation--item is-selected" data-shortcut="E">Edit profile </a>
                        </li>
                        <!--                         <li>
                            <a href="/users/storypreferences/17131560" class="s-navigation--item" data-shortcut="">Developer Story preferences </a>
                        </li> -->
                        <li>
                            <a href="{% url 'profile:userProfileJonPrefrences_Settings' user.id %}"
                                class="s-navigation--item" data-shortcut="">Job preferences </a>
                        </li>
                        <li class="s-navigation--title">
                            Email Settings
                        </li>
                        <li>
                            <a href="{% url 'profile:userProfileEdit_Email_Settings' user.id %}"
                                class="s-navigation--item" data-shortcut="">Edit email settings </a>
                        </li>
                        <li>
                            <!--                             <a href="/users/tag-notifications/17131560" class="s-navigation--item" data-shortcut="">Tag watching &amp; ignoring </a>
                        </li>
                        <li>
                            <a href="/users/email/digests/17131560" class="s-navigation--item" data-shortcut="">Community digests </a>
                        </li>
                        <li>
                            <a href="/users/email/question-subscriptions/17131560" class="s-navigation--item" data-shortcut="">Question subscriptions <svg aria-hidden="true" class="ml-auto mt1 svg-icon iconShareSm" width="14" height="14" viewBox="0 0 14 14"><path d="M5 1H3a2 2 0 00-2 2v8c0 1.1.9 2 2 2h8a2 2 0 002-2V9h-2v2H3V3h2V1Zm2 0h6v6h-2V4.5L6.5 9 5 7.5 9.5 3H7V1Z"/></svg></a>
                        </li>
                        <li>
                            <a href="https://stackoverflow.com/users/email/job-alerts/17131560" class="s-navigation--item" data-shortcut="B">Saved job search alerts </a>
                        </li> -->
                            <!--                     <li class="s-navigation--title">
                        Site settings
                    </li> -->
                            <!--                         <li>
                            <a href="/users/preferences/17131560" class="s-navigation--item" data-shortcut="P">Preferences </a>
                        </li>
                        <li>
                            <a href="/users/17131560/van/flair" class="s-navigation--item" data-shortcut="F">Flair </a>
                        </li>
                        <li>
                            <a href="/users/apps/17131560" class="s-navigation--item" data-shortcut="A" title="authorized applications">Applications </a>
                        </li>
                        <li>
                            <a href="/users/mylogins/17131560" class="s-navigation--item" data-shortcut="M">My logins </a>
                        </li>
                        <li>
                            <a href="/users/hidecommunities/17131560" class="s-navigation--item" data-shortcut="H">Hide communities </a>
                        </li>
                        <li> -->
                            <!-- <a href="/users/delete/17131560" class="s-navigation--item" data-shortcut="O">Delete profile </a> -->
                        </li>
                        <!--                     <li class="s-navigation--title">
                        Collectives
                    </li>
                        <li>
                            <a href="/users/my-collectives/17131560" class="s-navigation--item" data-shortcut="">Your Collectives </a>
                        </li> -->
                    </ul>
                </nav>


                <div id="mainbar" class="flex--item fl-grow1 user-show-new settings-page">

                    <div class="edit-profile">
                        <div class="s-page-title mb24">
                            <h1 class="s-page-title--header m0 baw0 p0">Edit your profile</h1>
                        </div>
                        <form method="post" enctype="multipart/form-data" id="edit-profile-form">
                            {% csrf_token %}
                            <div class="fs-title mb8">
                                Public information </div>

                            <div id="div_id_profile_photo" class="form-group"> <label for="id_profile_photo"
                                    class=" requiredField">
                                    Profile photo<span class="asteriskField">*</span> </label>
                                <div class="">Currently: <a
                                        href="{{request.user.profile.profile_photo.url}}">{{request.user.profile.profile_photo.url}}</a><br>
                                    Change:
                                    <input type="file" name="profile_photo" accept="image/*"
                                        class="clearablefileinput form-control-file" id="id_profile_photo">
                                </div>

                            </div>


                            <div id="div_id_full_name" class="form-group"> <label for="id_full_name"
                                    class=" requiredField">
                                    Full name<span class="asteriskField">*</span> </label>
                                <div class=""> <input type="text" name="full_name"
                                        value="{{request.user.profile.full_name}}" maxlength="30"
                                        class="textinput textInput form-control" required id="id_full_name"> </div>
                            </div>


                            <div id="div_id_location" class="form-group"> <label for="id_location"
                                    class=" requiredField">
                                    Location<span class="asteriskField">*</span> </label>
                                <div class=""> <input type="text" name="location"
                                        value="{{request.user.profile.location}}" maxlength="30"
                                        class="textinput textInput form-control" required id="id_location"> </div>
                            </div>

                            <div id="div_id_title" class="form-group"> <label for="id_title" class=" requiredField">
                                    Title<span class="asteriskField">*</span> </label>
                                <div class=""> <input type="text" name="title" value="{{request.user.profile.title}}"
                                        maxlength="30" class="textinput textInput form-control" required id="id_title">
                                </div>
                            </div>

                            <div id="div_id_about_me" class="form-group"> <label for="id_about_me" class="">
                                    About me
                                </label>
                                <div class=""> <input type="text" name="about_me"
                                        value="{{request.user.profile.about_me}}" maxlength="30"
                                        class="textinput textInput form-control" id="id_about_me"> </div>
                            </div>


                            <div id="div_id_website_link" class="form-group"> <label for="id_website_link" class="">
                                    Website link
                                </label>
                                <div class=""> <input type="url" name="website_link"
                                        value="{{request.user.profile.website_link}}" maxlength="200"
                                        class="urlinput form-control" id="id_website_link"> </div>
                            </div>

                            <div id="div_id_twitter_link" class="form-group"> <label for="id_twitter_link" class="">
                                    Twitter link
                                </label>
                                <div class=""> <input type="url" name="twitter_link"
                                        value="{{request.user.profile.twitter_link}}" maxlength="200"
                                        class="urlinput form-control" id="id_twitter_link"> </div>
                            </div>

                            <div id="div_id_github_link" class="form-group"> <label for="id_github_link" class="">
                                    Github link
                                </label>
                                <div class=""> <input type="url" name="github_link"
                                        value="{{request.user.profile.github_link}}" maxlength="200"
                                        class="urlinput form-control" id="id_github_link"> </div>
                            </div>

                            <div id="div_id_not_to_Display_Full_name" class="form-group"> <label
                                    for="id_not_to_Display_Full_name" class=" requiredField">
                                    Not to Display Full name<span class="asteriskField">*</span> </label>
                                <div class=""> <input type="text" name="not_to_Display_Full_name"
                                        value="{{request.user.profile.not_to_Display_Full_name}}" maxlength="30"
                                        class="textinput textInput form-control" required
                                        id="id_not_to_Display_Full_name"> </div>
                            </div>


                            <button type="submit">Save Changes</button>
                        </form>
                    </div>

                </div>
            </div>


            <div class="container-fluid">
                <div class="table table-striped table-sm" id="successMessageProfile">
                </div>
            </div>


        </div>
    </div>


    <footer id="footer" class="site-footer js-footer" role="contentinfo">
        <div class="site-footer--container">
            <div class="site-footer--logo">
                <i class="fab fa-stack-overflow fa-3x"></i>
            </div>
            <nav class="site-footer--nav">
                <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                    <h5 class="-title"><a href="" class="">Stack Overflow - Clone</a></h5>
                    <ul class="-list js-primary-footer-links">
                        <li class="-item"><a href="/questions" class=" -link"
                                data-gps-track="footer.click({ location: 4, link: 16})">Questions</a></li>
                        <li class="-item"><a href="" class=" -link">Jobs</a></li>
                        <li class="-item"><a href="" class=" -link">Developer Jobs Directory</a></li>
                        <li class="-item"><a href="" class=" -link">Salary Calculator</a></li>
                        <li class="-item"><a href="" class=" -link">Help</a></li>
                        <li class="-item"><a onclick='StackExchange.switchMobile("on")' class=" -link">Mobile</a></li>
                    </ul>
                </div>
                <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                    <h5 class="-title"><a href="">Products</a></h5>
                    <ul class="-list">
                        <li class="-item"><a href="" class=" -link">Teams</a></li>
                        <li class="-item"><a href="" class=" -link">Talent</a></li>
                        <li class="-item"><a href="" class=" -link">Advertising</a></li>
                        <li class="-item"><a href="" class=" -link">Enterprise</a></li>
                    </ul>
                </div>
                <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                    <h5 class="-title"><a href="">Company</a></h5>
                    <ul class="-list">
                        <li class="-item"><a class=" -link" href="">About</a></li>
                        <li class="-item"><a class=" -link" href="">Press</a></li>
                        <li class="-item"><a class=" -link" href="">Work Here</a></li>
                        <li class="-item"><a class=" -link" href="">Legal</a></li>
                        <li class="-item"><a class=" -link" href="">Privacy Policy</a></li>
                        <li class="-item"><a class="-link" href="">Terms of Service</a></li>
                        <li class="-item"><a class=" -link" href="">Contact Us</a></li>
                        <li class="-item" id="consent-footer-link"><a class="-link js-cookie-settings" href="#"
                                data-consent-popup-loader="footer">Cookie Settings</a></li>
                        <li class="-item"><a class=" -link" href="">Cookie Policy</a></li>
                    </ul>
                </div>
            </nav>
            <div class="site-footer--copyright fs-fine">
                <ul class="-list">
                    <li class="-item"><a class="-link" href="">Blog</a></li>
                    <li class="-item"><a href="" class="-link">Facebook</a></li>
                    <li class="-item"><a href="" class="-link">Twitter</a></li>
                    <li class="-item"><a href="" class="-link">LinkedIn</a></li>
                    <li class="-item"><a href="" class="-link">Instagram</a></li>
                </ul>

                <p class="mt-auto mb24">
                    site design / logo &#169; 2021 Stack Exchange Inc; user contributions licensed under <a
                        href="https://stackoverflow.com/help/licensing">cc by-sa</a>. <span
                        id="svnrev">rev&nbsp;2021.11.12.40742</span>
                </p>
            </div>
        </div>

    </footer>


    <div id="onetrust-consent-sdk" class="d-none"></div>
    <div id="onetrust-banner-sdk" data-controller="s-modal"></div>
    <div id="ot-pc-content" class="d-none"></div>
    <div id="onetrust-style" class="d-none">&nbsp;</div>
    <div class="d-none js-consent-banner-version" data-consent-banner-version="baseline"></div>


</body>

</html>


<a href="{% url 'profile:userProfileJonPrefrences_Settings' user.id %}">Job Prefrences</a>

<a href="{% url 'profile:userProfileEdit_Email_Settings' user.id %}">Edit Email</a>

<!-- <div class="container">
    <form method="post" enctype="multipart/form-data" id="edit-profile-form">
        {% csrf_token %}
        <table>
        {{ Edit_profile_form|crispy }}
        </table>
        <button type="submit">Save Changes</button>
    </form>
</div>
 -->



<script>
    $(document).ready(function () {
        /*
            On submiting the form, send the POST ajax
            request to server and after successfull submission
            display the object.
        */
        $("#edit-profile-form").submit(function (e) {
            var data = new FormData();
            // preventing from page reload and default actions
            e.preventDefault();
            // serialize the data for sending the form data.
            var serializedData = $(this).serialize();
            var file = $("#id_profile_photo").prop("files")[0];

            data.append("full_name", $("#id_full_name").val())
            data.append("location", $("#id_location").val())
            data.append("title", $("#id_title").val())
            data.append("about_me", $("#id_about_me").val())
            data.append("website_link", $("#id_website_link").val())
            data.append("twitter_link", $("#id_twitter_link").val())
            data.append("github_link", $("#id_github_link").val())
            data.append("not_to_Display_Full_name", $("#id_not_to_Display_Full_name").val())

            // Appending selected profile image
            data.append("image", file);

            $.ajax({
                headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                type: 'POST',
                url: "{% url 'profile:EditProfileAjaxForm' user.id %}",
                data: data,
                processData: false, // To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
                contentType: false,
                success: function (response) {
                    $("#successMessageProfile").html(
                        `<div class="val-message val-success"><span class="vote-accepted-on" title="success"> </span><p class="val-textemphasis">Your profile has been saved successfully.</p></div>
                        `
                    )
                },
                error: function (response) {
                    // alert the error if any error occured
                    alert(response["responseJSON"]["error"]);
                }
            })
        })
    })
</script>


{% endblock content %}