{% include 'header.twig' %}  

{# FontAwesome 6 Fix #}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

      <div class="content">
        <!-- page and other top info -->
        <div id="page_info">

        </div>
        <!-- // page and other top info -->
        <!-- Account Page Content  -->
<div id="accountpage">
    <div class="container-fluid">
                <div class="row">
            <div class="col-md-6">

                <div class="card card_v2 mb-3">
                    <div class="card-body">
                        
                                             {% 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 id="def_side_title">
                                <div class="icon">
                                    <i class="fal fa-user-circle"></i>
                                </div>
                                <div class="name">
                                User Infos
                                </div>
                            </div>
                         <div class="mb-3">
                             <label for="">{{ lang['account.username'] }}</label>
                             <input type="text" class="form-control" id="username" value="{{ user['username'] }}" readonly>
                         </div>
                         <div class="mb-3">
                            <label for="">{{ lang['account.email'] }}</label>
                            <input type="text" class="form-control" id="username" value="{{ user['email'] }}" readonly>
                        </div>
                    </div>
                </div>

                  

						                <div class="card card_v2 mb-3">
                    <div class="card-body">

                            <div id="def_side_title">
                                <div class="icon">
                                    <i class="far fa-lock"></i>
                                </div>
                                <div class="name">
                                Account Password Manager
                                </div>
                            </div>
                            <form method="post" action="account">
                                            
                                <div class="mb-3">
                                    <label for="current">{{ lang['account.password.current'] }}</label>
                                    <input type="password" class="form-control" id="current" name="current_password">
                                </div>

                                <div class="mb-3">
                                    <label for="new">{{ lang['account.password.new'] }}</label>
                                    <input type="password" class="form-control" id="new" name="password">
                                </div>

                                <div class="mb-3">
                                    <label for="confirm">{{ lang['account.password.confirm'] }}Confirm new password</label>
                                    <input type="password" class="form-control" id="confirm" name="confirm_password">
                                </div>
                                <button type="submit" class="btn btn-primary d-block w-100">{{ lang['account.password.button'] }}</button>
                            </form>
                            
                    </div>
                </div>

            </div>
					            <div class="col-md-6">
                <div class="card card_v2 mb-3">
                    <div class="card-body">
                            <div id="def_side_title">
                                <div class="icon">
                                    <i class="fad fa-key"></i>
                                </div>
                                <div class="name">
                                 API Key Generator
                                </div>
                            </div>
                            <form  action="/account/newapikey" method="post">
                                <div class="form-group">
                                  <label for="key" class="control-label">API key</label>
                                                                  </div>
                      
                               
                                <button type="submit" class="btn btn-primary d-block w-100">Generate new</button>
                              </form>
                        <br>
                        <div class="alert alert-danger">
                            When you click on "Generate new" it will Generate new key. This key is very sensitive informations of your account please avoid share this key. Thank you.
                        </div>
                    </div>
                  </div>		
							
							{% if site['languages']|length > 1 %}
							
                                  <div class="card card_v2 mb-3">
                    <div class="card-body">
                            <div id="def_side_title">
                                <div class="icon">
                                    <i class="far fa-language"></i>
                                </div>
                                <div class="name">
                                 Language
                                </div>
                            </div>
                            <form method="post" action="account/change_lang">
                                <div class="form-group">
                                  <label for="language" class="control-label">{{ lang['account.changelang.title'] }}</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 d-block w-100">{{ lang['account.changelang.button'] }}</button>
                              </form>
                    </div>
                  </div>
				
							
					{% endif %}		
							
                <div class="card card_v2 mb-3">
                    <div class="card-body">
                            <div id="def_side_title">
                                <div class="icon">
                                    <i class="far fa-clock"></i>
                                </div>
                                <div class="name">
                                    Timezone
                                </div>
                            </div>
                            <form method="post" action="account/timezone">
                                <div class="form-group">
                                  <label for="timezone" class="control-label">{{ lang['account.timezone.title'] }}</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 d-block w-100">{{ lang['account.timezone.button'] }}</button>
                              </form>
                    </div>

								</div>


							</div>							

						</div>	
				</section>

			</div>
		</div>
    </div>
 
{% include 'footer.twig' %}
