{% 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">Create New User</h1>
            <!-- <h2 class="text-gray-600 ml-0.5">Mobile UX/UI Design course</h2> -->
        </div>
        {% if user.is_superuser or user.is_staff %}
        <div class="flex flex-wrap items-start justify-end -mb-3">
            <a href="{% url 'user_list' %}"
                class="inline-flex px-5 py-3 text-blue-600 hover:text-blue-700 focus:text-blue-700 hover:bg-blue-100 focus:bg-blue-100 border border-blue-600 rounded-md mb-3">
                <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    class="flex-shrink-0 h-5 w-5 -ml-1 mt-0.5 mr-2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                </svg>
                Manage Users
            </a>
           
        </div>
        {% endif %}

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

            {% csrf_token %}
            <div class="grid md:flex gap-2 mt-2">

                <div class="grid">
                    <label for="username" class="pl-2">Username<span class="text-red-500">*</span></label>
                    <input type="text" name="username" id="username" class="rounded px-4 py-2 border-2" required>
                </div>
                <div class="grid">
                    <label for="name" class="pl-2">Name<span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="name" class="rounded px-4 py-2 border-2" required>
                </div>
            </div>
            <div class="grid md:flex gap-2 mt-2">

                <div class="grid">
                    <label for="email" class="pl-2">Email</label>
                    <input type="email" name="email" id="email" class="rounded px-4 py-2 border-2">
                </div>
                <div class="grid">
                    <label for="contact" class="pl-2">Phone</label>
                    <input type="text" name="contact" id="contact" class="rounded px-4 py-2 border-2">
                </div>
            </div>

            <div class="grid md:flex gap-2 mt-2">

                <div class="grid">
                    <label for="password" class="pl-2">Password<span class="text-red-500">*</span></label>
                    <input type="password" name="password" id="password" class="rounded px-4 py-2 border-2" minlength="8" maxlength="30"
                        required>
                </div>
                <div class="grid">
                    <label for="password2" class="pl-2">Re-Type Password<span class="text-red-500">*</span></label>
                    <input type="password" name="password2" id="password2" class="rounded px-4 py-2 border-2"  minlength="8" maxlength="30"
                        required>
                </div>
            </div>

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

            </div>

        </form>
    </section>

</main>
{% endblock content %}