{% extends 'myapp/profile_base.html' %}
{% load static %}
{% block content %}

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container">
            <section class="row mb-2">

            </section>
            <section class="row mb-2 mt-2">
                <section class="col col-sm-8 offset-sm-2">

                    {% if messages %}
                    {% for message in messages %}
                    <div {% if message.tags %} class="{{ message.tags}}" {% endif %}>
                        {{ message }}
                        <button type="button" class="close" id="override-start" data-dismiss="alert"
                            aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {% endfor %}
                    {% endif %}

                </section>
            </section>
            <div class="row mb-2">
                <div class="col-sm-10 profile_title">
                    <div style="display: flex; gap: 4rem;">
                        <h1 class="m-0">{{title}}</h1>
                        <a href="{% url 'profile_update' %}" class="text-dark m-3">UPDATE</a>
                    </div>
                    <p class="mt-2">Manage your personel profile information to control what details are shared with
                        other docusign users</p>
                </div>

            </div><!-- /.row -->

        </div><!-- /.container-fluid -->
    </div>
    <section class="content">
        <div class="container">

            <section class="row">
                <section class="col-lg-10 col-md-12 col-sm-12">
                    <div class="profile_image">
                        <div class="contact-info-header mb-1 mt-2 ml-2" style="gap: 5rem;">
                            <h3 class="m-2">Profile image</h3>
                            
                        </div>
                        {% if user.profile_pic %}
                        <img src="{{user.profile_pic.url}}" class="img-circle elevation-1 mb-2" width="50" height="50" alt="">
                        {% else %}
                        <img src="{% static 'images/default-avatar.png' %}" class="img-circle mb-2 mt-2 ml-2" width="50"
                            height="50" alt="">
                        {% endif %}
                    </div>

                </section>



            </section>
            <section class="row mt-4">
                <section class="col-lg-10 col-md-12 col-sm-12">
                    <div class="profile_image">
                        <div class="contact-info-header mb-1 mt-2 ml-2" style="gap: 5rem;">
                            <h3 class="m-2">Name</h3>
                            
                        </div>
                        <p class="m-3">{{user.get_full_name}}</p>
                    </div>

                </section>



            </section>
            <section class="row mt-4">
                <section class="col-lg-10 col-md-12 col-sm-12">
                    <div class="profile_image">
                        <div class="contact-info-header mb-1 mt-2 ml-2" style="gap: 5rem;">
                            <h3 class="m-2">Email Address</h3>
                            
                        </div>
                        <p class="m-3">{{user.email}}</p>
                    </div>

                </section>



            </section>
            <section class="row mt-4 mb-4">
                <div class="col-lg-10">
                    <div class="contact-info-container">
                        <div class="contact-info-header" style="gap: 5rem;">
                            <h3>Contact Information</h3>
                            
                            
                            
                        </div>
                        <div class="contact-info-content">
                            <div class="contact-info-item">
                                <b>Company</b>
                                {{user.organisation}}
                            </div>
                            <div class="contact-info-item">
                                <b>Title</b>
                                {{user.job_title}}
                            </div>
                            <div class="contact-info-item">
                                <b>Address</b>
                                {{user.address}}
                            </div>
                            <div class="contact-info-item">
                                <b>Phone Number</b>
                                {{user.phone}}
                            </div>
                        </div>

                    </div>
                </div>

            </section>


    </section>
    <footer class="text-center">
        <div class="copy-right">

            <p>Copyrights © 2024 digisigndoc.com</p>

        </div>
    </footer>



</div>
</section>
</div>
{% endblock %}