{% extends "base.html" %}
{% block content %}
<section class="projects-layout">
  <div class="projects-panel">
    <div class="panel-header">
      <h2>Mis proyectos</h2>
      {% if user.role == "admin" %}
      <a class="ghost-button" href="/admin">Administrador</a>
      {% endif %}
    </div>
    <div class="project-grid">
      {% for project in projects %}
      <a class="project-card" href="/projects/{{ project.id }}">
        <div class="project-title">{{ project.name }}</div>
        <div class="project-desc">{{ project.description or "Sin descripcion" }}</div>
        <div class="project-meta">{% if project.is_group %}Grupo{% else %}Individual{% endif %}</div>
      </a>
      {% else %}
      <div class="empty-state">No tienes proyectos asignados.</div>
      {% endfor %}
    </div>
  </div>

  <aside class="account-panel">
    <h3>Perfil</h3>
    <div class="profile-card">
      <div class="profile-avatar">
        {% if user.profile_photo_path %}
        <img class="profile-photo" src="{{ user.profile_photo_path }}" alt="Foto de perfil de {{ user.username }}" />
        {% else %}
        <span class="profile-avatar-fallback">{{ user.username[:1] | upper }}</span>
        {% endif %}
      </div>
      <div>
        <div class="profile-name">{{ user.username }}</div>
        <div class="muted">{{ user.email }}</div>
      </div>
    </div>
    {% if profile_success %}
    <div class="success-box">{{ profile_success }}</div>
    {% endif %}
    {% if profile_error %}
    <div class="error-box">{{ profile_error }}</div>
    {% endif %}
    <form method="post" action="/account/profile-photo" enctype="multipart/form-data" class="stack">
      <label>Foto de perfil<input type="file" name="profile_photo" accept=".jpg,.jpeg,.png,.gif,.webp" /></label>
      <button class="primary" type="submit">Guardar foto</button>
    </form>
    {% if user.profile_photo_path %}
    <form method="post" action="/account/profile-photo" class="stack compact-stack">
      <input type="hidden" name="remove_photo" value="true" />
      <button class="ghost-button" type="submit">Quitar foto</button>
    </form>
    {% endif %}

    <hr class="panel-separator" />
    <h3>Cambio de contrasena</h3>
    <p class="muted">Actualiza tu clave de acceso cuando lo necesites.</p>
    {% if password_success %}
    <div class="success-box">{{ password_success }}</div>
    {% endif %}
    {% if password_error %}
    <div class="error-box">{{ password_error }}</div>
    {% endif %}
    <form method="post" action="/account/password" class="stack">
      <label>Contrasena actual<input type="password" name="current_password" required /></label>
      <label>Nueva contrasena<input type="password" name="new_password" required /></label>
      <label>Confirmar contrasena<input type="password" name="confirm_password" required /></label>
      <button class="primary" type="submit">Actualizar contrasena</button>
    </form>
  </aside>
</section>
{% endblock %}