{% extends "portal_base.html" %}
{% load static %}

{% block title %}Profile & Account{% endblock %}
{% block portal_title %}Profile & account{% endblock %}
{% block portal_subtitle %}Build a complete professional profile so Tecvico can understand your work and communicate clearly.{% endblock %}

{% block portal_content %}
<div class="dashboard-form-layout">
  <section class="dashboard-panel dashboard-form-card" aria-labelledby="profile-details-title">
    <div class="dashboard-panel__header"><div><h2 id="profile-details-title">Professional profile</h2><p>Your profile information is visible only to you and the Tecvico team.</p></div></div>
    <form method="post" enctype="multipart/form-data" novalidate>
      {% csrf_token %}
      {% if form.non_field_errors %}<div class="form-errors">{{ form.non_field_errors }}</div>{% endif %}

      <div class="profile-avatar-field form-group{% if form.avatar.errors %} has-error{% endif %}">
        <div class="profile-avatar-preview" aria-hidden="true">
          <img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" />
        </div>
        <div>
          <label for="id_avatar">Profile picture</label>
          {{ form.avatar }}
          <p class="form-hint">JPG, PNG, or WebP. Maximum 5 MB. A square image works best.</p>
          {{ form.avatar.errors }}
        </div>
      </div>

      <div class="profile-form-section">
        <h3>Identity</h3>
        <div class="form-grid form-grid--2">
          <div class="form-group"><label for="id_first_name">First name <span class="required-star">*</span></label>{{ form.first_name }}{{ form.first_name.errors }}</div>
          <div class="form-group"><label for="id_last_name">Last name <span class="required-star">*</span></label>{{ form.last_name }}{{ form.last_name.errors }}</div>
        </div>
        <div class="form-group"><label for="id_email">Email address <span class="required-star">*</span></label>{{ form.email }}<p class="form-hint">Used for project updates and secure account communication.</p>{{ form.email.errors }}</div>
      </div>

      <div class="profile-form-section">
        <h3>Professional information</h3>
        <div class="form-grid form-grid--2">
          <div class="form-group"><label for="id_company">Organization</label>{{ form.company }}{{ form.company.errors }}</div>
          <div class="form-group"><label for="id_job_title">Role or job title</label>{{ form.job_title }}{{ form.job_title.errors }}</div>
        </div>
        <div class="form-group"><label for="id_bio">Professional bio</label>{{ form.bio }}<p class="form-hint">Up to 600 characters about your research, technical work, or project interests.</p>{{ form.bio.errors }}</div>
      </div>

      <div class="profile-form-section">
        <h3>Contact details</h3>
        <div class="form-group"><label for="id_phone">Phone number</label>{{ form.phone }}{{ form.phone.errors }}</div>
      </div>

      <div class="dashboard-form-actions"><button type="submit" class="btn-primary">Save profile</button></div>
    </form>
  </section>
  <aside class="profile-context-card">
    <div class="profile-context-card__avatar"><img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" /></div>
    <h2>{{ user.get_full_name|default:user.username }}</h2>
    {% if user.client_profile.job_title or user.client_profile.company %}<p>{% if user.client_profile.job_title %}{{ user.client_profile.job_title }}{% endif %}{% if user.client_profile.job_title and user.client_profile.company %} · {% endif %}{% if user.client_profile.company %}{{ user.client_profile.company }}{% endif %}</p>{% else %}<p>{{ user.email }}</p>{% endif %}
    {% if user.client_profile.bio %}<div class="profile-context-card__expertise">{{ user.client_profile.bio|truncatechars:150 }}</div>{% endif %}
    <div class="profile-context-card__rule"></div>
    <span class="profile-context-card__label">Account status</span>
    <strong class="profile-status"><span></span> Active client account</strong>
  </aside>
</div>
{% endblock %}