{% extends "partial/layout.html.twig" %}


{% block title %}{{ t("account_edit_page_name", "Account Details") }}{% endblock %}
{% block description %}{{ t("account_edit_meta_description", "Account details") }}{% endblock %}
{% block keywords %}{{ t("account_edit_meta_keywords", "details, account, short, url, user") }}{% endblock %}
{% block selected_navigation_link %}settings{% endblock %}

{% block body %}

    <!-- ACCOUNT-EDIT -->

<div class="content-box-wrap">
 

    <section class="content-box-section text-white text-center">
        <div class="container">
               <div class="content-box-text">
                <h1 class="mb-xl-4 mb-lg-4 mb-md-3 mb-sm-2">{{ t('your_details', 'Your Details') }}</h1>
                <p class="mb-0"> {{ t('keep_your_account_details_up_to_date_below', 'Keep your account details up to date below.') }}</p>
            </div>         
        </div>
    </section>
</div>
               
             
<form id="account-dit" class="form-horizontal form-groups-bordered" role="form" action="{{ theme.getAccountWebRoot() }}/edit" method="POST" enctype="multipart/form-data"> 
<section class="content-block">

  <div class="container">
    <div class="row">
      <div class="content-block-inner w-100" style=" margin-top: -246px;">
        <div class="content-block-outer">
          <div class="content-data float-left w-100">
            <h4 class="text-center">{{ t('account_security', 'Account Security') }}</h4>
            <h6 class="mb-3 text-center" style="color: var(--global--color-pink);"> {{ emailChangeMsg }}</h6>
            <div class="col-lg-10 col-md-12 col-sm-12 text-lg-left" style="margin: 0 auto;">
            
                <div class="col" style="border: 1px dashed #b6b6b6; border-radius: 5px;margin-bottom: 25px; padding-top: 10px;">
                <label style="margin-bottom: 14px;" class="col-4 control-label" for="emailAddress">{{ t("email_address", "Email Address") }}</label>
                <div class="account-form" style="display: inline-block;">
                  <div class="form-group">
                    <input id="emailAddress" name="emailAddress" type="text" value="{{ emailAddress }}" class="form-control" data-content="{{ t('your_new_email_address', 'Your new email address') }}" data-placement="right" 
                    data-trigger="hover focus" data-container="body" data-toggle="popover">
                  </div>
                </div>
              </div>
              
                <div class="col" style="border: 1px dashed #b6b6b6; border-radius: 5px;margin-bottom: 25px; padding-top: 10px;">
                <div class="form-group">
                  <label style="margin-bottom: 14px;" class="col-4 control-label" for="password">{{ t("change_password", "Change Password") }}</label>
                  <div class="account-form" style="display: inline-block;">
                    <div class="form-group">
                      <input id="password" name="password" type="password" value="" class="form-control" data-content="{{ t('a_new_account_password_leave_blank_to_keep', 'Optional. A new account password, leave this blank to keep your existing.') }}" data-placement="right" data-trigger="hover focus" data-container="body" data-toggle="popover">
                    </div>
                  </div>
                </div>
         
                <div class="form-group">
                  <label style="margin-bottom: 14px;" class="col-4 control-label" for="passwordConfirm">{{ t("confirm_password_edit", "Confirm Password") }}</label>
                  <div class="account-form" style="display: inline-block; ">
                    <div class="form-group">
                      <input id="passwordConfirm" name="passwordConfirm" type="password" value="" class="form-control" data-content="{{ t('a_new_account_password_confirm_leave_blank_to_keep', 'Optional. Confirm the password entered above, leave this blank to keep your existing.') }}" data-placement="right" data-trigger="hover focus" data-container="body" data-toggle="popover">
                    </div>
                  </div>
                </div>
</div>
              {% if SITE_CONFIG_ENABLE_2FA == 'yes' %} 
              <div class="col" style="border: 1px dashed #b6b6b6; border-radius: 5px;margin-bottom: 25px; padding-top: 10px;">
                <div id="Enable2FAWrapper" {{ enabled2FA==1?' style="display: none;"':'' }}>
                  <div class="form-group">
                    <label class="col-4 control-label">{{ t('2fa_status', '2FA Status') }}</label>
                    <div class="col-sm-7" style="padding-top: 7px; display:inline-block;">
                      {{ t("settings_2fa_disabled", "Disabled") }}&nbsp;&nbsp; <i class="fa fa-unlock lock-2fa"></i>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-4 control-label"></label>
                    <div class="col-sm-7">
                      <button class="btn btn-secondary" type="button" onClick="enable2fa(); return false;">{{ t("settings_2fa_enable_2fa", "Enable 2FA") }}</button>
                    </div>
                  </div>
                </div>
                <div id="Disable2FAWrapper" class="panel-body" {{ enabled2FA==0?' style="display: none;"':'' }}>
                  <div class="form-group">
                    <label class="col-sm-4 control-label">{{ t('2fa_status', '2FA Status') }}</label>
                    <div class="col-sm-7" style="padding-top: 7px;">
                      {{ t("settings_2fa_enabled", "Enabled") }}&nbsp;&nbsp; <i class="fa fa-lock lock-2fa"></i>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-4 control-label"></label>
                    <div class="col-sm-6">
                      <button class="btn btn-secondary" type="button" onClick="if(confirm('Are you sure you want to disable 2FA?')) { disable2fa(); } return false;">{{ t("settings_2fa_disable_2fa", "Disable 2FA") }}</button>
                    </div>
                  </div>
                </div>
              </div> 
			  
  
			  {% endif %} 
              
              
            <h4 class="mb-3 text-center" style="margin-top: 50px;margin-bottom: 50px !important;"> {{ t('account_settings', 'Settings') }}</h4>
			  

                                
                    {% if SITE_CONFIG_LANGUAGE_USER_SELECT_LANGUAGE == 'yes' %}
                        <div class="col" style="border: 1px dashed #b6b6b6;border-radius: 5px;margin-bottom: 25px; padding-top: 10px;">
                                                <div class="form-group" >
                                                    <label  class="col-sm-3 control-label" for="languageId">{{ t("language", "Language") }}</label>
                                                   <div class="col-sm-7" style=" display:inline-block; max-width: 200px;">
                                                        <select id="languageId" name="languageId" class="form-control" data-content="{{ t('settings_tip_site_language', 'The language to use on the site.') }}" data-placement="right" data-trigger="hover focus" data-container="body" data-toggle="popover">
                                                            {% for activeLanguage in activeLanguages %}
                                                                <option value="{{ activeLanguage.id }}"{% if languageId == activeLanguage.id %} SELECTED{% endif %}>{{ activeLanguage.languageName }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                        </div>   
                          </div>  
                    {% endif %}
                    
                        <div class="col" style="border: 1px dashed #b6b6b6;border-radius: 5px;margin-bottom: 25px; padding-top: 10px;">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label" for="DirectDownload">Enable Direct Download</label>
                                                    <div class="col-sm-7" style=" display:inline-block; max-width: 200px;" >
                                                        <select id="DirectDownload" name="directDownload" class="form-control" autofocus="autofocus" data-content="Start download process immediately (Premium users Only)." data-placement="right" data-trigger="hover focus" data-container="body" data-toggle="popover">
                                                            <option value="1" {% if directDownload == 1 %}selected="selected"{% endif %}>YES</option>
                                                            <option value="0" {% if directDownload == 0 %}selected="selected"{% endif %}>NO</option>
                                                        </select>
                           </div>
                           
                        </div>
                     </div>  
                    
                    
   
                   
                    <h4 class="mb-3 text-center" style="margin-top: 50px;margin-bottom: 50px !important;">   {{ t('account_settings_file_upload_api_keys', 'File Upload API Keys.') }}</h4>       
                                   <div class="account-form" style="width:99%">
                  <div class="form-group">
                              <input id="key1" name="key1" type="text" value="{{ key1 }}" class="form-control" data-content="{{ t('account_api_keys', 'Optional. Generate access keys to the file upload API.') }}" data-placement="right" data-trigger="hover focus" data-container="body" data-toggle="popover" READONLY/>
                  </div>
                  <button class="search-btn button-effect" type="button" onClick="createRandomAPIKey('key1'); return false;">Generate {{ t("key1", "Key 1") }}</button>
                 </div>

                 <div class="account-form" style="width:99%">
                  <div class="form-group">
                    <input id="key2" name="key2" type="text" value="{{ key2 }}" class="form-control" data-content="{{ t('account_api_keys', 'Optional. Generate access keys to the file upload API.') }}" data-placement="right" data-trigger="hover focus" data-container="body" data-toggle="popover" READONLY/>

                  </div>
                   <button class="search-btn button-effect" type="button" onClick="createRandomAPIKey('key2'); return false;">Generate {{ t("key2", "Key 2") }}</button>
                 </div>
                        
                        
                                   
                                            
                   {% if SITE_CONFIG_SHOW_API_PAGE == 'yes' %}
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label" style="float: left;max-width: 12%;margin-top: 7px;">{{ t('api_documentation', 'API Documentation')|title }}</label>
                                                    <div class="col-sm-7">
                                                        <a href="{{ WEB_ROOT }}/api" target="_blank" class="btn btn-default">{{ t('api_documentation_view', 'View')|title }}</a>
                                                    </div>
                                                </div>
                     {% endif %}
                     
                     
                 <hr style="margin-top:60px">  
                 
                <div class="col" style="border: 1px dashed #b6b6b6; border-radius: 5px;margin-bottom: 25px; padding-top: 10px;">
                <label style="margin-bottom: 14px;color: red;" class="col-4 control-label" for="currentPassword">Account password</label>
                <div class="account-form" style="display: inline-block;">
                  <div class="form-group">
                    <input id="currentPassword" name="currentPassword" type="password" class="form-control" data-content="Enter your account password" data-placement="right" data-trigger="hover focus" data-container="body" 
                    data-toggle="popover">
                  </div>
                </div>
              </div>
              
                </div>
                   
         
                
                
                           
              <div class="submitform-button">
                <input type="hidden" value="1" name="submitme"/>
                <button style="background: #1e222f;" type="submit" id="submit" class="submitform-btn button-effect">{{ t("update_account", "update account")|title }} </button>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>
   </form>  

   
<div id="addEditFolderModal" class="modal fade custom-width edit-folder-modal" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"><form id="Enable2FAForm" action="https://fhscript.com/account/ajax/enable_2fa_process" autocomplete="off">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Enable 2FA</h4>
    </div>

    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">
                <p>2FA can be used to further secure your account against unathorised access. Once enabled, you'll be prompted for a unique code to login your account, in addition to your username and password.</p>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-md-4">
                <h4>Step 1</h4>
                <p>Download Google Authenticator to your mobile device:</p>
                <div class="text-center wrapper-2fa">
                    <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en_GB&amp;gl=US" target="_blank">
                        <img src="https://fhscript.com/themes/spirit/assets/images/2fa/android.png">
                    </a>
                    <a href="https://apps.apple.com/us/app/google-authenticator/id388497605" target="_blank">
                        <img src="https://fhscript.com/themes/spirit/assets/images/2fa/ios.png">
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <h4>Step 2</h4>
                <p>Using your device camera, scan the QR code below on the Authenticator app:</p>
                <div class="text-center">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&amp;data=otpauth%3A%2F%2Ftotp%2FFile%2520Upload%2520Script%3Aadmin%3Fsecret%3D0de5a5254a8e2c97c7af8325f8419dd2%26issuer%3DFile%2520Upload%2520Script&amp;ecc=M" alt="Scan this code using Google Authenticator on your device.">
                </div>
            </div>
            <div class="col-md-4">
                <h4>Step 3</h4>
                <p>Validate the 6 digit code generated by Google Authenticator:</p>
                <div class="form-group mt-16">
                    <input id="confirmationCode" name="confirmationCode" class="form-control" maxlength="6">
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="hidden" name="submitme" id="submitme" value="1">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button id="Enable2FAFormSubmit" type="button" class="btn btn-info" onclick="processAjaxForm(this, function () {
                    set2FAEnabled();
                    $('.modal').modal('hide');
                });
                return false;">Validate Code &amp; Enable <i class="entypo-check"></i></button>
    </div>
</form></div>
</div>
</div>
</div>
{% endblock %}