{% extends 'base.html' %}
{% block title %}{% if object %}Edit{% else %}New{% endif %} — 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">
      {% if object %}Edit Skill Listing{% else %}List a Skill{% endif %}
    </h1>
    <p style="color:var(--text-muted)">Share what you can offer with the campus community</p>
  </div>

  <div class="card card-accent">
    <form method="post">
      {% 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">Skill Title *</label>
        {{ form.title }}
        <div class="form-hint">e.g. "UI/UX Design", "Python Development", "Video Editing"</div>
      </div>

      <div class="form-group">
        <label class="form-label">Description *</label>
        {{ form.description }}
        <div class="form-hint">Describe your experience, what you can help with, and your working style.</div>
      </div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
        <div class="form-group">
          <label class="form-label">Category *</label>
          {{ form.category }}
        </div>
        <div class="form-group">
          <label class="form-label">Experience Level *</label>
          {{ form.experience_level }}
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Tags</label>
        {{ form.tags }}
        <div class="form-hint">Comma-separated: Python, Django, REST APIs</div>
      </div>

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

      <div class="form-group">
        <label style="display:flex;align-items:center;gap:0.625rem;cursor:pointer">
          {{ form.is_available }}
          <span style="font-weight:600;font-size:0.9rem">I am currently available for collaboration</span>
        </label>
      </div>

      <div style="display:flex;gap:0.75rem;margin-top:0.5rem">
        <button type="submit" class="btn btn-primary btn-lg">
          {% if object %}Update Listing{% else %}Publish Listing{% endif %}
        </button>
        <a href="{% url 'skills:list' %}" class="btn btn-ghost btn-lg">Cancel</a>
      </div>
    </form>
  </div>
</div>
</div>
{% endblock %}