{% extends 'base.html' %}
{% from '_macros.html' import form_field %}

{% block title %}Edit profile · TradeHub{% endblock %}

{% block content %}
<div class="container" style="max-width: 640px;">
  <div class="page-header">
    <h1>Edit profile</h1>
    <p>Update your public information.</p>
  </div>

  <div class="form-card">
    <div style="display:flex; align-items:center; gap: var(--space-4); margin-bottom: var(--space-6);">
      <img src="{{ current_user.avatar }}" alt="{{ current_user.username }}" class="avatar avatar-xl">
      <div>
        <strong style="display:block; margin-bottom: 2px;">{{ current_user.username }}</strong>
        <small class="text-muted">{{ current_user.email }}</small>
      </div>
    </div>

    <form method="POST" enctype="multipart/form-data" novalidate>
      {{ form.hidden_tag() }}

      {{ form_field(form.username) }}

      <div class="form-group">
        <label class="form-label" for="bio">Bio</label>
        <textarea id="bio" name="bio" class="form-textarea" rows="4"
                  placeholder="Tell people a bit about yourself..."
                  maxlength="300" data-char-counter="300" data-target-counter="bio-count">{{ form.bio.data or current_user.bio }}</textarea>
        <div class="form-hint" id="bio-count">0 / 300</div>
      </div>

      <div class="form-group">
        <label class="form-label">Change avatar</label>
        {{ form.avatar(class="form-input") }}
      </div>

      <div style="display:flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-6);">
        <a href="{{ url_for('users.change_password') }}" class="btn btn-ghost">
          <i data-lucide="lock" width="14" height="14"></i> Change password
        </a>
        <div style="display:flex; gap: var(--space-3);">
          <a href="{{ url_for('users.dashboard') }}" class="btn btn-outline">Cancel</a>
          {{ form.submit(class="btn btn-primary") }}
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock %}