{% include 'header.twig' %}
<div class="wrapper-content__body">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-lg-8">
 </br></br>

  {% 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 %}
        <!-- Group: Account Details -->
        <div class="card mb-5">
          <div class="card-body">
            <h4 class="mb-3"><i class="fad fa-user-alt"></i> Account Details</h4>
            <div class="form-group">
              <label>{{ lang['account.username'] }}</label>
              <input type="text" class="form-control" value="{{ user['username'] }}" readonly>
            </div>
            <div class="form-group">
              <label>{{ lang['account.email'] }}</label>
              <input type="text" class="form-control" value="{{ user['email'] }}" readonly>
            </div>
          </div>
        </div>

        <!-- Group: Change Password -->
        <div class="card mb-5">
          <div class="card-body">
            <h4 class="mb-3"><i class="fad fa-key"></i> Change Password</h4>
            <form method="post" action="account">
              <div class="form-group">
                <label>{{ lang['account.password.current'] }}</label>
                <input type="password" class="form-control" name="current_password">
              </div>
              <div class="form-group">
                <label>{{ lang['account.password.new'] }}</label>
                <input type="password" class="form-control" name="password">
              </div>
              <div class="form-group">
                <label>{{ lang['account.password.confirm'] }}</label>
                <input type="password" class="form-control" name="confirm_password">
              </div>
              <button type="submit" class="btn btn-block btn-big-primary">{{ lang['account.password.button'] }}</button>
            </form>
          </div>
        </div>

        <!-- Group: Generate API Key -->
        <div class="card mb-5">
          <div class="card-body">
            <h4 class="mb-3"><i class="fad fa-link"></i> Generate New API Key</h4>
            <form action="/account/newapikey" method="post">
              <div class="form-group">
                <label>API Key</label>
                <input class="form-control" type="text" id="api_key" value="{{ masked_api_key }}" readonly>
              </div>
              <button type="submit" class="btn btn-block btn-big-primary">Generate New</button>
            </form>
            <small class="text-muted">Created: {{ created_at }}</small>
          </div>
        </div>

        <!-- Group: Set Timezone -->
        <div class="card mb-5">
          <div class="card-body">
            <h4 class="mb-3"><i class="fad fa-clock"></i> Set Timezone</h4>
            <form method="post" action="account/timezone">
              <div class="form-group">
                <label>{{ lang['account.timezone.title'] }}</label>
                <select name="timezone" id="timezone" class="form-control">
                  {% 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-block btn-big-primary">Save</button>
            </form>
          </div>
        </div>

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

    