{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block body_main %}
{% include 'profile/_header.html' with active='account' %}
<div class="card">
    <div class="container">
        <p>Usernamae: {{ user }}</p>
        <form method="post" novalidate enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form-group">
                <label for="first_name">First name: </label>
                <input type="text" class="form-control" id="first_name" value="{{ user.first_name }}">
            </div>
            <div class="form-group">
                <label for="last_name">Last name: </label>
                <input type="text" class="form-control" id="last_name" value="{{ user.last_name }}">
            </div>
            <div class="form-group">
                <label for="email">Email: </label>
                <input type="text" class="form-control" id="email" value="{{ user.email }}">
            </div>
            <div class="form-group">
                <label for="description">Details: </label>
                <input type="text" class="form-control" id="description" value="{{ user.userprofile.description }}">
            </div>
            <div class="form-group">
                <label for="phone">Phone: </label>
                <input type="text" class="form-control" id="phone" value="{{ user.userprofile.phone }}">
            </div>
            <div class="form-group">
                <label for="city">City: </label>
                <input type="text" class="form-control" id="city" value="{{ user.userprofile.city }}">
            </div>
            <div class="form-group">
                <label for="website">Website: </label>
                <input type="text" class="form-control" id="website" value="{{ user.userprofile.website }}">
            </div>
            {% if user.userprofile.image %}
                <p>Photo: <img src="{{ user.userprofile.image.url }}" width="120"/></p>
            {% endif %}
            <div class="form-group">
                <label for="file">Image: </label>
                <input type="file" id="image" name="image">
            </div>
            <button type="submit" class="btn btn-success">Save changes</button>
            <a href="{% url 'citizens:user_account' %}" class="btn btn-outline-secondary">Nevermind</a>
        </form>
    </div>
</div>
{% endblock %}