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

{% block title %} Settings {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<form method="post" enctype="multipart/form-data" novalidate>

    {% csrf_token %}
    <div class="mb-4"></div>
    <div class="row">
        <div class="col-12 col-xl-8">
            <div class="card card-body shadow-sm mb-4">
                <h2 class="h5 mb-4">General information</h2>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div>
                                <label for="first_name">First Name</label>
                                {{ user.first_name }}
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div>
                                <label for="last_name">Last Name</label>
                                {{ user.last_name }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input class="form-control" id="email" type="email" placeholder="name@company.com" value="{{ request.user.email }}" disabled>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-group">
                                <label for="phone">Phone</label>
                                {{ profile.phone_number }}
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-md mb-3">
                            <label for="birthday">Birthday</label>
                            <div class="input-group">
                                <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
                                {{ profile.birthday }}
                            </div>
                        </div>
                        <div class="col-md mb-3">
                            <label for="gender">Gender</label>
                            {{ profile.gender }}
                        </div>
                        <div class="col-md mb-3">
                            <label for="gender">Race</label>
                            {{ profile.race }}
                        </div>
                    </div>

                    <h2 class="h5 my-4">Location</h2>
                    <div class="row mb-3">
                        <div class="col-md">
                            <div class="form-group">
                                <label for="city">City</label>
                                {{ profile.city }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="zip">Province</label>
                                {{ profile.province }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="zip">Postal code</label>
                                {{ profile.postal_code }}
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary">Save All</button>
                    </div>
    
            </div>
            <div class="card card-body shadow-sm mb-4 mb-lg-0">
                <h2 class="h5 mb-4">Alerts & Notifications</h2>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                        <div>
                            <h3 class="h6 mb-1">Company News</h3>
                            <p class="small pe-4">Get Rocket news, announcements, and product updates</p>
                        </div>
                        <div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="user-notification-1">
                                <label class="form-check-label" for="user-notification-1"></label>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                        <div>
                            <h3 class="h6 mb-1">Account Activity</h3>
                            <p class="small pe-4">Get important notifications about you or activity you've missed</p>
                        </div>
                        <div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="user-notification-2" checked>
                                <label class="form-check-label" for="user-notification-2"></label>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item d-flex align-items-center justify-content-between px-0">
                        <div>
                            <h3 class="h6 mb-1">Meetups Near You</h3>
                            <p class="small pe-4">Get an email when a Dribbble Meetup is posted close to my location</p>
                        </div>
                        <div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="user-notification-3" checked>
                                <label class="form-check-label" for="user-notification-3"></label>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="card shadow border-0 text-center p-0">
                        {% if request.user.profile.cover_photo == None or request.user.profile.cover_photo == "" %}
                            <div class="profile-cover rounded-top" data-background="/static/assets/img/profile-cover.jpg"></div>
                        {% else %}
                            <div class="profile-cover rounded-top" data-background="{{request.user.profile.cover_photo.url}}"></div>
                        {% endif %}
                        <div class="card-body pb-5">
                            {% if request.user.profile.profile_photo == None or request.user.profile.profile_photo == "" %}
                                <img src="/static/assets/img/team/profile-picture-1.jpg" class="avatar-xl rounded-circle mx-auto mt-n7 mb-4" alt="Neil Portrait">
                            {% else %}
                                <img src="{{request.user.profile.profile_photo.url}}" class="avatar-xl rounded-circle mx-auto mt-n7 mb-4" alt="Neil Portrait">
                            {% endif %}
                            <h4 class="h3">
                                {{ request.user.get_full_name }}
                            </h4>
                            <h5 class="fw-normal">
                                {{ request.user.email }}
                            </h5>
                            <p class="text-gray mb-4">
                                {{ request.user.profile.location }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card card-body border-0 shadow mb-4">
                        <h2 class="h5 mb-4">Select profile photo</h2>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <!-- Avatar -->
                                {% if request.user.profile.profile_photo == None or request.user.profile.profile_photo == "" %}
                                    <img class="rounded avatar-xl" src="/static/assets/img/team/profile-picture-3.jpg" alt="change avatar">
                                {% else %}
                                    <img class="rounded avatar-xl" src="{{request.user.profile.profile_photo.url}}" alt="change avatar">
                                {% endif %}
                            </div>
                            <div class="file-field">
                                <div class="d-flex justify-content-xl-center ms-xl-3">
                                    <div class="d-flex">
                                        <span class="icon icon-md"><span class="fas fa-paperclip me-3"></span></span>
                                        {{profile.profile_photo}}
                                        <div class="d-md-block text-left">
                                            <div class="fw-normal text-dark mb-1">Choose Image</div>
                                            <div class="text-gray small">JPG, GIF or PNG. Max size of 800K</div>
                                            <button type="submit" class="btn btn-primary mt-3">Upload</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-12">
                    <div class="card card-body border-0 shadow mb-4">
                        <h2 class="h5 mb-4">Select cover photo</h2>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <!-- Avatar -->
                                {% if request.user.profile.cover_photo == None or request.user.profile.cover_photo == "" %}
                                    <img class="rounded avatar-xl" src="/static/assets/img/profile-cover.jpg" alt="change cover">
                                {% else %}
                                    <img class="rounded avatar-xl" src="{{request.user.profile.cover_photo.url}}" alt="change cover">
                                {% endif %}
                            </div>
                            <div class="file-field">
                                <div class="d-flex justify-content-xl-center ms-xl-3">
                                    <div class="d-flex">
                                        <span class="icon icon-md"><span class="fas fa-paperclip me-3"></span></span>
                                        {{profile.cover_photo}}
                                        <div class="d-md-block text-left">
                                            <div class="fw-normal text-dark mb-1">Choose Image</div>
                                            <div class="text-gray small">JPG, GIF or PNG. Max size of 800K</div>
                                            <button type="submit" class="btn btn-primary mt-3">Upload</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}