{% extends 'base.html' %}
{% load i18n static custom_filters crispy_forms_filters %}
{% block title %}
    {% trans 'Profile' %} {% endblock %}
    {% block content %}
        <div class="container-fluid">
            <div class="row align-items-center justify-content-between g-3 mb-4">
                <div class="col-auto">
                    <h2 class="mb-0">{% trans 'Profile' %}</h2>
                    
                </div>
                <div class="col-auto">
                    <div class="row g-2 g-sm-3">
                         <div class="col-auto">
                            <a href="{% url 'staff_password_reset' request.dealer.slug staff.pk %}"
                               class="btn btn-phoenix-danger"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-3">
                <div class="col-12 col-lg-8">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="border-bottom border-dashed pb-4">
                                <div class="row align-items-center g-3 g-sm-5 text-center text-sm-start">
                                    <div class="col-12 col-sm-auto">
                                        <input class="d-none" id="avatarFile" type="file" />
                                        <label class="cursor-pointer avatar avatar-5xl" for="avatarFile">
                                            {% if staff.logo %}
                                                <img src="{{ staff.logo.url }}"
                                                     alt="{{ staff.get_local_name }}"
                                                     class="rounded-circle"
                                                     style="max-width: 150px" />
                                            {% else %}
                                                <span class="rounded-circle feather feather-user text-body-tertiary"
                                                      style="max-width: 150px"></span>
                                                <img src="{% static 'images/logos/logo.png' %}"
                                                     alt="{{ staff.get_local_name }}"
                                                     class=""
                                                     style="max-width: 150px" />
                                            {% endif %}
                                        </label>
                                    </div>
                                    
                                    <div class="col-12 col-sm-auto flex-1">
                                        <h3>{{ staff.get_local_name }}</h3>
                                        <p>
                                        <li class="fas fa-user-shield me-1"></li>{% trans 'Role' %}:
                                        {% for group in staff.groups%}
                                        <span class="text-body-secondary me-2">&nbsp;{{group}}</span>
                                        {% endfor %}
                                        </p>
                                        <p class="text-body-secondary">{% trans 'Joined' %} {{ staff.created|timesince }} {% trans 'ago' %}</p>
                                        
                                    </div>
                                </div>
                                
                            </div>
                            <div class="d-flex flex-between-center pt-4">
                                <div>
                                    <h6 class="mb-2 text-body-secondary">{% trans 'last login'|capfirst %}<li class="fas fa-sign-in-alt ms-1"></li></h6>
                                    <h4 class="fs-7 text-body-highlight mb-0">{{ staff.user.last_login|date:"D M d, Y H:i" }}</h4>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="border-bottom border-dashed">
                                <h4 class="mb-3">{% trans 'Contact Information' %}</h4>
                            </div>
                            <div class="pt-4 mb-7 mb-lg-4 mb-xl-7">
                                <div class="row justify-content-between">
                                    <div class="col-auto">
                                        <h5 class="text-body-highlight">{% trans 'Address' %}<li class="fas fa-location-dot ms-1"></li></h5>
                                    </div>
                                    <div class="col-auto">
                                        <p class="text-body-secondary">{{ staff.address }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="border-top border-dashed pt-4">
                                <div class="row flex-between-center mb-2">
                                    <div class="col-auto">
                                        <h5 class="text-body-highlight mb-0">{% trans 'Email' %}<li class="fas fa-envelope ms-1"></li></h5>
                                    </div>
                                    <div class="col-auto">{{ staff.user.email }}</div>
                                </div>
                                <div class="row flex-between-center">
                                    <div class="col-auto">
                                        <h5 class="text-body-highlight mb-0">{% trans 'Phone' %}<li class="fas fa-phone ms-1"></li></h5>
                                    </div>
                                    <div class="col-auto" dir="ltr">{{ staff.phone_number }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    {% endblock %}