{% include 'header.twig' %}
      
      <style>
          .card.card-bg {
    background: white; 
   
}
.card-head{
    background: none;
}
.dark .card.card-bg{
    background: none;
}
      </style>
      
      <!-- Main variables *content* -->
        <main>
   <div class="container-fluid mt-4">
      <div class="row">
         <div class="col-lg-12">
            <div class="page overflow-hidden">
               <div class="page-body pb-4 pb-xl-6 mt-4">
                        
                  <div class="well">
                      
                                            <div class="col-lg-12">
      {% if error %}
        <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ errorText }}
        </div>
      {% endif %}
      {% if success %}
        <div class="alert alert-dismissible alert-success">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ successText }}
        </div>
      {% endif %}
                                                            
                  <div class="card card-bg mb-4">
                     <div class="card-body">
                        <div class="row row-cols-xxl-4 row-cols-md-4 row-cols-1">
                           
                        <div class="card-body">
                    <h3>Account Informations</h3>
                    <div class="form-group">
                        <label for="username" class="control-label">Username</label>
                        <input type="text" class="form-control" id="username" value="{{ user['username'] }}" readonly="">
                      </div>
              
                      <div class="form-group">
                        <label for="email" class="control-label">Email</label>
                        <input type="text" class="form-control" id="email" value="{{ user['email'] }}" readonly="">
                      </div>
                     
                </div>
                           
                        </div>
                     </div>
                  </div>
                  <div class="row">
                  
                     <div class="col-lg-6 col-md-6 col-12 mb-4">
                        <div class="card">
                           <div class="card-head d-flex align-items-center justify-content-between">
                              <div class="card-head-title">
                                 <div class="row align-items-center">
                                    <div class="col-auto">
                                       <div class="card-head-icon">
                                          <i class="ri-code-box-line"></i>
                                       </div>
                                    </div>
                                    <div class="col">
                                      <h4>API key</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                              <div class="row align-items-center">
                                 <div class="col-xxl-auto col-12 mt-3 mt-xxl-0">
                              <form  action="/account/newapikey" method="post">
                                 <div class="form-group">
            <label for="charge" class="control-label">API Link</label>
            <input type="text" class="form-control" value="{{ site['url'] }}/api/v2" readonly>
          </div>
                                <div class="form-group">
                                  <div class="form-group">
            <label for="charge" class="control-label">API Key</label>
            <input type="text" class="form-control" value="private" readonly>
          </div>
                                                                  </div>
                      <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
                                <button type="submit" class="btn btn-primary d-block w-100">Generate new</button>
                              </form>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
<div class="component_card">
    <div class="card account-card">
        <!-- Error Block -->
        <div id="2fa-approve-error-block" class="alert alert-dismissible alert-danger" style="display: {% if error2fa %} block {% else %} none {% endif %};">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <span id="2fa-error-text">{{ error2faText }}</span>
        </div>

        <div class="component_form_group ">
            <div class="form-group" style="
    padding: 10px;
">
                <label>Two-factor authentication</label>
                {% if user['two_factor_enabled'] == 1 %}
                    <p>2FA is currently enabled.</p>
                    <form id="2fa-disable-form" method="post" action="/account/disable_2fa">
                        <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
                        <div class="component_button_save">
                            <button type="submit" class="btn btn-block btn-big-primary" style="
    background: #62BFF8;
">Disable 2FA</button>
                        </div>
                    </form>
                {% elseif user['two_factor_enabled'] == 3 %}
                    <p>2FA is currently enabling. Please check your email and enter the code below.</p>
                    <form id="2fa-approve-form" method="post" action="/account/verify_2fa">
                        <div class="mb-4">Please enter the code sent to your email.</div>
                        <div class="form-group">
                            <label for="code" class="control-label">Code</label>
                            <input type="text" id="code" name="two_factor_code" class="form-control" required>
                        </div>
                        <input type="hidden" name="enabled" value="1">
                        <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
                        <div class="component_button_save">
                            <button id="2fa-approve" type="submit" class="btn btn-block btn-big-primary" style="
    background: #62BFF8;
">
                                Verify 2FA Code
                            </button>
                        </div>
                    </form>
                          <br>
                    <div class="component_button_save">
                        <form id="2fa-resend-code-form" method="post" action="/account/enable_2fa">
                            <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
                            <input type="hidden" name="resend" value="1">
                            <button type="submit" class="btn btn-block btn-big-secondary" style="
    background: #62BFF8;
">
                                Resend Code
                            </button>
                        </form>
                    </div>
                {% else %}
                    <p>2FA is currently disabled.</p>
                    <form id="2fa-generate-form" method="post" action="/account/enable_2fa">
                        <div class="mb-4">
                            Email-based option to add an extra layer of protection to your account. 
                            When signing in, you’ll need to enter a code that will be sent to your email address.
                        </div>
                        <input type="hidden" name="enabled" value="1">
                        <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
                        <div class="component_button_save">
                            <button id="2fa-generate" type="submit" class="btn btn-block btn-big-primary" style="
    background: #62BFF8;
">
                                Enable 2FA
                            </button>
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
</div>
                  <div class="row">
                     <div class="col-lg-6 mb-4">
                        <div class="card">
                           <div class="card-head d-flex align-items-center justify-content-between">
                              <div class="card-head-title">
                                 <div class="row align-items-center">
                                    <div class="col-auto">
                                       <div class="card-head-icon">
                                          <i class="ri-lock-password-line"></i>
                                       </div>
                                    </div>
                                    <div class="col">
                                       <h4>Set new password</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                              <form  method="post" action="">
                                                            <div class="row">
                                 <div class="col-12 mb-4">
                                    <label for="form-password" class="form-label mb-2">Current password</label>
                                    <input type="password" class="form-control" value="" name="current_password">
                                 </div>
                                 <div class="col-12 col-md-6 mb-4">
                                    <label for="form-new-password" class="form-label mb-2">New password</label>
                                     <input type="password" class="form-control" value="" name="password">
                                 </div>
                                 <div class="col-12 col-md-6 mb-4">
                                    <label for="form-confirm-password" class="form-label mb-2">Confirm new password</label>
                                   <input type="password" class="form-control" value="" name="confirm_password">
                                 </div>
                              </div>
                             <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
                              <button class="btn btn-primary btn-100">Change password</button>
                              </form>
                           </div>
                        </div>
                     </div>
                     <div class="col-lg-6 mb-4">
                        <div class="card">
                           <div class="card-head d-flex align-items-center justify-content-between">
                              <div class="card-head-title">
                                 <div class="row align-items-center">
                                    <div class="col-auto">
                                       <div class="card-head-icon">
                                          <i class="ri-tools-fill"></i>
                                       </div>
                                    </div>
                                    <div class="col">
                                       <h4>
Other settings
                                       </h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body">
                                                            <div class="mb-4">
                                 <form  method="post" action="account/change_lang">
                                 <label for="form-language" class="form-label mb-2">Language</label>
                                 <select class="form-control" name="lang">
                                                  {% for language in site['languages'] %}
                                                  <option {% if language["code"] == user["lang"] %} selected {% endif %} value="{{ language["code"] }}">{{ language["name"] }}</option>
                                                  {% endfor %}
                                              </select>
                              </div>
                                <button type="submit" class="btn btn-primary btn-100">Save</button>
                              </form>	
                                
                              <div class="mt-3 mb-4">
                                 <form  action="account/timezone" method="post">
                                 <label for="form-tz" class="form-label mb-2">Timezone</label>
                                  <select class="form-control" name="timezone">
                                             {% for timezone in timezones %}
                                             <option {% if timezone["timezone"] == user['timezone'] %} selected {% endif %} value="{{ timezone["timezone"] }}">{{ timezone["label"] }}</option>
                                             {% endfor %}
                                         </select>
                              </div>
                                <button type="submit" class="btn btn-primary btn-100">Save</button>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</main>
  
<!-- Change email -->
<div class="modal fade" tabindex="-1" role="dialog" id="changeEmailModal" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <form id="changeEmailForm" class="modal-content" method="post" action="">
      <div class="modal-header">
        <h4 class="modal-title">Change email</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div id="changeEmailError" class="error-summary alert alert-dismissible alert-danger hidden"></div>
        <div class="form-group">
          <label for="current-email">Current email</label>
          <span class="form-control" id="current-email" disabled></span>
        </div>
        <div class="form-group">
          <label for="new-email">New email</label>
          <input type="email" class="form-control" id="new-email" name="ChangeEmailForm[email]">
        </div>
        <div class="form-group">
          <label for="current-password">Current password</label>
          <input type="password" class="form-control" id="current-password" name="ChangeEmailForm[password]">
        </div>
        <input type="hidden" name="_csrf" value="e3tjmCVpelhzn7g-RRvZnM4VBD1a3kjl0yK0h4tRXO4_CSHbVSw3DgD773gnLYHGpX9-fB2LKYOwQIHN8yQflA==">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" id="changeEmailSubmitBtn">Change email</button>
      </div>
    </form>
  </div>
</div>

        


     
      <div class="overlay"></div>
 
{% include 'footer.twig' %}
