{% extends 'academy/admin_base.html' %}
{% block title %}Portfolio Management{% endblock %}

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

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  }

  .page-header h1 {
    font-size: 2.3rem;
    margin: 0;
  }

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

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

  .data-table {
    width: 100%;
    border-collapse: collapse;
  }

  .data-table thead {
    background: rgba(201, 168, 76, 0.08);
  }

  .data-table th {
    text-align: left;
    padding: 1.2rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .data-table td {
    padding: 1.3rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
  }

  .data-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .portfolio-title {
    font-weight: 600;
    color: var(--white);
  }

  .btn-action {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    margin-right: 0.5rem;
  }

  .btn-delete {
    background: var(--red);
    color: white;
  }

  .btn-delete:hover {
    background: #a32d23;
  }

  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray);
  }

  @media (max-width: 992px) {
    .portfolio-page {
      padding: 1.8rem 1.5rem;
    }
  }
</style>
{% endblock %}

{% block admin_content %}

<div class="portfolio-page">

  <!-- Header -->
  <div class="page-header">
    <div>
      <p
        style="color: var(--gold); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.4rem;">
        Creative Showcase</p>
      <h1>Portfolio Management</h1>
    </div>
    <a href="{% url 'admin_portfolio_add' %}" class="btn btn-gold">+ Add New Portfolio Item</a>
  </div>

  <div class="panel">
    <div class="panel-title">🎨 All Portfolio Items</div>

    <table class="data-table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Student</th>
          <th>Created</th>
          <th style="width: 180px;">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr>
          <td>
            <div class="portfolio-title">{{ item.title }}</div>
            {% if item.description %}
            <small style="color: var(--gray-light); display: block; margin-top: 0.2rem;">
              {{ item.description|truncatewords:12 }}
            </small>
            {% endif %}
          </td>
          <td>{{ item.student.full_name }}</td>
          <td>{{ item.created_at|date:"d M Y" }}</td>
          <td>
            <a href="{% url 'admin_portfolio_edit' item.id %}" class="btn btn-dark btn-action">Edit</a>
            <a href="{% url 'admin_portfolio_delete' item.id %}" class="btn btn-delete btn-action"
              onclick="return confirm('Are you sure you want to delete this portfolio item?')">
              Delete
            </a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="4">
            <div class="empty-state">
              <div style="font-size: 4.5rem; margin-bottom: 1rem; opacity: 0.4;">🖼️</div>
              <h4>No portfolio items yet</h4>
              <p>Students haven’t added any portfolio work yet.</p>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Quick Stats -->
  <div
    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.5rem;">
    <div class="panel" style="text-align: center;">
      <h5 style="color: var(--gray-light);">Total Items</h5>
      <h2 style="color: var(--gold); margin: 0.5rem 0 0;">{{ items|length }}</h2>
    </div>
    <div class="panel" style="text-align: center;">
      <h5 style="color: var(--gray-light);">Featured</h5>
      <h2 style="color: var(--green); margin: 0.5rem 0 0;">8</h2>
    </div>
    <div class="panel" style="text-align: center;">
      <h5 style="color: var(--gray-light);">This Month</h5>
      <h2 style="color: var(--gold-light); margin: 0.5rem 0 0;">14</h2>
    </div>
  </div>

</div>

{% endblock %}