{% extends "ToDo/base.html" %}
{% load crispy_forms_tags %}
{% load user_agents %}
{% block content %}

    {% if request.user_agent.is_mobile %}
        <div class="panel panel-default">
    {% else %}
        <div class="content-section">
    {% endif %}
    <div>
        <center>
            <img style="width: 250; height: 250;" class="rounded-circle account-img" src="{{ user.profile.image.url }}">
            <br>
            <div class="media-body">
                <h2 class="account-heading">{{ user.username }}</h2>
                <p class="text-secondary">{{ user.email }}</p>
                <p class="text-secondary">Member since: {{ user.date_joined|date:"F d, Y" }}</p>
            </div>
        </center>
    </div>
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group dark-mode-assist">
                <legend class="border-bottom mb-4">Profile info</legend>
                {{ u_form|crispy }}
                {{ p_form|crispy }}
                {{ tz_form|crispy }}
                <a href="{% url 'check-time' %}">Check your time for accuracy</a>
                <br><br>
                <a href="{% url 'password_reset' %}">Do you want to change your password?</a>
                <br>
                <small>Please keep in mind that you will be logged out after reset</small>
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Update</button>
            </div>
        </form>
    </div>
{% endblock content %}