{% extends 'cPanel/base.html' %}
{% load cms_tags %}

{% block content %}
<main class="p-6 sm:p-10 space-y-6">
    <div class="flex flex-col space-y-6 md:space-y-0 md:flex-row justify-between">
        <div class="mr-6">
            <h1 class="text-4xl font-semibold mb-2">Profile</h1>
            <!-- <h2 class="text-gray-600 ml-0.5">Mobile UX/UI Design course</h2> -->
        </div>

    </div>
    <section class="flex justify-center w-full">
        {% if messages %}
        <ul class="messages text-4xl">
            {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
                {% endfor %}
        </ul>
        {% else %}
        <form method="post" class="bg-white shadow-2xl rounded-2xl px-4 py-8">
            {% csrf_token %}

          

            <div class="grid gap-2 mt-2">

                <div class="grid">
                    <label for="username" class="pl-2 font-bold">Username : {{user.username}}</label>
                </div>
                <div class="grid">
                    <label for="name" class="pl-2 font-bold">Name :</label>
                    <input type="text" name="name" id="name" class="rounded-2xl px-4 py-2 border-2"
                        value="{{user.first_name}}">
                </div>
            </div>
            <div class="grid gap-2 mt-2">

                <div class="grid">
                    <label for="email" class="pl-2 font-bold">Email :</label>
                    <input type="email" name="email" id="email" class="rounded-2xl px-4 py-2 border-2"
                        value="{{user.email}}">
                </div>
                <div class="grid">
                    <label for="contact" class="pl-2 font-bold">Phone :</label>
                    <input type="text" name="contact" id="contact" class="rounded-2xl px-4 py-2 border-2"
                        value="{{user.last_name}}" pattern="[789][0-9]{9}" maxlength="10">
                </div>
            </div>

            <div class="flex gap-4 w-full justify-center mt-2">
                <input type="submit" value="Submit" class="bg-blue-900 text-xl text-white px-6 py-2 rounded-2xl w-28">
                <label onclick="history.back()"
                    class="pointer-cursor bg-red-600 text-white text-xl rounded-2xl px-6 py-2 w-28">Cancel</label>
            </div>

        </form>
        {% endif %}

    </section>

</main>
{% endblock content %}