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

{% 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">Settings</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>
            <a href="{% url 'add_user' %}"
                class="inline-flex px-5 py-3 text-white bg-blue-600 hover:bg-purple-700 focus:bg-blue-700 rounded-md ml-6 mb-3">
                <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    class="flex-shrink-0 h-6 w-6 text-white -ml-1 mr-2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                Create new users
            </a>
        </div>
        {% endif %}
    </div>
    <section class="grid md:grid-cols-2 xl:grid-cols-2 gap-6">
        <a href="{% url 'user_profile' %}" class="text-4xl flex items-center p-8 bg-white shadow rounded-lg">
            <div
                class="inline-flex flex-shrink-0 items-center justify-center h-16 w-16 text-blue-600 bg-blue-100 rounded-full mr-6">
                &#x2709;

            </div>
            <div>
                <!-- <span class="block text-2xl font-bold">62</span> -->
                <span class="block text-gray-500">Profile</span>
            </div>
        </a>
        <a href="{% url 'change_password' %}" class="text-4xl flex items-center p-8 bg-white shadow rounded-lg">
            <div
                class="inline-flex flex-shrink-0 items-center justify-center h-16 w-16 text-green-600 bg-green-100 rounded-full mr-6">
                &#x2119;
            </div>
            <div>
                <!-- <span class="block text-2xl font-bold">6.8</span> -->
                <span class="block text-gray-500">Change Password</span>
            </div>
        </a>

    </section>

</main>
{% endblock content %}