{% extends "layout.html"%}

{% block title %}
    Account
{% endblock %}

{% block main %}
<div class="row row-cols-2">
  <!-- Username -->
  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 float-start">
    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
    <div class="card-header">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-person" viewBox="0 0 16 16">
        <path d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"/>
        <path d="M8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
      </svg>   Username</div>
    <div class="card-body">
      <h5 class="card-title">{{ name }}</h5>
    </div>
    </div>

    <!-- Budget -->
    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
    <div class="card-header">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
        <path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
        <path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
      </svg>   Budget</div>
    <div class="card-body">
      <h5 class="card-title">{{ budget | usd }}</h5>
    </div>
    </div>

    <!-- Choose new password -->
    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
    <div class="card-header">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
        <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
      </svg>   Reset Password</div>
    <div class="card-body">
        <form action="/account" method="post">
          <label for="pw_old">Current Password</label>
          <input name="pw_old" autocomplete="off" class="form-control" placeholder="Current Password" type="password" required>

          <label for="pw_new">New Password</label><br>
          <input name="pw_new" autocomplete="off" class="form-control" placeholder="New Password" type="password" required>
          <p class="footnote">* Password must be between 6-25 characters long and contain at least one number and one letter</p>

          <label for="confirmation">Confirm New Password</label>
          <input class="form-control" autocomplete="off" name="confirmation" placeholder="Confirm New Password" type="password" required>
          <p class="footnote">* Your input must match the password above</p>
          <button class="btn btn-dark" type="submit">Change Password</button>
        </form>
    </div>
    </div>
  </div>

  <div class="col float-end" style="margin-top: 20px;">
    <img src="/static/piggy_laptop.png" class="float-end">
  </div>
</div>
{% endblock %}