{% extends 'base.html' %}
{% block title %}Edit Profile — CampusTalent{% endblock %}
{% block content %}
<div class="page-content">
<div class="container-sm">
  <div style="margin-bottom:2rem">
    <h1 style="font-size:1.75rem;margin-bottom:0.375rem">Edit Your Profile</h1>
    <p style="color:var(--text-muted)">A complete profile helps you get discovered and builds trust</p>
  </div>

  <div class="card card-accent">
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      {% if form.errors %}<div class="alert alert-danger">Please fix the errors below.</div>{% endif %}

      <!-- Photo -->
      <div class="form-group" style="text-align:center;margin-bottom:2rem">
        <label class="form-label" style="display:block;margin-bottom:0.875rem">Profile Photo</label>
        {% if form.instance.photo %}
          <img src="{{ form.instance.photo.url }}" id="photo-preview" class="avatar avatar-xl" style="margin:0 auto 1rem;border:3px solid var(--border)">
        {% else %}
          <div class="avatar avatar-xl avatar-placeholder" id="photo-placeholder" style="margin:0 auto 1rem">
            {{ request.user.first_name|first|upper }}{{ request.user.last_name|first|upper }}
          </div>
          <img id="photo-preview" class="avatar avatar-xl" style="margin:0 auto 1rem;border:3px solid var(--border);display:none">
        {% endif %}
        <div>
          <label for="{{ form.photo.id_for_label }}" class="btn btn-outline btn-sm" style="cursor:pointer">
            Upload Photo
          </label>
          {{ form.photo }}
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Bio</label>
        {{ form.bio }}
        <div class="form-hint">Tell the community about yourself, your interests, and what you're working on.</div>
      </div>

      <div class="form-group">
        <label class="form-label">Skills</label>
        {{ form.skills }}
        <div class="form-hint">Comma-separated list: Python, UI Design, Video Editing</div>
      </div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
        <div class="form-group">
          <label class="form-label">Experience Level</label>
          {{ form.experience_level }}
        </div>
        <div class="form-group">
          <label class="form-label">Available for Collaboration</label>
          <div style="display:flex;align-items:center;gap:0.625rem;margin-top:0.75rem">
            {{ form.is_available }}
            <span style="font-size:0.875rem">Yes, I'm open to collaboration</span>
          </div>
        </div>
      </div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
        <div class="form-group">
          <label class="form-label">GitHub URL</label>
          {{ form.github_url }}
        </div>
        <div class="form-group">
          <label class="form-label">LinkedIn URL</label>
          {{ form.linkedin_url }}
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Portfolio URL</label>
        {{ form.portfolio_url }}
      </div>

      <div style="display:flex;gap:0.75rem">
        <button type="submit" class="btn btn-primary btn-lg">Save Profile</button>
        <a href="{% url 'profiles:my_profile' %}" class="btn btn-ghost btn-lg">Cancel</a>
      </div>
    </form>
  </div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  const photoInput = document.getElementById('{{ form.photo.id_for_label }}');
  if (photoInput) {
    photoInput.style.display = 'none';
    photoInput.setAttribute('data-image-preview', 'photo-preview');
    photoInput.addEventListener('change', function() {
      if (this.files && this.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
          const preview = document.getElementById('photo-preview');
          const placeholder = document.getElementById('photo-placeholder');
          if (preview) { preview.src = e.target.result; preview.style.display = 'block'; }
          if (placeholder) placeholder.style.display = 'none';
        };
        reader.readAsDataURL(this.files[0]);
      }
    });
  }
</script>
{% endblock %}