{% extends 'partials/base.html' %}
{% load humanize %}
{% block content %}

<style>
    #history {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
</style>

<div class="page">
    <div class="inner narrow">

      <div class="box" style="border-radius:var(--r-lg);display:flex;align-items:center;gap:16px;flex-wrap:wrap">
        <span class="ava" style="width:64px;height:64px;font-size:24px;background:var(--hero);border:0;color:#fff">{{ base_two }}</span>
        <div style="flex:1;min-width:0">
          <div style="font-weight:800;color:var(--head);font-size:19px;letter-spacing:-.02em">{{ request.user.username }}</div>
          <div style="font-size:13px;color:var(--dim)">{{ request.user.email }}</div>
          <span class="status" style="margin-top:7px"><svg viewBox="0 0 24 24"><path d="M5 13l4.5 4.5L19 7"/></svg> Email verified</span>
        </div>
      </div>

      <!-- <div class="chips" style="margin:16px 0 0">
        <a class="chip" href="#profile">Profile</a>
        <a class="chip" href="#security">Security</a>
        <a class="chip" href="#payout">Bank &amp; payouts</a>
        <a class="chip" href="#notify">Notifications</a>
        <a class="chip" href="#danger">Danger zone</a>
      </div> -->

      <div class="box" id="profile" style="margin-top:14px">
        <h2>Profile</h2>
        <p class="hint">Delivery goes to the email below, so keep it one you check.</p>
        <form action="#saved">
          <div class="two">
            <div class="field"><label for="fName">Username</label><input id="fName" value="{{ request.user.username }}" readonly autocomplete="name"></div>
            <!-- <div class="field"><label for="fPhone">Phone</label><input id="fPhone" inputmode="tel" value="0803 000 0000" autocomplete="tel"></div> -->
          </div>
          <div class="field"><label for="fEmail">Delivery email</label><input id="fEmail" type="email" value="{{ request.user.email }}" readonly autocomplete="email"></div>
          <div class="two">
            <div class="field"><label for="fCur">Currency</label><input id="fCur" value="US Dollar ($)" readonly></div>
            <div class="field"><label for="fLang">Language</label>
              <select id="fLang">
                <option>English</option>
              </select></div>
          </div>
          <!-- <a href="#saved" class="btn btn-solid btn-sq" style="margin-top:18px;padding:14px 26px">Save changes</a> -->
        </form>
      </div>

      <div class="box" id="security">
        <h2>Security</h2>
        {% if messages %}
        {% for m in messages %}
        <p class="hint" style="color: red;">{{ m }}</p>
        {% endfor %}
        {% endif %}
        <p class="hint">Your wallet balance and every key you own sit behind this password.</p>
        <form action="" method="POST">
          {% csrf_token %}
          <div class="field"><label for="pwOld">Current password</label><input required name="current_password" id="pwOld" type="password" placeholder="••••••••" autocomplete="current-password"></div>
          <div class="two">
            <div class="field"><label for="pwNew">New password</label>
              <input id="pwNew" required name="new_password" type="password" placeholder="At least 8 characters" autocomplete="new-password">
              <div class="meter"><i class="f3"></i><i class="f3"></i><i class="f3"></i><i></i></div>
            </div>
            <div class="field"><label for="pwCopy">Repeat it</label>
              <input id="pwCopy" required type="password" name="confirm_password" placeholder="Type it again" autocomplete="new-password"></div>
          </div>
          <button type="submit" class="btn btn-solid btn-sq" style="margin-top:18px;padding:14px 26px">Update password</button>
        </form>

        
      </div>


      <div class="box danger" id="danger">
        <h2>Danger zone</h2>
        <p class="hint">Withdraw your balance before you close the account — it is not refundable afterwards.</p>
        <div class="dact">
          <a href="/user/signout" class="btn btn-ghost">Sign out</a>
          <!-- <a href="#delete" class="btn del">Delete my account</a> -->
        </div>
      </div>

    </div>
  </div>
  
{% endblock content %}