{% extends "base-manager.htm" %} 
{% load static %} 
{% load template_tags %}
{% load i18n %} 

{% block title %} 
{{ block.super }} 
{% trans "Account Settings" %} 
{% endblock title %} 

{% block main_content %}
<div class="scroll-y">

    <!-- Main Editor -->
    <div id="user-profile">

        <!-- Profile Summary -->
        <div class="profile-summary-page">

            <div class="profile-report relative">

                <!-- Profile Top Panel Image 
                <img class="widget-bg img-responsive" src='{{ STATIC_URL }}img/user/profile_background.png'>
                -->

                <div>
                    <div class="profile-full-name">
                        {{user.first_name}} {{user.last_name}}
                    </div>
                    <div class="profile-e-mail">
                        {% trans "User name:" %} {{user.username}}
                    </div>
                </div>
            </div>

            <!-- Profile Sections -->
            <div class="profile-sections">

                <!-- My Account Info -->
                <section class="profile-list">
                    <div class="account-wrapper">
                        <div class="row relative">

                            <!-- Section Title -->
                            <div class="col-sm-3">
                                <div class="profile-header" style="margin: 0 10px">
                                    {% trans 'Account' %}
                                </div>
                            </div>

                            <div class="row-content col-sm-9" style="flex: 1; ">

                                <!-- Account Report -->
                                <!-- ko if: showEditUserForm() === false --> 
                                <div class="row" style="display: flex">
                                    <div class="col-sm-5">
                                        <div class="relative">
                                            <p class="text-main account-content-heading">{{ user.username }}</p>
                                            <p class="profile-label-shim">{% trans 'User name' %}</p>
                                        </div>
                                    </div>

                                    <div class="col-sm-5">
                                        <p class="text-main account-content-heading">********</p>
                                        <button class="btn btn-default btn-active-success btn-profile-password add-popover" 
                                            data-bind="click: toggleChangePasswordForm, attr: {'aria-expanded': showChangePasswordForm().toString(), 'aria-controls': 'change-password-form-container'}
                                        ">{% trans 'Change password' %}</button>
                                        <div class="password-success" data-bind="text:changePasswordSuccess"></div>
                                        <div class="change-password-form bottom fade in popover" id="change-password-form-container" data-bind='visible: showChangePasswordForm()'>
                                            <div class="arrow" style="left: 50%;"></div>
                                            {% include 'change_password.htm' %}
                                        </div>
                                    </div>

                                    <div class="col-sm-2">
                                        <div>
                                            <button class="btn btn-primary btn-active-purple btn-profile" aria-label="{% trans 'Edit account information' %}" 
                                                data-bind="click: toggleEditUserForm, attr: {'aria-expanded': showEditUserForm().toString(), 'aria-controls': 'edit-user-form-container'}
                                            ">{% trans 'Edit' %}</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="relative">
                                            {% if user.email %}
                                                <p class="text-main account-content-heading">{{ user.email }}</p>
                                            {% else %}
                                                <p class="text-main account-content-heading">{% trans 'None' %}</p>
                                            {% endif %}
                                            <p class="profile-label-shim">{% trans 'Contact email' %}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="relative">
                                            {% if user.userprofile.phone %}
                                                <p class="text-main account-content-heading">{{ user.userprofile.phone }}</p>
                                            {% else %}
                                                <p class="text-main account-content-heading">{% trans 'None' %}</p>
                                            {% endif %}
                                            <p class="profile-label-shim">{% trans 'Phone' %}</p>
                                        </div>
                                    </div>


                                    <!-- ko if: isTwoFactorAuthenticationEnabled || isTwoFactorAuthenticationForced -->
                                    <div class="col-sm-5">
                                        <div class="relative">
                                            <!-- ko if: hasUserEnabledTwoFactorAuthentication() -->
                                            <p class="text-main account-content-heading" style="color: green;">ENABLED</p>
                                            <!-- /ko -->
                                            <!-- ko ifnot: hasUserEnabledTwoFactorAuthentication() -->
                                            <p class="text-main account-content-heading" style="color: red;">DISABLED</p>
                                            <!-- /ko -->
                                            <p class="profile-label-shim">{% trans 'Two-Factor Authentication' %}</p>
                                        </div>
                                    </div>
                                    <!-- /ko -->
                                </div>
                                <!-- /ko -->

                                <!-- Edit Account Form -->
                                <!-- ko if: showEditUserForm() === true -->
                                <form method="post" id="edit-user-form-container">
                                    {% csrf_token %}
                                    <div class="row">

                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <span id="edit-username" class="control-label account-label">{% trans 'Arches user name' %}</span>
                                                <input disabled type="text" class="form-control input-lg account-input" 
                                                    aria-labelledby="edit-username" aria-label="{% trans 'Arches user name' %}" aria-describedby="edit-username-tip"
                                                    placeholder="Username" name="username" value="{{ user.username }}"
                                                >
                                            </div>
                                        </div>

                                        <div class="col-sm-5">
                                            <p class="account-tips" id="edit-username-tip">
                                                {% trans 'This is the unique email or name that you use to log on to Arches.' %}
                                            </p>
                                        </div>

                                    </div>

                                    <!-- Account First Name -->
                                    <hr style="border-color: #eee;">
                                    <div class="row">
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <label class="control-label account-label" for="edit-first-name">{% trans 'First name' %}</label>
                                                <input type="text" class="form-control input-lg account-input" id="edit-first-name" aria-describedby="edit-name-phone-tip"
                                                    placeholder="{% trans 'First name' %}" name="first_name" value="{{ user.first_name }}"
                                                >
                                                {% if form.first_name.errors %}
                                                {% for error in form.first_name.errors %}
                                                    <div style="color:darkred">{{ error|escape }}</div>
                                                {% endfor %}
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <p class="account-tips" id="edit-name-phone-tip">
                                                {% trans 'Arches uses your name and phone number to make it easier for other users to find and work with you.' %}
                                            </p>
                                        </div>
                                    </div>

                                    <!-- Account Last Name -->
                                    <div class="row">
                                        <!-- Names -->
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <label class="control-label account-label" for="edit-last-name">{% trans 'Last name' %}</label>
                                                <input type="text" class="form-control input-lg account-input" id="edit-last-name" aria-describedby="edit-name-phone-tip"
                                                    placeholder="{% trans 'Last name' %}" name="last_name" value="{{ user.last_name }}"
                                                >
                                                {% if form.last_name.errors %}
                                                {% for error in form.last_name.errors %}
                                                    <div style="color:darkred">{{ error|escape }}</div>
                                                {% endfor %}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Phone -->
                                    <div class="row">
                                        <!-- Names -->
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <label class="control-label account-label" for="edit-phone">{% trans 'Phone Number (optional)' %}</label>
                                                <input type="text" class="form-control input-lg account-input" id="edit-phone" aria-describedby="edit-name-phone-tip"
                                                    placeholder="e.g. +1 415 555-1234" name="phone" value="{{ user.userprofile.phone }}"
                                                >
                                            </div>
                                        </div>
                                    </div>

                                    <hr style="border-color: #eee;">

                                    <!-- Contact Email -->
                                    <div class="row">
                                        <!-- Names -->
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <label class="control-label account-label" for="edit-email">{% trans 'Contact Email' %}</label>
                                                <input type="email" class="form-control input-lg account-input" id="edit-email" aria-describedby="edit-email-tip"
                                                    placeholder="jsmith@company.com" name="email" value="{{ user.email }}"
                                                >
                                                {% if form.email.errors %}
                                                {% for error in form.email.errors %}
                                                    <div style="color:darkred">{{ error|escape }}</div>
                                                {% endfor %}
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <p class="account-tips" id="edit-email-tip">
                                                {% trans 'Arches uses your e-mail to alert you to projects and tasks assigned to you.' %}
                                            </p>
                                        </div>
                                    </div>

                                    <!-- ko if: isTwoFactorAuthenticationEnabled || isTwoFactorAuthenticationForced -->
                                        <hr style="border-color: #eee;">
                                        
                                        <!-- Two-Factor Authentication -->
                                        <div class="row">
                                            <div class="col-sm-5">
                                                <div class="form-group">
                                                    <span id="2fa-enabled" class="control-label account-label">{% trans 'Two-Factor Authentication' %}</span>
                                                    <input 
                                                        disabled
                                                        type="text" 
                                                        class="form-control input-lg account-input" 
                                                        name="two-factor-authentication-status" 
                                                        data-bind="value: hasUserEnabledTwoFactorAuthentication() ? 'ENABLED' : 'DISABLED',
                                                            attr: {'aria-labeledby': '2fa-enabled', 'aria-label': $root.translations.twoFactorAuthentication}
                                                    ">
                                                </div>
                                            </div>
                                            <div class="col-sm-5">
                                                <p class="account-tips">
                                                    <button 
                                                        class="btn btn-link" 
                                                        type='button' 
                                                        style="color: #579ddb; padding-top: 24px;"
                                                        data-bind="click: function() { 
                                                            alertTwoFactorAuthenticationChange('{{ user.email }}'); 
                                                            document.querySelector('#card-alert-panel > .ep-form-alert-buttons > button').focus(); 
                                                        }
                                                    ">
                                                        {% trans 'Click here to update Two-Factor Authentication settings via email' %}
                                                    </button>
                                                </p>
                                            </div>
                                        </div>
                                    <!-- /ko -->

                                    <!-- Save & Cancel -->
                                    <hr style="border-color: #eee;">
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <div>
                                                <button class="btn btn-primary btn-active-purple btn-profile mar-btm" type="submit" formaction="{% url 'user_profile_manager' %}">{% trans 'Save' %}</button>
                                                <button class="btn btn-danger btn-active-dark btn-profile mar-btm" data-bind='click: toggleEditUserForm'>{% trans 'Cancel' %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!-- /ko -->
                            </div>
                        </div>

                    </div>
                </section>


<!-- commenting this section out as it's not implemented as of Feb 19th - AC -->
                <!-- My Devices -->
<!--
                <div class="profile-list">
                    <div class="profile-header">
                        My Devices
                    </div>
-->

                    <!-- No Device Registered Yet -->
<!--
                    <div class="">
-->

                        <!-- Download panel -->
<!--
                        <div id="download-buttons-panel" class="">
                            <span class="hidden-xs">You haven't registered a device yet.</span> Download the App:
                            <div class="">
                                <a class="download-app" href=""><img class="apple_app_store_icon" src="{{ STATIC_URL }}img/user/apple.png" alt="ios"></a>
                                <a class="download-app" href=""><img class="android_app_store_icon" src="{{ STATIC_URL }}img/user/google.png" alt="android"></a>
                            </div>
                        </div>
-->

                        <!-- Devices Panel -->
<!--
                        <div id="devices-panel" class="" style="display: none;">
                            <div class="row">
                                <div class="col-sm-9 col-sm-offset-3">-->
                                    <!-- Device Listing -->
                                    <!--<ul class="device-listing">
                                        <li class="device-list-item">
                                            <div class="">
                                                <dl class="device-summary">
                                                    <dt>Alison's iPhone 8</dt>
                                                </dl>
                                            </div>
                                            <img src="img/arches/devices/smart_phone.png" alt="Tablet" class="mar-btm" style="height: 80px; margin-top: 10px; margin-left: 15px; margin-right: 15px;">
                                            <div class="">
                                                <dl class="device-summary">
                                                    <dt>December 18, 2017</dt>
                                                    <dd class="profile-label-shim">9:18:52</dd>
                                                    <dd class="profile-label-shim">Last login</dd>
                                                </dl>
                                            </div>
                                        </li>

                                        <li class="device-list-item">
                                            <div class="">
                                                <dl class="device-summary">
                                                    <dt>Getty iPad #14</dt>
                                                </dl>
                                            </div>
                                            <img src="img/arches/devices/tablet.png" alt="Tablet" class="mar-btm" style="height: 80px; margin-top: 10px; margin-left: 15px; margin-right: 15px;">
                                            <div class="">
                                                <dl class="device-summary">
                                                    <dt>November 9, 2017</dt>
                                                    <dd class="profile-label-shim">17:45:12</dd>
                                                    <dd class="profile-label-shim">Last login</dd>
                                                </dl>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
-->

                <!-- Notification Settings -->
                <section>
                    <div class="profile-list">
                        <div class="profile-header">
                            {% trans 'Notification Settings' %}
                        </div>

                        <div class="row">
                            <div class="col-sm-9 col-sm-offset-3 profile-notif-settings">
                                <table class="notif-table table-striped">
                                    <thead>
                                        <tr>
                                            <th>{% trans 'Trigger' %}</th>
                                            <th class="notif-type">{% trans 'Email Notification' %}</th>
                                            <th class="notif-type">{% trans 'Web Notification' %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- ko foreach: notifTypeObservables -->
                                        <tr>
                                            <td data-bind="text:name"></td>
                                            <td>
                                                <span class="control-label widget-input-label-notif">
                                                    <span class="switch switch-small arches-switch" tabindex="0" role="switch" 
                                                        data-bind="css: {'on': emailnotify()}, click: function(){emailnotify(!emailnotify())}, onEnterkeyClick, onSpaceClick,
                                                            attr: {'aria-checked': emailnotify().toString(), 'aria-label': '{% trans 'Email Notifications for '%}' + name() }
                                                    "><small></small></span>{% trans 'Enable' %}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="control-label widget-input-label-notif">
                                                    <span class="switch switch-small arches-switch" tabindex="0" role="switch" 
                                                        data-bind="css: {'on': webnotify()}, click: function(){webnotify(!webnotify())}, onEnterkeyClick, onSpaceClick,
                                                            attr: {'aria-checked': webnotify().toString(), 'aria-label': '{% trans 'Web Notifications for '%}' + name() }
                                                    "><small></small></span>{% trans 'Enable' %}
                                                </span>
                                            </td>
                                        </tr>
                                        <!-- <tr>
                                            <td>{% trans 'Exporting Search Results' %}</td>
                                            <td>
                                                <label class="control-label widget-input-label">
                                                    <span class="switch switch-small arches-switch" data-bind="css: {'on': toggleSearchExportEmailNotifs()}, click: function(){toggleSearchExportEmailNotifs(!toggleSearchExportEmailNotifs())}"><small></small></span>
                                                </label>
                                            </td>
                                            <td>
                                                <label class="control-label widget-input-label">
                                                    <span class="switch switch-small arches-switch" data-bind="css: {'on': toggleSearchExportWebNotifs()}, click: function(){toggleSearchExportWebNotifs(!toggleSearchExportWebNotifs())}"><small></small></span>
                                                </label>
                                            </td>
                                        </tr> -->
                                        <!-- /ko -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

        </div>
        <!-- END Profile Summary -->

    </div>
    <!--END  Main Editor -->

</div>

{% endblock main_content %}
{% block pre_require_js %}
{{ block.super }}
<div 
    id="profileManagerData"
    style="display: none;"
    profileManagerData='{
        "error_count": {{form.errors|length}},
        "two_factor_authentication_settings": {{two_factor_authentication_settings}},
    }'
></div>
{% endblock pre_require_js %}
