{% extends 'base.html' %}
{% block title %}Add Portfolio Item — CampusTalent{% endblock %}

{% block content %}
<div class="page-content">
<div class="container-xs">
  <div style="margin-bottom:2rem">
    <h1 style="font-size:1.75rem;margin-bottom:0.375rem">Add Portfolio Item</h1>
    <p style="color:var(--text-muted)">Showcase your work with images, links, or GitHub repos</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 %}

      <div class="form-group">
        <label class="form-label">Title *</label>
        {{ form.title }}
      </div>

      <div class="form-group">
        <label class="form-label">Type *</label>
        {{ form.item_type }}
      </div>

      <div class="form-group">
        <label class="form-label">Description</label>
        {{ form.description }}
      </div>

      <div class="form-group">
        <label class="form-label">URL (for links / GitHub repos)</label>
        {{ form.url }}
      </div>

      <div class="form-group">
        <label class="form-label">Image (optional)</label>
        <div class="file-upload-area" id="upload-area">
          <div style="font-size:2rem;margin-bottom:0.5rem">🖼</div>
          <p style="color:var(--text-muted);font-size:0.875rem">Click or drag to upload an image</p>
          {{ form.image }}
        </div>
        <img id="img-preview" style="display:none;max-width:100%;border-radius:var(--radius);margin-top:0.75rem">
      </div>

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

{% block extra_js %}
<script>
const imgInput = document.querySelector('input[type="file"]');
if (imgInput) {
  imgInput.style.display = 'none';
  document.getElementById('upload-area').addEventListener('click', () => imgInput.click());
  imgInput.addEventListener('change', function () {
    if (this.files && this.files[0]) {
      const reader = new FileReader();
      reader.onload = e => {
        const p = document.getElementById('img-preview');
        p.src = e.target.result;
        p.style.display = 'block';
      };
      reader.readAsDataURL(this.files[0]);
    }
  });
}
</script>
{% endblock %}