{% extends "layouts/base.html" %}

{% load static %}

{% block title %} Account Overview {% endblock title %}

{% block stylesheet %} {% endblock stylesheet %}

{% block body_attributes %} {% endblock body_attributes %}

{% block content %} 
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div class="container-xxl" id="kt_content_container">
        <!--begin::Navbar-->
        <div class="card mb-5 mb-xl-10">
            <div class="card-body pt-9 pb-0">
                <!--begin::Details-->
                {% include "profiles/profile_info.html" %}
                <!--end::Details-->
                <!--begin::Navs-->
                {% include "profiles/profile_menu.html" %}
                <!--begin::Navs-->
            </div>
        </div>
        <!--end::Navbar-->
        <!--begin::details View-->
        <div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
            <!--begin::Card header-->
            <div class="card-header cursor-pointer">
                <!--begin::Card title-->
                <div class="card-title m-0">
                    <h3 class="fw-bold m-0">Profile Details</h3>
                </div>
                <!--end::Card title-->
                <!--begin::Action-->
                <a href="{% url 'profile:settings' %}" class="btn btn-primary align-self-center">Edit Profile</a>
                <!--end::Action-->
            </div>
            <!--begin::Card header-->
            <!--begin::Card body-->
            <div class="card-body p-9">
                <!--begin::Row-->
                <div class="row mb-7">
                    <!--begin::Label-->
                    <label class="col-lg-4 fw-semibold text-muted"> Full Name </label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <span class="fw-bold fs-6 text-gray-800"> {{ user.get_full_name }} </span>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Input group-->
                <div class="row mb-7">
                    <!--begin::Label-->
                    <label class="col-lg-4 fw-semibold text-muted">
                        Contact Phone
                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Phone number must be active"></i>
                    </label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 d-flex align-items-center">
                        {% if  user.profile.phone %}
                            <span class="fw-bold fs-6 text-gray-800 me-2"> {{ user.profile.phone }} </span>
                            {% if  user.profile.phone_verified %}<span class="badge badge-success">Verified</span>{% else %}<span class="badge badge-warning">Not Verified</span>{% endif %}
                        {% endif %}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Input group-->
                
                <!--begin::Input group-->
                <div class="row mb-7">
                    <!--begin::Label-->
                    <label class="col-lg-4 fw-semibold text-muted">
                        Country
                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title=" User's Country"></i>
                    </label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {% if user.profile.country %}
                        <span class="fw-bold fs-6 text-gray-800"> {{ user.profile.country.name }} </span> 
                        {% endif %}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Input group-->
            
                
                <!-- begin group -->
                <div class="row mb-10">
                    <!--begin::Label-->
                    <label class="col-lg-4 fw-semibold text-muted">Last Login</label>
                    <!--begin::Label-->
                    <!--begin::Label-->
                    <div class="col-lg-8">
                        <span class="fw-semibold fs-6 text-gray-800">{% if user.is_authenticated %} {{user.last_login|date:"M d, Y H:i"}}{% endif %}</span>
                    </div>
                    <!--begin::Label-->
                </div>
                <!-- end group -->

                <!-- Need Condition :: about plan -->
                <!--begin::Notice-->
                <!-- <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6"> -->
                    <!--begin::Icon-->
                    <!--begin::Svg Icon | path: icons/duotune/general/gen044.svg-->
                    <!-- <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor" />
                            <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor" />
                            <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor" />
                        </svg>
                    </span> -->
                    <!--end::Svg Icon-->
                    <!--end::Icon-->
                    <!--begin::Wrapper-->
                    <!-- <div class="d-flex flex-stack flex-grow-1"> -->
                        <!--begin::Content-->
                        <!-- <div class="fw-semibold">
                            <h4 class="text-gray-900 fw-bold">We need your attention!</h4>
                            <div class="fs-6 text-gray-700">Your payment was declined. To start using tools, please
                            <a class="fw-bold" href="">Add Payment Method</a>.</div>
                        </div> -->
                        <!--end::Content-->
                    <!-- </div> -->
                    <!--end::Wrapper-->
                <!-- </div> -->
                <!--end::Notice-->

            </div>
            <!--end::Card body-->
        </div>
        <!--end::details View-->
    </div>
    <!--end::Container-->
</div>
{% endblock content %}

{% block javascripts %} 
    <script src="{% static 'js/custom/accounts/overview.js' %}"></script>
{% endblock javascripts %}