{% extends 'chat/base.html' %}
{% block title %}Profile — DiscordClone{% endblock %}
{% block body %}
<div class="auth-wrapper">
  <div class="auth-card" style="max-width:480px;">
    <h1 style="font-size:1.3rem;">Edit Profile</h1>
    <p class="sub">{{ request.user.username }} · <span class="role-badge role-{{ request.user.profile.role }}">{{ request.user.profile.role }}</span></p>
    {% if messages %}
    {% for msg in messages %}
    <div class="alert alert-success py-2">{{ msg }}</div>
    {% endfor %}
    {% endif %}
    <form method="post" enctype="multipart/form-data" action="{% url 'profile' %}">
      {% csrf_token %}
      <div class="mb-3 text-center">
        {% if request.user.profile.avatar %}
        <img src="{{ request.user.profile.avatar.url }}" class="rounded-circle" style="width:80px;height:80px;object-fit:cover;" alt="av">
        {% else %}
        <div class="user-avatar mx-auto" style="width:80px;height:80px;font-size:2rem;">{{ request.user.username|first|upper }}</div>
        {% endif %}
      </div>
      <div class="mb-3">
        <label class="form-label" style="font-size:.8rem;font-weight:600;color:#b5bac1;text-transform:uppercase;">Avatar</label>
        <input type="file" name="avatar" class="form-control" id="id_avatar" accept="image/*">
      </div>
      <div class="mb-4">
        <label class="form-label" style="font-size:.8rem;font-weight:600;color:#b5bac1;text-transform:uppercase;">Bio</label>
        <textarea name="bio" class="form-control" rows="3" id="id_bio">{{ request.user.profile.bio }}</textarea>
      </div>
      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary flex-fill" id="btn_save_profile">Save Changes</button>
        <a href="{% url 'home' %}" class="btn btn-secondary flex-fill" id="btn_back_profile">Back</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}