{% extends 'blog/partials/base.html' %} {% block content %}
{% load static %}
<h2 class="mtctitem">My Account</h2>
<div id="profile-area">
    <div style="width: 200px; height: 100%; display: inline; float: left;">
        <div id="avatar-area" style="padding: 10px; margin-bottom: 10px;">
            <img src="{% static 'images/avatars/' %}{{ user_profile.avatar_url }}.gif" alt="{{ user.username }}'s avatar" width="140" height="140" style="display: block; margin: 0 auto;" />
        </div>
        <div id="side-links">
            <p><a href="{% url 'blog:account' %}">Account Home</a></p>
            <p><a href="{% url 'blog:account' %}?tab=blinkies">Change profile blinkie</a></p>
            <p><a href="{% url 'blog:account' %}?tab=avatar">Change avatar</a></p>
            <p><a href="{% url 'blog:account' %}?tab=details">Change details</a></p>
            <p><a href="{% url 'blog:account' %}?tab=email">Change email</a></p>
            <p><a href="{% url 'blog:account' %}?tab=password">Change password</a></p>
            {% if not user.is_superuser %}
            <p><a href="{% url 'blog:account' %}?tab=delete" class="error">Delete account</a></p>
            {% endif %}
        </div>
    </div>
    <div style="width: 510px; height: 100%; display: inline; float: left; padding: 0px 10px;">
        {% for message in messages %}
        <div class="alert {{message.tags}}">
            <p>{{ message }}</p>
        </div>
        {% endfor %}
        {% if  request.GET.tab == 'avatar' %}
        <div id="avatar-chooser">
            <p>Choose an avatar from the list below. The avatars are grouped by their theme.</p>
            <form method="post" action="{% url 'users:updateavatar' %}">
                {% csrf_token %}
                {% for avatar_dir, avatar_files in avatarlist.items %}
                <h2 style="clear:both;background-color: #3E4245;padding: 8px 10px;border: none;background: -moz-linear-gradient(90deg, #3E4245 0%, #2E3131 100%);
                background: -webkit-linear-gradient(90deg, #3E4245 0%, #2E3131 100%);
                background: linear-gradient(90deg, #3E4245 0%, #2E3131 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3E4245",endColorstr="#2E3131",GradientType=1);">{{ avatar_dir }}</h2>
                <div class="avatar-directory">
                    {% for avatar_file in avatar_files %}
                    <div style="width: 255px; display: inline; float: left;">
                        {% with ""|add:avatar_dir|add:"/"|add:avatar_file as avt_url %}
                        <input type="radio" name="avatar" value="{{ avatar_dir }}/{{ avatar_file }}" id="{{ avatar_dir }}_{{ avatar_file }}" {% if user_profile.avatar_url == avt_url %}checked{% endif %} />
                        <label for="{{ avatar_dir }}_{{ avatar_file }}">
                            <img src="{% static 'images/avatars/' %}{{ avatar_dir }}/{{ avatar_file }}.gif" alt="{{ avatar_file }}" width="50" height="50" loading="lazy" style="vertical-align: middle;" />
                            {% load replace %}
                            <span style="vertical-align: middle; text-transform: captialize">{{ avatar_file|replace:".Png" }}</span>
                        </label>
                        {% endwith %}
                    </div>
                    {% endfor %}
                    <div style="clear: both;"></div>
                    <br><br>
                </div>
                {% endfor %}
                <input type="submit" value="Change Avatar" class="button button-special" />
            </form>
        </div>
        {% elif request.GET.tab == 'blinkies' %}
        <div id="blinkie-chooser">
            <p>Choose a blinkie to display on your public profile.</p>
            <form method="post" action="{% url 'users:updateblinkie' %}">
                {% csrf_token %}
                <div style="display: inline; width: 250px; float: left;">
                    <input type="radio" name="blinkie" value="" id="blinkie_none" checked />
                    <label for="blinkie_none">
                        <span style="vertical-align: middle;">None</span>
                    </label>
                </div>
                {% for blinkie in blinkies %}
                    <div style="display: inline; width: 250px; float: left;">
                        <input type="radio" name="blinkie" value="{{ blinkie }}" id="blinkie_{{ blinkie }}" {% if user_profile.blinkie_url == blinkie %}checked{% endif %} />
                        <label for="blinkie_{{ blinkie }}">
                            <img src="{% static 'images/blinkies/' %}{{ blinkie }}.gif" alt="{{ blinkie }}" width="150" height="20" loading="lazy" style="vertical-align: middle;" />
                        </label>
                    </div>
                {% endfor %}
                <input type="submit" style="margin-top: 20px;" value="Change Blinkie" class="button button-special" />
            </form>
            <div style="clear: both;"></div>
        </div>
        {% elif request.GET.tab == 'details' %}
        <div id="details">
            <p>Change your account details here. You can change your first name, last name, bio, email and activity visibility.</p>
            <form method="post"  action="{% url 'users:update' %}">
                {% csrf_token %}
                <table>
                    {{ update_form.as_table }}
                </table>
                <input type="submit" value="Update Details" class="button button-special" />
            </form>
        </div>
        {% elif request.GET.tab == 'email' %}
        <div id="email">
            <p>Change your email address here. Your current registered email is <em><u>{{ user.email }}</u></em>. Please note that a verification email will be sent to the new email address in order to update the current email address. Please provide the new email address in the box below:</p>
            <form method="post" action = "{% url 'users:sendchangeuseremail' %}">
                {% csrf_token %}
                <p><input type="email" name="email" id="email" required placeholder="New email address" /></p>
                <input type="submit" value="Update Email" class="button button-special" />
            </form>
        </div>
        {% elif request.GET.tab == 'password' %}
        <div id="password">
            <form method="post" action="{% url 'users:changepassword' %}">
                {% csrf_token %}
                <table>
                    <tr>
                        <td><label for="oldPassword"><b>Current Password: </b></label></td>
                        <td><input type="password" name="oldPassword" id="oldPassword" placeholder="Current Password"  minLength="8"/></td>
                    </tr>
                    <tr>
                        <td><label for="newPassword"><b>New Password: </b></label></td>
                        <td><input type="password" name="newPassword" id="newPassword" placeholder="New Password" minLength="8" /></td>
                    </tr>
                    <tr>
                        <td><label for="confirmPassword"><b>Confirm New Password: </b></label></td>
                        <td><input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm New Password" minLength="8" /></td>
                    </tr>
                </table>
                <br>
                <input type="submit" value="Change Password" class="button button-special" />
            </form>
        </div>
        {% elif request.GET.tab == 'delete' and not user.is_superuser %}
        <div id="delete">
            <p>Deleting your account will remove all your posts, comments and other data from the website. Please note that this action is irreversible. If you wish to delete your account, please enter your password in the box below:</p>
            <form method="post" action="{% url 'users:delete' %}">
                {% csrf_token %}
                <p><input type="password" name="password" id="password" required placeholder="Password" /></p>
                <input type="submit" value="Delete Account" class="button button-special" />
            </form>
        </div>
        {% else %}
        <div id="help">
            <p>You can change account settings for <strong>{{ user.username }}</strong> here. If you wish to have additional support, please contact me at <a href="mailto:webmaster@thatcomputerscientist.com?subject=[URGENT]%20Account%20Support%20Request%20for%20{{ user.username }}">webmaster@thatcomputerscientist.com</a>. Please take care of the following points before you submit your support request:</p>
            <ul>
                <li>Please do not edit the subject line.</li>
                <li>As an individual monitoring this email, I request you to refrain yourself from spamming.</li>
                <li>Please do not include any sensitive information (like credit card numbers, passwords, etc.) in the email.</li>
                <li>Allow me upto 48 hours to respond to your support request.</li>
                <li>Do not send multiple support requests.</li>
                <li>Please note that this is a support request related to your account. Please do not file any bugs here. If you have noticed a bug, please report it to the <a href="https://github.com/luciferreeves/thatcomputerscientist/issues">GitHub Issues</a> page.</li>
            </ul>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}