{% damoe 'header.twig' %}
      
      
      
      <!-- 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="col">
                              <div class="acc-item row align-items-center">
                                 <div class="col">
                                    <div class="acc-item-text">
										<button id="gender-switch" class="acc-switch gs-male">
										  <div class="acc-switch-bg"></div>
										  <div class="btn-gender">
											<i class="ri-men-line"></i>
										  </div>
										  <div class="btn-gender">
											<i class="ri-women-line"></i>
										  </div>
										</button>
									</div>
                                 </div>
                              </div>
                           </div>
                           <div class="col">
                              <div class="acc-item row align-items-center">
                                 <div class="col-auto">
                                    <div class="acc-icon"><i class="ri-user-line"></i></div>
                                 </div>
                                 <div class="col">
                                    <div class="acc-item-title">Username</div>
                                    <div class="acc-item-text">
										
											{{ user['username'] }}
																		<span class="svg-icon verified">
																		<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
																			<path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="currentColor"></path>
																			<path d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white"></path>
																		</svg>
																	</span>
									
									</div>
                                 </div>
                              </div>
                           </div>
                           <div class="col">
                              <div class="acc-item row align-items-center">
                                 <div class="col-auto">
                                    <div class="acc-icon i-1"><i class="ri-mail-line"></i></div>
                                 </div>
                                 <div class="col">
                                    <div class="acc-item-title">Email</div>
                                    <div class="acc-item-text">{{ user['email'] }}<button id="changeEmailLink"><i class="ri-edit-box-line" style="background: var(--color-6);color: var(--color-5);padding: 1px 3px;border-radius: 5px;"></i></button></div>
                                 </div>
                              </div>
                           </div>
                           <div class="col">
                              <div class="acc-item row align-items-center">
                                 <div class="col-auto">
                                    <div class="acc-icon i-2"><i class="ri-whatsapp-line"></i></div>
                                 </div>
                                 <div class="col">
                                    <div class="acc-item-title">Skype</div>
                                    <div class="acc-item-text"></div>
                                 </div>
                              </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">
                                                                              <button class="form-control">
                                       <div class="row">
                                          <div class="col">Generate new</div>
                                          <div class="col-auto"><i class="ri-refresh-line"></i></div>
                                       </div>
                                    </button>
                                    </form>
                                 </div>
                              </div>
                           </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" id="current" name="current_password" class="form-control">
                                 </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" id="new" name="password" class="form-control">
                                 </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" id="confirm" name="confirm_password" class="form-control">
                                 </div>
                              </div>
                             
                              <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>lehaf72941@raotus.com</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="mobile-navbar">
        <div class="mobile-navbar-content">
            <a href="/" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="far fa-box-heart"></i>
                </div>
                <div class="mnc-item-text">New order</div>
            </a>
            <a href="/addfunds" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-exchange-dollar-line"></i>
                </div>
                <div class="mnc-item-text">Add funds</div>
            </a>
            <a href="/tickets" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-customer-service-2-line"></i>
                </div>
                <div class="mnc-item-text">Tickets</div>
            </a>
            <a href="/services" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-list-check-2"></i>
                </div>
                <div class="mnc-item-text">Services</div>
            </a>
        </div>
    </div>
  
       <div class="bs-toast">
         <div class="bs-toast-content">
            <div class="toast-text">Copy to clipboard</div>
         </div>
      </div>

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