{% extends 'LayoutMain.html' %}
{% load static %}
{% block title %}Dashboard - My Django Project{% endblock %}
{% block content %}
<!-- ======= Header ======= -->
<div>


    <!-- ======= Sidebar ======= -->

    <!-- End Sidebar-->

    <main id="main" class="main">

        <div class="pagetitle">
            <nav>
                <ol class="breadcrumb"></ol>
                <a href="http://"><i class="fas fa-user">|</i></a>
                <span><b>User</b></span>
                </ol>
              </nav>
        </div><!-- End Page Title -->

        <section class="section profile">

            <div class="container my-4">
                <div class="card">
                    <div class="card-header">
                        Add User
                        <a href="{% url 'users_list' %}"><button class="btn btn-primary">List all</button> </a>
                    </div>
                    <div class="card-body">

                        <form method="post" action="{% url 'users_profile' user.id %}" enctype="multipart/form-data"
                            class="needs-validation">
                            {% csrf_token %}

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="id_usergroup" class="form-label">Usergroup</label>
                                    <input type="text" name="usergroup" value="{{ form_data.usergroup }}"
                                        class="form-control" id="id_usergroup">
                                    {% if form_data.usergroup %}
                                    <div class="invalid-feedback">
                                        {{ form_data.usergroup.errors }}
                                    </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label for="id_name" class="form-label">Name</label>
                                    <input type="text" name="name" value="{{ form_data.name }}" class="form-control"
                                        id="id_name">
                                    {% if form_data.name %}
                                    <div class="invalid-feedback">
                                        {{ form_data.name.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="id_email" class="form-label">Email</label>
                                    <input type="email" name="email" value="{{ form_data.email }}" class="form-control"
                                        id="id_email">
                                    {% if form_data.email %}
                                    <div class="invalid-feedback">
                                        {{ form_data.email.errors }}
                                    </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label for="id_username" class="form-label">Username</label>
                                    <input type="text" name="username" value="{{ form_data.username }}"
                                        class="form-control" id="id_username" autocomplete="username">
                                    {% if form_data.username %}
                                    <div class="invalid-feedback">
                                        {{ form_data.username.errors }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="id_password1" class="form-label">Password</label>
                                    <input type="password" name="password1" class="form-control" id="id_password1">
                                    {% if form_data.password1 %}
                                    <div class="invalid-feedback">
                                        {{ form_data.password1.errors }}
                                    </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label for="id_image" class="form-label">Profile Image</label>
                                    <input type="file" name="image" class="form-control" id="id_image">
                                    {% if form_data.image %}
                                    <div class="mt-2">
                                        <img src="{{ form_data.image.url }}" alt="Current Profile Image"
                                            class="img-thumbnail" style="max-width: 100px;">
                                    </div>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>



                    </div>
                </div>

            </div>

        </section>

    </main>
    <!-- End #main -->

    <!-- ======= Footer ======= -->

</div>
{% endblock %}