{% extends 'academy/base.html' %}
{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<style>
  .form-page {
    padding: 2.5rem 4rem;
    max-width: 800px;
    margin: 0 auto;
  }

  .panel {
    background: var(--charcoal);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 2.5rem;
  }

  .panel-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2rem;
  }

  .form-group {
    margin-bottom: 1.8rem;
  }

  .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    color: var(--white);
    font-size: 1rem;
  }

  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    border-color: var(--gold);
    outline: none;
  }

  .form-group textarea {
    min-height: 140px;
    resize: vertical;
  }

  .btn-submit {
    padding: 0.9rem 2.5rem;
    font-size: 1rem;
  }

  .current-image {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    max-width: 300px;
    border: 1px solid rgba(255,255,255,0.1);
  }
</style>
{% endblock %}

{% block content %}

<div class="form-page">

  <div style="margin-bottom: 2rem;">
    <a href="{% url 'admin_portfolio' %}" class="btn btn-outline" style="font-size: 0.9rem;">
      ← Back to Portfolio
    </a>
  </div>

  <div class="panel">
    <div class="panel-title">{{ title }}</div>

    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}

      {% for field in form %}
        <div class="form-group">
          {{ field.label_tag }}
          {{ field }}
          {% if field.help_text %}
            <small style="color: var(--gray-light);">{{ field.help_text }}</small>
          {% endif %}
          {{ field.errors }}
        </div>
      {% endfor %}

      {% if form.instance.image and form.instance.pk %}
        <div class="form-group">
          <label>Current Image</label>
          <div class="current-image">
            <img src="{{ form.instance.image.url }}" alt="{{ form.instance.title }}" style="width: 100%; display: block;">
          </div>
        </div>
      {% endif %}

      <div style="margin-top: 2rem;">
        <button type="submit" class="btn btn-gold btn-submit">
          {% if form.instance.pk %}Update Portfolio Item{% else %}Add Portfolio Item{% endif %}
        </button>
      </div>
    </form>
  </div>

</div>

{% endblock %}