{% extends 'layouts/box.html' %}
{% load django_bootstrap5 %}
{% block title %}
    Account  Settings
{% endblock %}


{% block content %}

    <h2 class="mb-4">Account Settings</h2>

<div class="text-center flex flex-col items-center">
    <div class="text-center max-w-md">
        <div class="text-gray-400 mb-2 -mt-3">username : @{{ user.username }}</div>
    </div>
</div>


    <table class="w-full text-sm text-left text-gray-500">
    <tbody>
    <tr>
            <th scope="row" class="pt-4 pb-1 text-base font-bold text-gray-900">
                Email address
            </th>
            <td id="email-address" class="pt-4 pb-1 pl-4">
                {% if user.email %}{{ user.email }}{% else %}No Email{% endif %}
            </td>
            <td class="pt-4 pb-1 pl-4">
                <a id="email-edit" class="cursor-pointer font-medium text-blue-600 hover:underline"
                   href="{% url 'edit_profile' %}"
                   >
                    Edit
                </a>
            </td>
        </tr>
        <tr class="border-b">
            <th scope="row" class="pb-4 font-medium text-gray-900">
            </th>
            <td class="pb-4 pl-4">
                {% if user.emailaddress_set.first.verified %}
                <span class="text-green-500">Verified</span>{% else %}
                <span class="text-amber-500">Not verified</span>
                {% endif %}
            </td>
            <td class="pb-4 pl-4">
                <a href="{% url 'profile-email-verify' %}" class="font-medium text-blue-600 hover:underline">
                    {% if not user.emailaddress_set.first.verified %}Verify{% endif %}
                </a>
            </td>
        </tr>

    </tbody>
</table>

{% endblock %}